├── .prettierrc
├── .npmrc
├── .gitignore
├── screenshot.gif
├── jest.config.js
├── babel.config.js
├── .editorconfig
├── tests
    └── vue-split-pane.spec.js
├── src
    ├── index.js
    └── VueSplitPane.vue
├── README.md
└── package.json


/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true
3 | }
4 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | auto-install-peers=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 | package-lock.json
5 | dist
6 | 


--------------------------------------------------------------------------------
/screenshot.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dangvanthanh/vue-split-pane/HEAD/screenshot.gif


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   verbose: true,
3 |   moduleFileExtensions: ['js', 'json', 'vue'],
4 |   transform: {
5 |     '^.+\\.js$': 'babel-jest',
6 |     '^.+\\.vue$': 'vue-jest'
7 |   }
8 | };
9 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     [
 4 |       '@babel/preset-env',
 5 |       {
 6 |         targets: {
 7 |           node: 'current',
 8 |           edge: '18'
 9 |         }
10 |       }
11 |     ]
12 |   ]
13 | };
14 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/tests/vue-split-pane.spec.js:
--------------------------------------------------------------------------------
 1 | import '@testing-library/jest-dom';
 2 | import { render } from '@testing-library/vue';
 3 | import VueSplitPane from '../src/VueSplitPane.vue';
 4 | 
 5 | test('renders vue split pane component', () => {
 6 |   const { getByText, queryByText } = render(VueSplitPane, {
 7 |     scopedSlots: {
 8 |       left: '<section slot="left">Left Pane</section>',
 9 |       right: '<section slot="right">Right Pane</section>',
10 |     },
11 |   });
12 | 
13 |   expect(queryByText('Center Pane')).not.toBeInTheDocument();
14 | 
15 |   getByText('Left Pane');
16 |   getByText('Right Pane');
17 | });
18 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import VueSplitPane from './VueSplitPane.vue';
 2 | 
 3 | // Declare install function excuted by Vue.use()
 4 | export function install(Vue) {
 5 |   if (install.installed) {
 6 |     return;
 7 |   }
 8 |   install.installed = true;
 9 |   Vue.component('VueSplitPane', VueSplitPane);
10 | }
11 | 
12 | const plugin = { install };
13 | 
14 | let GlobalVue = null;
15 | 
16 | if (typeof window !== 'undefined') {
17 |   GlobalVue = window.Vue;
18 | } else if (typeof global !== 'undefined') {
19 |   GlobalVue = global.Vue;
20 | }
21 | 
22 | if (GlobalVue) {
23 |   GlobalVue.use(plugin);
24 | }
25 | 
26 | export default plugin;
27 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Split Pane
 2 | 
 3 | > Adjustable split pane using Vue.js
 4 | 
 5 | ![](screenshot.gif)
 6 | 
 7 | ## Install
 8 | 
 9 | ```
10 | # yarn (recommend)
11 | $ yarn add vue-split-pane
12 | 
13 | # npm
14 | $ npm install vue-split-pane --save
15 | ```
16 | 
17 | ## Usage
18 | 
19 | ### CDN
20 | 
21 | ```html
22 | <script src="https://unpkg.com/vue-split-pane"></script>
23 | ```
24 | 
25 | ### .vue files
26 | 
27 | ```vue
28 | <template>
29 |   <div class="app">
30 |     <VueSplitPane>
31 |       <section slot="left">Left Pane</section>
32 |       <section slot="right">Right Pane</section>
33 |     </VueSplitPane>
34 |   </div>
35 | </template>
36 | 
37 | <script>
38 | import VueSplitPane from 'vue-split-pane';
39 | 
40 | export default {
41 |   components: { VueSplitPane },
42 | };
43 | </script>
44 | 
45 | <!-- optionally use our default style -->
46 | <style>
47 | @import 'vue-split-pane/dist/vue-split-pane.esm.css';
48 | </style>
49 | ```
50 | 
51 | ## Slot
52 | 
53 | | Name    | Description               |
54 | | ------- | ------------------------- |
55 | | `left`  | The content of left pane  |
56 | | `right` | The content of right pane |
57 | 
58 | ## Build Setup
59 | 
60 | You can use [vue-cli](https://github.com/vuejs/vue-cli) with [vue-rollup-boilerplate templates](https://github.com/dangvanthanh/vue-rollup-boilerplate) or [other vue templates](https://github.com/vuejs-templates)
61 | 
62 | ## License
63 | 
64 | MIT © Dang Van Thanh <dangvanthanh@dangthanh.org>
65 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-split-pane",
 3 |   "version": "0.0.10",
 4 |   "description": "Adjustable split pane using Vue.js",
 5 |   "author": "Dang Van Thanh <dangvanthanh@dangthanh.org>",
 6 |   "main": "dist/vue-split-pane.umd.js",
 7 |   "module": "dist/vue-split-pane.esm.js",
 8 |   "unpkg": "dist/vue-split-pane.min.js",
 9 |   "style": "vue-split-pane/dist/vue-split-pane.esm.css",
10 |   "scripts": {
11 |     "build": "npm run build:browsers && npm run build:es && npm run build:umd",
12 |     "build:browsers": "rollup -c build/rollup.config.browsers.js",
13 |     "build:es": "rollup -c build/rollup.config.es.js",
14 |     "build:umd": "rollup -c build/rollup.config.umd.js",
15 |     "test": "jest",
16 |     "release": "pnpm build && npx clean-publish"
17 |   },
18 |   "peerDependencies": {
19 |     "vue": ">= 2"
20 |   },
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "vue-split-pane"
24 |   },
25 |   "keywords": [
26 |     "vue",
27 |     "split-pane",
28 |     "vue-split-pane"
29 |   ],
30 |   "license": "MIT",
31 |   "devDependencies": {
32 |     "@babel/preset-env": "7.20.2",
33 |     "@dangvanthanh/prettier-config": "^1.0.0",
34 |     "@rollup/plugin-commonjs": "23.0.5",
35 |     "@rollup/plugin-node-resolve": "15.0.1",
36 |     "@rollup/plugin-terser": "^0.2.1",
37 |     "@testing-library/dom": "8.19.0",
38 |     "@testing-library/jest-dom": "5.16.5",
39 |     "@testing-library/vue": "6.6.1",
40 |     "babel-core": "^7.0.0-bridge.0",
41 |     "babel-jest": "29.3.1",
42 |     "clean-css": "5.3.1",
43 |     "esbuild": "0.16.7",
44 |     "jest": "29.3.1",
45 |     "rollup": "2.79.0",
46 |     "rollup-plugin-css-only": "4.3.0",
47 |     "rollup-plugin-esbuild": "5.0.0",
48 |     "rollup-plugin-vue": "^5.1.9",
49 |     "vue": "^2.7.14",
50 |     "vue-jest": "^3.0.7",
51 |     "vue-template-compiler": "2.7.14"
52 |   },
53 |   "prettier": "@dangvanthanh/prettier-config",
54 |   "files": [
55 |     "dist",
56 |     "src",
57 |     "package.json",
58 |     "README.md",
59 |     "LICENSE"
60 |   ]
61 | }
62 | 


--------------------------------------------------------------------------------
/src/VueSplitPane.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="split-pane"
 4 |     :class="{ 'is-dragging': dragging }"
 5 |     @mousemove="dragMove"
 6 |     @mouseup="dragEnd"
 7 |     @mouseleave="dragEnd"
 8 |   >
 9 |     <div class="split-pane-item" :style="{ width: splitLeft }">
10 |       <slot name="left" />
11 |     </div>
12 |     <div class="split-pane-gutter" @mousedown="dragStart"></div>
13 |     <div class="split-pane-item" :style="{ width: splitRight }">
14 |       <slot name="right" />
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   name: 'VueSplitPane',
22 |   data() {
23 |     return {
24 |       gutter: 11,
25 |       split: 50,
26 |       dragging: false,
27 |     };
28 |   },
29 |   computed: {
30 |     splitLeft: function () {
31 |       return `calc(${this.split}% - ${this.gutter}px)`;
32 |     },
33 |     splitRight: function () {
34 |       return `calc(${100 - this.split}% - ${this.gutter}px)`;
35 |     },
36 |   },
37 |   methods: {
38 |     dragStart(e) {
39 |       this.dragging = true;
40 |       this.startX = e.pageX;
41 |       this.startSplit = this.split;
42 |     },
43 |     dragMove(e) {
44 |       if (this.dragging) {
45 |         const dx = e.pageX - this.startX;
46 |         const totalWidth = this.$el.offsetWidth;
47 |         this.split = this.startSplit + ~~((dx / totalWidth) * 100);
48 |       }
49 |     },
50 |     dragEnd() {
51 |       this.dragging = false;
52 |     },
53 |   },
54 | };
55 | </script>
56 | 
57 | <style scoped>
58 | .split-pane {
59 |   display: flex;
60 |   flex-direction: row;
61 |   height: 80%;
62 | }
63 | 
64 | .split-pane-item,
65 | .split-pane-gutter {
66 |   height: 80%;
67 | }
68 | 
69 | .split-pane-gutter {
70 |   background: #000;
71 |   opacity: 0.2;
72 |   z-index: 1;
73 |   box-sizing: border-box;
74 |   background-clip: padding-box;
75 |   width: 11px;
76 |   margin: 0 -5px;
77 |   border-left: 5px solid rgba(255, 255, 255, 0);
78 |   border-right: 5px solid rgba(255, 255, 255, 0);
79 |   cursor: col-resize;
80 | }
81 | 
82 | .split-pane-gutter:hover,
83 | .split-pane-gutter:focus {
84 |   border-left: 5px solid rgba(0, 0, 0, 0.5);
85 |   border-right: 5px solid rgba(0, 0, 0, 0.5);
86 |   transition: all 2s ease;
87 | }
88 | 
89 | .is-dragging {
90 |   cursor: col-resize;
91 | }
92 | </style>
93 | 


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