├── .npmrc ├── .browserslistrc ├── jsconfig.json ├── src ├── scss │ ├── index.scss │ ├── _variables.scss │ ├── _typography.scss │ └── _base.scss ├── components │ ├── splitpanes │ │ ├── index.js │ │ ├── pane.vue │ │ └── splitpanes.vue │ └── highlight-message.vue ├── views │ ├── example-home-view.vue │ ├── example-another-view.vue │ ├── isolated-test-view.vue │ └── documentation.vue ├── assets │ └── splitpanes.svg ├── main.js ├── router.js └── app.vue ├── postcss.config.js ├── docs ├── favicon.png ├── assets │ ├── _plugin-vue_export-helper-DlAUqK2U.js │ ├── materialdesignicons-webfont-B7mPwVP_.ttf │ ├── materialdesignicons-webfont-CSr8KVlo.eot │ ├── materialdesignicons-webfont-Dp5v-WZN.woff2 │ ├── materialdesignicons-webfont-PXm3-2wK.woff │ ├── example-home-view-D1_8HrmC.js │ ├── example-another-view-BueBJawE.js │ └── isolated-test-view-DcrGDZFU.js └── index.html ├── .github └── FUNDING.yml ├── public └── favicon.png ├── .editorconfig ├── .gitignore ├── eslint.config.js ├── LICENSE ├── index.html ├── vite.config.js ├── package.json └── README.md /.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies=false 2 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 3 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "./src/**/*" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/scss/index.scss: -------------------------------------------------------------------------------- 1 | @forward './base'; 2 | @forward './typography'; 3 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export const plugins = { 2 | autoprefixer: {} 3 | } 4 | -------------------------------------------------------------------------------- /docs/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antoniandre/splitpanes/HEAD/docs/favicon.png -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: antoniandre 4 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antoniandre/splitpanes/HEAD/public/favicon.png -------------------------------------------------------------------------------- /docs/assets/_plugin-vue_export-helper-DlAUqK2U.js: -------------------------------------------------------------------------------- 1 | const s=(t,r)=>{const o=t.__vccOpts||t;for(const[c,e]of r)o[c]=e;return o};export{s as _}; 2 | -------------------------------------------------------------------------------- /src/components/splitpanes/index.js: -------------------------------------------------------------------------------- 1 | import Splitpanes from './splitpanes.vue' 2 | import Pane from './pane.vue' 3 | 4 | export { Splitpanes, Pane } 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /src/views/example-home-view.vue: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /docs/assets/materialdesignicons-webfont-B7mPwVP_.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antoniandre/splitpanes/HEAD/docs/assets/materialdesignicons-webfont-B7mPwVP_.ttf -------------------------------------------------------------------------------- /docs/assets/materialdesignicons-webfont-CSr8KVlo.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antoniandre/splitpanes/HEAD/docs/assets/materialdesignicons-webfont-CSr8KVlo.eot -------------------------------------------------------------------------------- /docs/assets/materialdesignicons-webfont-Dp5v-WZN.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antoniandre/splitpanes/HEAD/docs/assets/materialdesignicons-webfont-Dp5v-WZN.woff2 -------------------------------------------------------------------------------- /docs/assets/materialdesignicons-webfont-PXm3-2wK.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antoniandre/splitpanes/HEAD/docs/assets/materialdesignicons-webfont-PXm3-2wK.woff -------------------------------------------------------------------------------- /src/views/example-another-view.vue: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $primary: #42b983; 2 | $secondary: #78cfa8; 3 | $main-text: #888; 4 | $dark-text: #666; 5 | $darker-text: #333; 6 | $light-text: #ccc; 7 | $lighter-text: #ddd; 8 | // $light-link: #fff; 9 | $page-max-width: 1150px; 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /docs/assets/example-home-view-D1_8HrmC.js: -------------------------------------------------------------------------------- 1 | import{c as t,a as s,o}from"./index-B9XE5B_l.js";import{_ as r}from"./_plugin-vue_export-helper-DlAUqK2U.js";const n={class:"green-light5--bg w-flex align-center justify-center"};function a(i,e){return o(),t("div",n,e[0]||(e[0]=[s("div",{class:"title1"},"This is home",-1)]))}const c={},f=r(c,[["render",a]]);export{f as default}; 2 | -------------------------------------------------------------------------------- /docs/assets/example-another-view-BueBJawE.js: -------------------------------------------------------------------------------- 1 | import{c as t,a as s,o}from"./index-B9XE5B_l.js";import{_ as r}from"./_plugin-vue_export-helper-DlAUqK2U.js";const n={class:"blue-light5--bg w-flex align-center justify-center"};function a(c,e){return o(),t("div",n,e[0]||(e[0]=[s("div",{class:"title1"},"This is another view",-1)]))}const i={},d=r(i,[["render",a]]);export{d as default}; 2 | -------------------------------------------------------------------------------- /src/assets/splitpanes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import router from '@/router' 3 | import WaveUI from 'wave-ui' 4 | import 'wave-ui/dist/wave-ui.css' 5 | import App from './app.vue' 6 | 7 | import '@mdi/font/css/materialdesignicons.min.css' 8 | 9 | const app = createApp(App) 10 | 11 | app.use(router) 12 | app.use(WaveUI, { 13 | colors: { 14 | primary: '#42b983', 15 | maintext: '#999', 16 | darktext: '#444', 17 | lightertext: '#ccc', 18 | lightgrey: '#eee' 19 | } 20 | }) 21 | 22 | app.mount('#app') 23 | -------------------------------------------------------------------------------- /src/views/isolated-test-view.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | 20 | 22 | -------------------------------------------------------------------------------- /docs/assets/isolated-test-view-DcrGDZFU.js: -------------------------------------------------------------------------------- 1 | import{r as _,c as o,b as r,w as n,u as c,_ as f,d as m,F as l,o as s,e as d,f as p,g as z,h as i,t as v}from"./index-B9XE5B_l.js";const k={__name:"isolated-test-view",setup(w){const a=_([{content:"Pane 1 content.",size:30},{content:"Pane 2 content.",size:15},{content:"Pane 3 content.",size:25}]);return(x,e)=>{const u=m("w-button");return s(),o(l,null,[r(c(f),{class:"default-theme",horizontal:"",style:{height:"500px"}},{default:n(()=>[(s(!0),o(l,null,d(a,t=>(s(),p(c(z),{class:"w-flex align-center justify-center",size:t.size},{default:n(()=>[i(v(t.content),1)]),_:2},1032,["size"]))),256))]),_:1}),r(u,{class:"ma3",onClick:e[0]||(e[0]=t=>a.reverse())},{default:n(()=>e[1]||(e[1]=[i("Reverse panes order")])),_:1,__:[1]})],64)}}};export{k as default}; 2 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from 'vue-router' 2 | import Documentation from '@/views/documentation.vue' 3 | 4 | export default createRouter({ 5 | history: createWebHistory(import.meta.env.BASE_URL), 6 | routes: [ 7 | { 8 | path: '/', 9 | component: Documentation, 10 | children: [ 11 | { 12 | path: '/example-home-view', 13 | component: () => import('@/views/example-home-view.vue') 14 | }, 15 | { 16 | path: '/example-another-view', 17 | component: () => import('@/views/example-another-view.vue') 18 | } 19 | ] 20 | }, 21 | { 22 | path: '/test', 23 | component: () => import('@/views/isolated-test-view.vue') 24 | } 25 | ] 26 | }) 27 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import globals from 'globals' 2 | import pluginJs from '@eslint/js' 3 | import pluginVue from 'eslint-plugin-vue' 4 | import importPlugin from 'eslint-plugin-import' 5 | import nPlugin from 'eslint-plugin-n' 6 | import promisePlugin from 'eslint-plugin-promise' 7 | import standard from 'eslint-config-standard' 8 | 9 | export default [ 10 | { files: ['**/*.{js,mjs,cjs,vue}'] }, 11 | { languageOptions: { globals: { ...globals.browser, ...globals.node } } }, 12 | pluginJs.configs.recommended, 13 | { 14 | name: 'standard', 15 | rules: standard.rules, 16 | plugins: { 17 | import: importPlugin, 18 | n: nPlugin, 19 | promise: promisePlugin 20 | } 21 | }, 22 | ...pluginVue.configs['flat/essential'], 23 | { 24 | rules: { 25 | 'brace-style': ['error', 'stroustrup', { allowSingleLine: true }], 26 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 28 | 'vue/multi-word-component-names': 'off' 29 | } 30 | } 31 | ] 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Antoni Andre 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. -------------------------------------------------------------------------------- /src/scss/_typography.scss: -------------------------------------------------------------------------------- 1 | @use './variables' as *; 2 | 3 | body { 4 | font: 15px 'Avenir', Helvetica, Arial, sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | color: rgba(0,0,0,.87); 8 | } 9 | 10 | h1, h2, h3, h4 { 11 | font-weight: 400; 12 | margin-bottom: 0.5em; 13 | } 14 | 15 | h1 { 16 | font-size: 2.6em; 17 | } 18 | 19 | h2 { 20 | font-size: 2.2em; 21 | margin-top: 3em; 22 | color: $primary; 23 | padding-bottom: 0.3em; 24 | border-bottom: 1px solid $lighter-text; 25 | 26 | a {color: inherit;} 27 | } 28 | 29 | h3 { 30 | font-size: 1.6em; 31 | margin-top: 4em; 32 | color: #333; 33 | 34 | a {color: inherit;} 35 | } 36 | 37 | h2 + h3, 38 | h2 + a[id] + h3 { 39 | margin-top: 0; 40 | } 41 | 42 | h3 a[href] { 43 | color: inherit !important; 44 | } 45 | 46 | h3 a[href]:before { 47 | content: "# "; 48 | color: $lighter-text; 49 | font-size: 1.2em; 50 | transition: 0.3s; 51 | } 52 | 53 | h3 a[href]:hover:before { 54 | color: $light-text; 55 | } 56 | 57 | h4 { 58 | margin-top: 2em; 59 | font-size: 1.2em; 60 | color: $dark-text; 61 | } 62 | 63 | a { 64 | text-decoration: none; 65 | } 66 | 67 | p b { 68 | color: $darker-text; 69 | font-weight: 500; 70 | } 71 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Splitpanes 22 | 23 | 24 | 27 | 28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import Vue from '@vitejs/plugin-vue' 3 | import { resolve } from 'path' 4 | import Delete from 'rollup-plugin-delete' 5 | 6 | const bundleBuild = { 7 | lib: { 8 | entry: resolve(__dirname, '/src/components/splitpanes/index.js'), 9 | name: 'splitpanes', 10 | fileName: 'splitpanes', 11 | formats: ['es', 'umd', 'cjs'] 12 | }, 13 | rollupOptions: { 14 | plugins: [ 15 | // Rollup also copies the files in the public folder. 16 | // @todo: find a way to prevent adding them at all. 17 | Delete({ targets: ['dist/*.{ico,png,html}'], hook: 'generateBundle' }) 18 | ], 19 | // Make sure to externalize deps that shouldn't be bundled into library. 20 | external: ['vue'], 21 | output: { 22 | // Provide global variables to use in the UMD build for externalized deps. 23 | globals: { vue: 'Vue' }, 24 | entryFileNames: 'splitpanes.[format].js', 25 | chunkFileNames: '[name].js' 26 | } 27 | } 28 | } 29 | 30 | export default defineConfig({ 31 | plugins: [ 32 | Vue({ 33 | template: { 34 | compilerOptions: { 35 | whitespace: 'preserve' 36 | } 37 | } 38 | }) 39 | ], // https://vitejs.dev/config/ 40 | resolve: { 41 | alias: { 42 | '@': resolve(__dirname, '/src') 43 | } 44 | }, 45 | css: { 46 | preprocessorOptions: { 47 | scss: { 48 | api: 'modern-compiler', 49 | additionalData: '@use "@/scss/_variables.scss" as *;' 50 | } 51 | } 52 | }, 53 | build: process.env.BUNDLE ? bundleBuild : { outDir: 'docs' }, 54 | define: { 55 | __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false 56 | } 57 | }) 58 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Splitpanes 22 | 23 | 24 | 25 | 26 | 29 | 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /src/components/highlight-message.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 27 | 28 | 80 | -------------------------------------------------------------------------------- /src/components/splitpanes/pane.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 64 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "splitpanes", 3 | "version": "4.0.4", 4 | "description": "A Vue.js reliable, simple and touch-ready panes splitter / resizer", 5 | "author": "Antoni Andre ", 6 | "homepage": "https://antoniandre.github.io/splitpanes", 7 | "repository": "https://github.com/antoniandre/splitpanes", 8 | "license": "MIT", 9 | "funding": "https://github.com/sponsors/antoniandre", 10 | "main": "./dist/splitpanes.es.js", 11 | "unpkg": "dist/splitpanes.umd.js", 12 | "jsdelivr": "dist/splitpanes.umd.js", 13 | "module": "./dist/splitpanes.es.js", 14 | "files": [ 15 | "dist", 16 | "src/components/splitpanes" 17 | ], 18 | "exports": { 19 | ".": { 20 | "import": "./dist/splitpanes.es.js", 21 | "require": "./dist/splitpanes.umd.js" 22 | }, 23 | "./package.json": "./package.json", 24 | "./dist/*": "./dist/*" 25 | }, 26 | "type": "module", 27 | "keywords": [ 28 | "splitpanes", 29 | "split panes", 30 | "panes resizer", 31 | "vue", 32 | "vue3", 33 | "vuejs", 34 | "ui" 35 | ], 36 | "scripts": { 37 | "dev": "vite", 38 | "build": "vite build --base /splitpanes/", 39 | "build-bundle": "BUNDLE=true vite build", 40 | "serve": "vite preview --base /splitpanes/", 41 | "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag" 42 | }, 43 | "devDependencies": { 44 | "@eslint/js": "^9.27.0", 45 | "@mdi/font": "^7.4.47", 46 | "@vitejs/plugin-vue": "^5.2.4", 47 | "autoprefixer": "^10.4.21", 48 | "eslint": "^9.27.0", 49 | "eslint-config-standard": "^17.1.0", 50 | "eslint-plugin-import": "^2.31.0", 51 | "eslint-plugin-n": "^17.18.0", 52 | "eslint-plugin-promise": "^7.2.1", 53 | "eslint-plugin-vue": "^9.33.0", 54 | "globals": "^16.1.0", 55 | "postcss": "^8.5.3", 56 | "pug": "^3.0.3", 57 | "rollup-plugin-delete": "^3.0.1", 58 | "sass": "^1.89.0", 59 | "simple-syntax-highlighter": "^3.1.1", 60 | "vite": "^6.3.5", 61 | "vue": "^3.5.14", 62 | "vue-router": "^4.5.1", 63 | "wave-ui": "^3.21.1" 64 | }, 65 | "peerDependencies": { 66 | "vue": "^3.2.0" 67 | }, 68 | "packageManager": "pnpm@10.0.0" 69 | } 70 | -------------------------------------------------------------------------------- /src/app.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 76 | -------------------------------------------------------------------------------- /src/scss/_base.scss: -------------------------------------------------------------------------------- 1 | @use './variables' as *; 2 | 3 | // Global. 4 | // -------------------------------------------------------- 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | body { 11 | padding-top: 7em; 12 | } 13 | 14 | a { 15 | text-decoration: none; 16 | color: $primary; 17 | } 18 | 19 | ul, ol { 20 | margin-top: 1em; 21 | padding-left: 1.3em; 22 | } 23 | 24 | p {margin-bottom: 16px;} 25 | 26 | code, .code:not(.w-icon) { 27 | font-family: monospace, sans-serif; 28 | font-size: 0.9em; 29 | } 30 | 31 | code { 32 | padding: .15em .4em; 33 | background-color: rgba(0,0,0,.05); 34 | color: #dc163c; 35 | border-radius: 4px; 36 | } 37 | 38 | .ssh-pre { 39 | padding: 0.5em; 40 | margin: 1.5em 0; 41 | border: 1px solid $lighter-text; 42 | background-color: #f8f8f8; 43 | border-radius: 4px; 44 | display: block; 45 | box-shadow: none; 46 | font-size: 0.9em; 47 | line-height: 1.4; 48 | } 49 | 50 | .page__title { 51 | color: $primary; 52 | background-color: #fff; 53 | padding: 1.5em; 54 | display: inline-flex; 55 | align-items: center; 56 | } 57 | 58 | .w-button { 59 | text-transform: uppercase; 60 | font-weight: 500; 61 | 62 | &.size--md:not(.w-button--round) { 63 | height: 28px; 64 | padding-left: 12px; 65 | padding-right: 12px; 66 | } 67 | } 68 | 69 | .pale-blue {color: #1471b8;} 70 | 71 | // Application. 72 | // -------------------------------------------------------- 73 | .w-app { 74 | overflow-x: hidden; 75 | } 76 | 77 | .page-container { 78 | flex-grow: 1; 79 | max-width: $page-max-width; 80 | margin-left: auto; 81 | margin-right: auto; 82 | } 83 | 84 | header {margin-bottom: 6em;} 85 | 86 | .w-tag i.w-icon { 87 | position: relative; 88 | color: rgba(0, 0, 0, .25); 89 | margin: 0 7px 0 -7px; 90 | } 91 | 92 | .settings-list { 93 | li {padding: 20px 10px;} 94 | 95 | li li { 96 | padding-top: 0; 97 | padding-bottom: 0; 98 | margin-left: 10px; 99 | margin-top: 10px; 100 | } 101 | 102 | code { 103 | font-size: 0.95em; 104 | display: inline-flex; 105 | margin-bottom: 4px; 106 | } 107 | } 108 | 109 | .w-app .go-top { 110 | width: 1.8em; 111 | height: 1.8em; 112 | font-size: 1.5em; 113 | box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%); 114 | } 115 | 116 | // Footer. 117 | // -------------------------------------------------------- 118 | footer { 119 | background: none; 120 | font-style: italic; 121 | color: $main-text; 122 | font-size: 0.9em; 123 | margin: 5em 0 3.5em; 124 | 125 | i { 126 | font-size: 1.2em; 127 | vertical-align: text-bottom; 128 | transition: 1s ease-out; 129 | cursor: pointer; 130 | 131 | &.heart:hover {animation: pulse 1.8s ease-out infinite;} 132 | } 133 | } 134 | 135 | // Animations. 136 | // -------------------------------------------------------- 137 | @keyframes pulse { 138 | 0%, 20%, 30%, 35%, 45%, 100% {transform: scale(1);} 139 | 25%, 40% {transform: scale(1.3);} 140 | } 141 | 142 | .pulse {animation: pulse 1.5s infinite;} 143 | 144 | // Media queries. 145 | // -------------------------------------------------------- 146 | @media screen and (max-width: ($page-max-width + 20px)) { 147 | .page-container { 148 | margin-left: 10px; 149 | margin-right: 10px; 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Splitpanes 2 | 3 | [![Latest Version on NPM](https://img.shields.io/npm/v/splitpanes.svg)](https://npmjs.com/package/splitpanes) 4 | [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE.md) 5 | [![npm](https://img.shields.io/npm/dt/splitpanes.svg)](https://www.npmjs.com/package/splitpanes) 6 | [![npm](https://img.shields.io/npm/dw/splitpanes.svg)](https://www.npmjs.com/package/splitpanes) 7 | [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) 8 | 9 | > A Vue.js reliable, simple and touch-ready panes splitter / resizer. 10 | > Vue 3 compatible. 11 | 12 | ## Installation 13 | 14 | **Vue 3** 15 | 16 | ``` 17 | npm i splitpanes 18 | ``` 19 | 20 | **Vue 2** 21 | 22 | ``` 23 | npm i splitpanes@legacy 24 | ``` 25 | 26 | --- 27 | 28 | ## Demo & Documentation 29 | > [https://antoniandre.github.io/splitpanes](https://antoniandre.github.io/splitpanes) 30 | 31 | ## Try it yourself 32 | > [https://codepen.io/antoniandre/pen/XybPKP](https://codepen.io/antoniandre/pen/XybPKP) 33 | 34 | --- 35 | 36 | ## Browser Support 37 | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | 38 | --- | --- | --- | --- | --- | --- | 39 | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 10+ ✔ | 40 | 41 | ___ 42 | 43 | ## Donating 44 | 45 | If you like this library, you can buy me a beer or [become a sponsor](https://github.com/sponsors/antoniandre)! 46 | 47 | [![paypal](https://www.paypalobjects.com/en_AU/i/btn/btn_donateCC_LG.gif)](https://www.paypal.me/antoniandre1) 48 | Thank you! 49 | 50 | If you are using this library for profit business, please consider [backing me](https://github.com/sponsors/antoniandre)! 51 | It ensures that the project your products rely on keeps being actively maintained. :) 52 | 53 | ___ 54 | 55 | ## Contributing 56 | 57 | If you have any idea, feel free to open an issue to discuss a new feature, or fork Splitpanes and submit your changes back to me. 58 | 59 | ___ 60 | 61 | ## Release Notes 62 | 63 | - __Version 2.3.0__ Support rtl direction 64 | - __Version 2.2.0__ Add `firstSplitter` option allow `v-if` on panes and other improvements 65 | - __Version 2.0.0__ Fix reactivity issues 66 | - __Version 1.14.0__ Programmatically set pane size 67 | - __Version 1.13.0__ Emit event on splitter click 68 | - __Version 1.12.0__ Double click splitter to maximize is now an option 69 | - __Version 1.11.0__ Persist panes size after slots changed 70 | - __Version 1.10.0__ Add maximum size feature on panes 71 | - __Version 1.9.0__ Emit event on resize & watch slots optional 72 | - __Version 1.8.0__ Watch slots 73 | - __Version 1.7.0__ Double click splitter to maximize next pane 74 | - __Version 1.6.0__ Emit events 75 | - __Version 1.5.0__ Add default size feature on panes (max feature coming soon!) 76 | - __Version 1.4.0__ Add minimum size feature on panes 77 | - __Version 1.3.0__ Splitpanes slots are now reactive (add/remove on the fly) 78 | - __Version 1.2.0__ Add a `default-theme` CSS class to load default theme 79 | - __Version 1.1.0__ Allow pushing other panes while dragging splitter 80 | - __Version 1.0.0__ First public release 81 | -------------------------------------------------------------------------------- /src/components/splitpanes/splitpanes.vue: -------------------------------------------------------------------------------- 1 | 686 | 687 | 690 | 691 | 774 | -------------------------------------------------------------------------------- /src/views/documentation.vue: -------------------------------------------------------------------------------- 1 | 1161 | 1162 | 1207 | 1208 | 1365 | --------------------------------------------------------------------------------