├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .gitattributes ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── build ├── .eslintrc.json ├── build-style.js ├── webpack.base.config.js ├── webpack.dev.config.js ├── webpack.dist.dev.config.js ├── webpack.dist.prod.config.js └── webpack.test.config.js ├── examples ├── components │ └── vue-split-panel.vue ├── index.html └── main.js ├── package.json └── src ├── components └── split │ ├── index.js │ ├── split-area.vue │ └── split.vue ├── index.js ├── mixins └── emitter.js └── styles ├── components ├── index.less └── split.less ├── custom.less └── index.less /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | charset = utf-8 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | src/directives -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parserOptions": { 4 | "ecmaVersion": 6, 5 | "sourceType": "module" 6 | }, 7 | "env": { 8 | "browser": true 9 | }, 10 | "extends": "eslint:recommended", 11 | "plugins": [ "html" ], 12 | "rules": { 13 | "indent": ["error", 4, { "SwitchCase": 1 }], 14 | "quotes": ["error", "single"], 15 | "semi": ["error", "always"], 16 | "no-console": ["error"] 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | src/styles/**/* linguist-vendored=false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .idea 3 | .ipr 4 | .iws 5 | *.diff 6 | *.patch 7 | *.bak 8 | .DS_Store 9 | node_modules/ 10 | node_modules2/ 11 | .project 12 | .settings 13 | npm-debug.log 14 | .*proj 15 | .svn/ 16 | *.swp 17 | *.swo 18 | *.log 19 | examples/dist/ 20 | dist/ 21 | yarn-error.log 22 | test/unit/coverage 23 | .vscode 24 | package-lock.json -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .* 2 | *.md 3 | *.yml 4 | build/ 5 | node_modules/ 6 | test/ 7 | gulpfile.js 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4" 4 | script: 5 | - npm run test 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 bajaniyarohit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue-Split-Panel 2 | 3 | - __Fast:__ No overhead or attached window event listeners, uses pure CSS for resizing. 4 | - __Compatible:__ Works great in IE9, and _even loads in IE8_ with polyfills. Early Firefox/Chrome/Safari/Opera supported too. 5 | 6 | ## Installation 7 | 8 | npm: 9 | 10 | ``` 11 | $ npm install --save vue-split-panel 12 | ``` 13 | 14 | ## Getting Started 15 | 16 | ```js 17 | // using ES6 modules 18 | import VueSplit from 'vue-split-panel' 19 | Vue.use(VueSplit) 20 | ``` 21 | 22 | ## Usage Examples 23 | 24 | A split with two elements, starting at 25% and 75% wide. 25 | 26 | ```html 27 | 28 | 29 | panel left 30 | 31 | 32 | panel right 33 | 34 | 35 | ``` 36 | 37 | A split with three elements, starting with even widths with 100px, 100px and 300px minimum widths, respectively. 38 | 39 | ```html 40 | 41 | 42 | panel left 43 | 44 | 45 | panel center 46 | 47 | 48 | panel right 49 | 50 | 51 | ``` 52 | 53 | A vertical split with two elements. 54 | 55 | ```html 56 | 57 | 58 | panel left 59 | 60 | 61 | panel center 62 | 63 | 64 | ``` 65 | 66 | Setting the gutter size to 20px. 67 | 68 | ```html 69 | 70 | 71 | panel left 72 | 73 | 74 | panel center 75 | 76 | 77 | ``` 78 | 79 | Setting the snap offset to 20px (the distance at which the gutter snaps to either area's `minSize`). 80 | 81 | ```html 82 | 83 | 84 | panel left 85 | 86 | 87 | panel center 88 | 89 | 90 | ``` 91 | 92 | Callbacks that can be added on drag (fired continously), drag start and drag end. If doing more than basic operations in `onDrag`, add a debounce function to rate limit the callback. 93 | 94 | ```html 95 | 96 | 97 | panel left 98 | 99 | 100 | panel center 101 | 102 | 103 | ``` 104 | ``` 105 | methods: { 106 | onDragStart (size) { 107 | console.log('Drag Start', size) // callback existing size 108 | }, 109 | onDrag (size) { 110 | console.log('on Drag', size) // callback new size 111 | }, 112 | onDragEnd (size) { 113 | console.log('Drag End', size) // callback new size 114 | } 115 | } 116 | ``` 117 | A Reset the panel and get new sizes 118 | 119 | ```html 120 | 121 | 122 | panel left 123 | 124 | 125 | panel center 126 | 127 | 128 | ``` 129 | ``` 130 | methods: { 131 | Reset () { 132 | console.log(this.$refs.mySplit.reset()) 133 | } 134 | getSizes () { 135 | console.log(this.$refs.mySplit.getSizes()) 136 | } 137 | } 138 | ``` 139 | 140 | ## API 141 | 142 | #### Split props 143 | 144 | | Property | Type | Default | Description | 145 | |---|---|---|---| 146 | | `direction` | String | 'horizontal' | Direction to split: horizontal or vertical. | 147 | | `gutterSize` | Number | 10 | Gutter size in pixels. | 148 | | `snapOffset` | Number | 30 | Snap offset in pixels. | 149 | 150 | #### Split events 151 | 152 | | Event Name | Description | Return Value 153 | |---|---|---| 154 | | `onDrag` | Callback on drag. | current size | 155 | | `onDragStart` | Callback on drag start. | new size | 156 | | `onDragEnd` | Callback on drag end. | new size | 157 | 158 | #### Split methods 159 | 160 | | Method Name | Description | Arguments 161 | |---|---|---| 162 | | `reset` | Reset panel. | none | 163 | 164 | #### SplitArea props 165 | 166 | | Property | Type | Default | Description | 167 | |---|---|---|---| 168 | | `sizes` | Array | | Initial sizes of each element in percents or CSS values. | 169 | | `minSize` | Number or Array | 100 | Minimum size of each element. | 170 | 171 | 172 | ## Important Note 173 | 174 | vue-split-panel does not set CSS beyond the minimum needed to manage the width or height of the elements. 175 | 176 | 177 | ## Browser Support 178 | 179 | This library uses [Split.js](https://github.com/nathancahill/Split.js). These features are supported in the following browsers: 180 | 181 | | Chrome logo | Firefox logo | Internet Explorer logo | Opera logo | Safari logo | [BrowserStack logo](http://browserstack.com/) | 182 | |:---:|:---:|:---:|:---:|:---:|:----| 183 | | 22+ ✔ | 6+ ✔ | 9+ ✔ | 15+ ✔ | 6.2+ ✔ | Sponsored ✔ | 184 | 185 | ## Built With 186 | 187 | * [Webpack](https://webpack.js.org/) - The web framework used 188 | * [gulp](http://gulpjs.com/) - Automated development toolkit 189 | 190 | ## License 191 | 192 | This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/bajaniyarohit/vue-split-panel/blob/master/LICENSE) file for details -------------------------------------------------------------------------------- /build/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "../.eslintrc.json" 4 | ], 5 | "env": { 6 | "node": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /build/build-style.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var cleanCSS = require('gulp-clean-css'); 3 | var less = require('gulp-less'); 4 | var rename = require('gulp-rename'); 5 | var autoprefixer = require('gulp-autoprefixer'); 6 | 7 | // Compile less 8 | gulp.task('css', function () { 9 | gulp.src('../src/styles/index.less') 10 | .pipe(less()) 11 | .pipe(autoprefixer({ 12 | browsers: ['last 2 versions', 'ie > 8'] 13 | })) 14 | .pipe(cleanCSS()) 15 | .pipe(rename('vue-split-panel.css')) 16 | .pipe(gulp.dest('../dist/styles')); 17 | }); 18 | 19 | gulp.task('default', ['css']); 20 | -------------------------------------------------------------------------------- /build/webpack.base.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Public configuration 3 | */ 4 | var path = require('path'); 5 | 6 | function resolve(dir) { 7 | return path.join(__dirname, '..', dir) 8 | } 9 | 10 | module.exports = { 11 | // Loader 12 | module: { 13 | // https://doc.webpack-china.org/guides/migrating/#module-loaders-module-rules 14 | rules: [{ 15 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 16 | test: /\.vue$/, 17 | loader: 'vue-loader', 18 | options: { 19 | loaders: { 20 | css: 'vue-style-loader!css-loader', 21 | less: 'vue-style-loader!css-loader!less-loader' 22 | }, 23 | postLoaders: { 24 | html: 'babel-loader' 25 | } 26 | } 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader', 31 | exclude: /node_modules/ 32 | }, 33 | { 34 | test: /\.css$/, 35 | use: [ 36 | 'style-loader', 37 | 'css-loader', 38 | 'autoprefixer-loader' 39 | ] 40 | }, 41 | { 42 | test: /\.less$/, 43 | use: [ 44 | 'style-loader', 45 | 'css-loader', 46 | 'less-loader' 47 | ] 48 | }, 49 | { 50 | test: /\.scss$/, 51 | use: [ 52 | 'style-loader', 53 | 'css-loader', 54 | 'sass-loader?sourceMap' 55 | ] 56 | }, 57 | { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=8192' }, 58 | { test: /\.(html|tpl)$/, loader: 'html-loader' } 59 | ] 60 | }, 61 | resolve: { 62 | extensions: ['.js', '.vue'], 63 | alias: { 64 | 'vue': resolve('../node_modules/vue/dist/vue.esm.js'), 65 | 'vue': 'vue/dist/vue.esm.js', 66 | '@': resolve('src') 67 | } 68 | } 69 | }; 70 | -------------------------------------------------------------------------------- /build/webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Local preview 3 | */ 4 | 5 | var path = require('path'); 6 | var webpack = require('webpack'); 7 | // var ExtractTextPlugin = require('extract-text-webpack-plugin'); 8 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 9 | var merge = require('webpack-merge'); 10 | var webpackBaseConfig = require('./webpack.base.config.js'); 11 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); 12 | 13 | 14 | module.exports = merge(webpackBaseConfig, { 15 | // Entrance 16 | entry: { 17 | main: './examples/main', 18 | vendors: ['vue', 'vue-router'] 19 | }, 20 | // Output 21 | output: { 22 | path: path.join(__dirname, '../examples/dist'), 23 | publicPath: '', 24 | filename: '[name].js', 25 | chunkFilename: '[name].chunk.js' 26 | }, 27 | resolve: { 28 | alias: { 29 | VueWidgets: '../../src/index', 30 | vue: 'vue/dist/vue.esm.js' 31 | // vue: 'vue/dist/vue.runtime.js' 32 | } 33 | }, 34 | plugins: [ 35 | new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendor.bundle.js' }), 36 | new HtmlWebpackPlugin({ 37 | inject: true, 38 | filename: path.join(__dirname, '../examples/dist/index.html'), 39 | template: path.join(__dirname, '../examples/index.html') 40 | }), 41 | new FriendlyErrorsPlugin() 42 | ] 43 | }); 44 | -------------------------------------------------------------------------------- /build/webpack.dist.dev.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var merge = require('webpack-merge'); 4 | var webpackBaseConfig = require('./webpack.base.config.js'); 5 | 6 | process.env.NODE_ENV = 'production'; 7 | 8 | module.exports = merge(webpackBaseConfig, { 9 | entry: { 10 | main: './src/index.js' 11 | }, 12 | output: { 13 | path: path.resolve(__dirname, '../dist'), 14 | publicPath: '/dist/', 15 | filename: 'vue-split-panel.js', 16 | library: 'vue-split-panel', 17 | libraryTarget: 'umd', 18 | umdNamedDefine: true 19 | }, 20 | externals: { 21 | vue: { 22 | root: 'Vue', 23 | commonjs: 'vue', 24 | commonjs2: 'vue', 25 | amd: 'vue' 26 | } 27 | }, 28 | plugins: [ 29 | // @todo 30 | new webpack.DefinePlugin({ 31 | 'process.env': { 32 | NODE_ENV: '"production"' 33 | } 34 | }) 35 | ] 36 | }); 37 | -------------------------------------------------------------------------------- /build/webpack.dist.prod.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var merge = require('webpack-merge'); 4 | var webpackBaseConfig = require('./webpack.base.config.js'); 5 | 6 | process.env.NODE_ENV = 'production'; 7 | 8 | module.exports = merge(webpackBaseConfig, { 9 | entry: { 10 | main: './src/index.js' 11 | }, 12 | output: { 13 | path: path.resolve(__dirname, '../dist'), 14 | publicPath: '/dist/', 15 | filename: 'vue-split-panel.min.js', 16 | library: 'vue-split-panel', 17 | libraryTarget: 'umd', 18 | umdNamedDefine: true 19 | }, 20 | externals: { 21 | vue: { 22 | root: 'Vue', 23 | commonjs: 'vue', 24 | commonjs2: 'vue', 25 | amd: 'vue' 26 | } 27 | }, 28 | plugins: [ 29 | // @todo 30 | new webpack.DefinePlugin({ 31 | 'process.env.NODE_ENV': '"production"' 32 | }), 33 | new webpack.optimize.UglifyJsPlugin({ 34 | compress: { 35 | warnings: false 36 | } 37 | }) 38 | ] 39 | }); 40 | -------------------------------------------------------------------------------- /build/webpack.test.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Used for unit testing 3 | */ 4 | 5 | var webpack = require('webpack'); 6 | var merge = require('webpack-merge'); 7 | var webpackBaseConfig = require('./webpack.base.config.js'); 8 | 9 | 10 | var webpackConfig = merge(webpackBaseConfig, { 11 | // use inline sourcemap for karma-sourcemap-loader 12 | devtool: '#inline-source-map', 13 | plugins: [ 14 | new webpack.DefinePlugin({ 15 | 'process.env': { 16 | NODE_ENV: '"testing"' 17 | } 18 | }) 19 | ] 20 | }); 21 | 22 | // no need for app entry during tests 23 | delete webpackConfig.entry; 24 | 25 | module.exports = webpackConfig; 26 | -------------------------------------------------------------------------------- /examples/components/vue-split-panel.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 41 | 42 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Vue-widgets example 5 | 6 | 7 |
8 | 9 | -------------------------------------------------------------------------------- /examples/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Home from './components/vue-split-panel.vue'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | import VueSplit from '../src'; 7 | // import '../dist/styles/vue-split-panel.css'; 8 | 9 | Vue.use(VueSplit); 10 | //Vue.component('Icon', Icon) 11 | /* eslint-disable no-new */ 12 | new Vue({ 13 | el: '#app', 14 | render: h => h(Home) 15 | }); 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-split-panel", 3 | "version": "1.1.4", 4 | "description": "Vue.js split-panel component", 5 | "main": "dist/vue-split-panel.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 8081 --config build/webpack.dev.config.js", 8 | "build:example": "webpack --config build/webpack.dev.config.js", 9 | "build:style": "gulp --gulpfile build/build-style.js", 10 | "build:dev": "webpack --config build/webpack.dist.dev.config.js", 11 | "build:prod": "webpack --config build/webpack.dist.prod.config.js", 12 | "build": "npm run build:style && npm run build:dev && npm run build:prod", 13 | "lint": "eslint --fix --ext .js,.vue src", 14 | "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 15 | "test": "npm run lint && npm run unit", 16 | "prepublish": "npm run build" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/bajaniyarohit/vue-split-panel.git" 21 | }, 22 | "keywords": [ 23 | "split.js", 24 | "split", 25 | "panel", 26 | "pan", 27 | "horizantal", 28 | "vertical", 29 | "vue" 30 | ], 31 | "author": "bajaniyarohit", 32 | "contributors": [ 33 | "Kim Schmider (https://schmider.kim/)" 34 | ], 35 | "license": "MIT", 36 | "bugs": { 37 | "url": "https://github.com/bajaniyarohit/vue-split-panel/issues" 38 | }, 39 | "homepage": "https://github.com/bajaniyarohit/vue-split-panel#readme", 40 | "peerDependencies": { 41 | "vue": "^2.1.10" 42 | }, 43 | "devDependencies": { 44 | "autoprefixer-loader": "^2.0.0", 45 | "babel": "^6.23.0", 46 | "babel-core": "^6.23.1", 47 | "babel-loader": "^6.2.4", 48 | "babel-plugin-transform-runtime": "^6.12.0", 49 | "babel-preset-es2015": "^6.9.0", 50 | "babel-runtime": "^6.11.6", 51 | "chai": "^3.5.0", 52 | "cross-env": "^3.1.4", 53 | "css-loader": "^0.23.1", 54 | "eslint": "^3.12.2", 55 | "eslint-plugin-html": "^1.7.0", 56 | "extract-text-webpack-plugin": "^2.0.0", 57 | "file-loader": "^0.8.5", 58 | "friendly-errors-webpack-plugin": "^1.6.1", 59 | "function-bind": "^1.1.0", 60 | "gulp": "^3.9.1", 61 | "gulp-autoprefixer": "^3.1.1", 62 | "gulp-clean-css": "^2.4.0", 63 | "gulp-less": "^3.3.2", 64 | "gulp-rename": "^1.2.2", 65 | "html-loader": "^0.3.0", 66 | "html-webpack-plugin": "^2.28.0", 67 | "karma": "^1.4.1", 68 | "karma-coverage": "^1.1.1", 69 | "karma-mocha": "^1.3.0", 70 | "karma-phantomjs-launcher": "^1.0.2", 71 | "karma-sinon-chai": "^1.2.4", 72 | "karma-sourcemap-loader": "^0.3.7", 73 | "karma-spec-reporter": "0.0.26", 74 | "karma-webpack": "^2.0.2", 75 | "less": "^2.7.1", 76 | "less-loader": "^2.2.3", 77 | "lolex": "^1.5.2", 78 | "mocha": "^3.2.0", 79 | "phantomjs-prebuilt": "^2.1.13", 80 | "sinon": "^1.17.7", 81 | "sinon-chai": "^2.8.0", 82 | "style-loader": "^0.13.1", 83 | "url-loader": "^0.5.7", 84 | "vue": "^2.3.3", 85 | "vue-hot-reload-api": "^1.3.3", 86 | "vue-html-loader": "^1.2.3", 87 | "vue-loader": "^11.0.0", 88 | "vue-router": "^2.2.1", 89 | "vue-style-loader": "^1.0.0", 90 | "vue-template-compiler": "^2.3.3", 91 | "webpack": "^2.2.1", 92 | "webpack-dev-server": "^2.4.1", 93 | "webpack-merge": "^3.0.0" 94 | }, 95 | "engines": { 96 | "node": ">= 4.0.0", 97 | "npm": ">= 3.0.0" 98 | }, 99 | "dependencies": { 100 | "split.js": "^1.3.5" 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/components/split/index.js: -------------------------------------------------------------------------------- 1 | import Split from './split.vue'; 2 | import SplitArea from './split-area.vue'; 3 | 4 | Split.SplitArea = SplitArea; 5 | export default Split; 6 | -------------------------------------------------------------------------------- /src/components/split/split-area.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/split/split.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 104 | 105 | 133 | 134 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Split from './components/split'; 2 | 3 | const VueSplit = { 4 | Split, 5 | SplitArea: Split.SplitArea 6 | } 7 | 8 | const install = function (Vue, opts = {}) { 9 | Object.keys(VueSplit).forEach((key) => { 10 | Vue.component(key, VueSplit[key]); 11 | }); 12 | }; 13 | 14 | // auto install 15 | if (typeof window !== 'undefined' && window.Vue) { 16 | install(window.Vue); 17 | } 18 | 19 | module.exports = Object.assign(VueSplit, { install }); // eslint-disable-line no-undef 20 | -------------------------------------------------------------------------------- /src/mixins/emitter.js: -------------------------------------------------------------------------------- 1 | function broadcast(componentName, eventName, params) { 2 | this.$children.forEach(child => { 3 | const name = child.$options.name; 4 | 5 | if (name === componentName) { 6 | child.$emit.apply(child, [eventName].concat(params)); 7 | } else { 8 | // Todo If params is an empty array, the received will be undefined 9 | broadcast.apply(child, [componentName, eventName].concat([params])); 10 | } 11 | }); 12 | } 13 | export default { 14 | methods: { 15 | dispatch(componentName, eventName, params) { 16 | let parent = this.$parent || this.$root; 17 | let name = parent.$options.name; 18 | 19 | while (parent && (!name || name !== componentName)) { 20 | parent = parent.$parent; 21 | 22 | if (parent) { 23 | name = parent.$options.name; 24 | } 25 | } 26 | if (parent) { 27 | parent.$emit.apply(parent, [eventName].concat(params)); 28 | } 29 | }, 30 | broadcast(componentName, eventName, params) { 31 | broadcast.call(this, componentName, eventName, params); 32 | } 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /src/styles/components/index.less: -------------------------------------------------------------------------------- 1 | @import "split"; -------------------------------------------------------------------------------- /src/styles/components/split.less: -------------------------------------------------------------------------------- 1 | @widget-prefix-cls: ~"@{css-prefix}split"; 2 | 3 | /*dropdown color box starts*/ 4 | /*dropdown color box ends*/ 5 | /* Edit Heading starts*/ 6 | .@{widget-prefix-cls}{ 7 | -webkit-box-sizing: border-box; 8 | -moz-box-sizing: border-box; 9 | box-sizing: border-box; 10 | overflow-y: auto; 11 | overflow-x: hidden; 12 | height: 100%; 13 | width: 100%; 14 | &.split-horizontal { 15 | height: 100%; 16 | float: left; 17 | } 18 | } -------------------------------------------------------------------------------- /src/styles/custom.less: -------------------------------------------------------------------------------- 1 | // Prefix 2 | @css-prefix: vue-; 3 | 4 | -------------------------------------------------------------------------------- /src/styles/index.less: -------------------------------------------------------------------------------- 1 | @import "./custom"; 2 | @import "./components/index"; --------------------------------------------------------------------------------