Vue Resizer

├── dist ├── favicon.ico ├── favicon.psd ├── index.html └── assets │ ├── vendor.51e61c9b.css │ ├── index.22969eb3.css │ └── index.96c342ee.js ├── public ├── favicon.ico └── favicon.psd ├── src ├── main.js ├── components │ ├── index.js │ ├── package.json │ ├── README.md │ ├── ResizeCol.vue │ ├── ResizeRow.vue │ ├── DragCol.vue │ ├── DragRow.vue │ └── Resize.vue └── App.vue ├── vite.config.js ├── .gitignore ├── index.html ├── package.json ├── LICENSE └── README.md /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justcaliturner/vue-resizer/HEAD/dist/favicon.ico -------------------------------------------------------------------------------- /dist/favicon.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justcaliturner/vue-resizer/HEAD/dist/favicon.psd -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justcaliturner/vue-resizer/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justcaliturner/vue-resizer/HEAD/public/favicon.psd -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()] 7 | }) 8 | -------------------------------------------------------------------------------- /.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 | pnpm-debug.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import DragCol from "./DragCol.vue"; 2 | import DragRow from "./DragRow.vue"; 3 | import ResizeCol from "./ResizeCol.vue"; 4 | import ResizeRow from "./ResizeRow.vue"; 5 | import Resize from "./Resize.vue"; 6 | export { 7 | DragCol, 8 | DragRow, 9 | ResizeCol, 10 | ResizeRow, 11 | Resize 12 | } 13 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Resizer 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-resizer", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "simple-code-editor": "^1.2.2", 12 | "vue": "^3.2.25" 13 | }, 14 | "devDependencies": { 15 | "@vitejs/plugin-vue": "^2.2.0", 16 | "vite": "^2.8.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Resizer 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-resizer", 3 | "version": "1.2.0", 4 | "description": "A series of the resizer components for Vue.js", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+git@github.com:justcaliturner/vue-resizer.git" 12 | }, 13 | "keywords": [ 14 | "vue-resizer", 15 | "resizers", 16 | "resizer", 17 | "resize", 18 | "slider", 19 | "drag", 20 | "dragging", 21 | "vue" 22 | ], 23 | "author": "Vic", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/justcaliturner/vue-resizer/issues" 27 | }, 28 | "homepage": "https://vue-resizer.vicless.com" 29 | } 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Vic 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-resizer 2 | A series of the resizer components for Vue.js 3 | 4 | ### [For all the usages please check the website](https://vue-resizer.vicless.com/) 5 | 6 |
7 | 8 | Install with NPM 9 | 10 | ``` 11 | npm install vue-resizer 12 | ``` 13 | 14 | Import 15 | 16 | ```js 17 | import { 18 | DragCol, 19 | DragRow, 20 | ResizeCol, 21 | ResizeRow, 22 | Resize, 23 | } from "vue-resizer" 24 | ``` 25 | Usage 26 | 27 | ```html 28 | 29 | 32 | 35 | 36 | ``` 37 | 38 | Props 39 | ```js 40 | props: { 41 | // width percentage of the left part 42 | // units: % 43 | leftPercent: { 44 | type: Number, 45 | default: 50, 46 | }, 47 | // width of the slider 48 | // units: px 49 | sliderWidth: { 50 | type: Number, 51 | default: 20, 52 | }, 53 | // width of the container 54 | // units: any 55 | width: { 56 | type: String, 57 | default: "400px", 58 | }, 59 | // height of the container 60 | // units: any 61 | height: { 62 | type: String, 63 | default: "400px", 64 | }, 65 | // color of the slider 66 | sliderColor: { 67 | type: String, 68 | default: "#6f808d", 69 | }, 70 | // bg color of the slider 71 | sliderBgColor: { 72 | type: String, 73 | default: "#1f2e3a", 74 | }, 75 | // color of the slider on hover 76 | sliderHoverColor: { 77 | type: String, 78 | default: "#6f808d", 79 | }, 80 | // bg color of the slider on hover 81 | sliderBgHoverColor: { 82 | type: String, 83 | default: "#16222a", 84 | } 85 | } 86 | ``` 87 | 88 | ### [Go to the document](https://vue-resizer.vicless.com/) -------------------------------------------------------------------------------- /src/components/README.md: -------------------------------------------------------------------------------- 1 | # vue-resizer 2 | A series of the resizer components for Vue.js 3 | 4 | ### [For all the usages please check the website](https://vue-resizer.vicless.com/) 5 | 6 |
7 | 8 | Install with NPM 9 | 10 | ``` 11 | npm install vue-resizer 12 | ``` 13 | 14 | Import 15 | 16 | ```js 17 | import { 18 | DragCol, 19 | DragRow, 20 | ResizeCol, 21 | ResizeRow, 22 | Resize, 23 | } from "vue-resizer" 24 | ``` 25 | Usage 26 | 27 | ```html 28 | 29 | 32 | 35 | 36 | ``` 37 | 38 | Props 39 | ```js 40 | props: { 41 | // width percentage of the left part 42 | // units: % 43 | leftPercent: { 44 | type: Number, 45 | default: 50, 46 | }, 47 | // width of the slider 48 | // units: px 49 | sliderWidth: { 50 | type: Number, 51 | default: 20, 52 | }, 53 | // width of the container 54 | // units: any 55 | width: { 56 | type: String, 57 | default: "400px", 58 | }, 59 | // height of the container 60 | // units: any 61 | height: { 62 | type: String, 63 | default: "400px", 64 | }, 65 | // color of the slider 66 | sliderColor: { 67 | type: String, 68 | default: "#6f808d", 69 | }, 70 | // bg color of the slider 71 | sliderBgColor: { 72 | type: String, 73 | default: "#1f2e3a", 74 | }, 75 | // color of the slider on hover 76 | sliderHoverColor: { 77 | type: String, 78 | default: "#6f808d", 79 | }, 80 | // bg color of the slider on hover 81 | sliderBgHoverColor: { 82 | type: String, 83 | default: "#16222a", 84 | } 85 | } 86 | ``` 87 | 88 | ### [Go to the document](https://vue-resizer.vicless.com/) -------------------------------------------------------------------------------- /src/components/ResizeCol.vue: -------------------------------------------------------------------------------- 1 | 16 | 129 | -------------------------------------------------------------------------------- /src/components/ResizeRow.vue: -------------------------------------------------------------------------------- 1 | 22 | 139 | -------------------------------------------------------------------------------- /src/components/DragCol.vue: -------------------------------------------------------------------------------- 1 | 29 | 156 | -------------------------------------------------------------------------------- /dist/assets/vendor.51e61c9b.css: -------------------------------------------------------------------------------- 1 | .fade-enter-active[data-v-3e4a43ce],.fade-leave-active[data-v-3e4a43ce]{transition:transform .2s ease,opacity .2s ease}.fade-enter-from[data-v-3e4a43ce],.fade-leave-to[data-v-3e4a43ce]{opacity:0;transform:translateY(-10px)}.dropdown[data-v-3e4a43ce]{cursor:pointer;position:relative}.dropdown[data-v-3e4a43ce]:focus{outline:none}.disabled[data-v-3e4a43ce]{cursor:default}.disabled:hover>.mark[data-v-3e4a43ce]{opacity:.5!important}.dropdown:hover>.mark[data-v-3e4a43ce]{opacity:1}.dropdown>.mark[data-v-3e4a43ce]{transition:opacity .2s ease;opacity:.5;display:flex;align-items:center;user-select:none}.dropdown>.mark>div[data-v-3e4a43ce]{white-space:nowrap;font-family:sans-serif;font-size:12px;line-height:16px}.dropdown>.mark>svg[data-v-3e4a43ce]{margin-left:3px;margin-top:1px}.dropdown>.panel[data-v-3e4a43ce]{position:absolute;border-radius:6px;overflow:hidden;top:24px;left:0;box-sizing:border-box;box-shadow:0 2px 12px #00000026}.copy_code[data-v-06678ec1]{transition:.2s opacity ease;position:relative;opacity:.5;width:20px;height:20px;cursor:pointer}.copy_code[data-v-06678ec1]:focus{outline:none}.copy_code>textarea[data-v-06678ec1]{user-select:none;position:absolute;padding:0;width:0;height:0;background:transparent;resize:none;opacity:0;border-color:#0000}.copy_code>svg[data-v-06678ec1]{pointer-events:none}.copy_code[data-v-06678ec1]:hover{opacity:1}.copy_code:hover>.tooltip[data-v-06678ec1]{display:block}.copy_code>.tooltip[data-v-06678ec1]{font-family:sans-serif;display:none;position:absolute;bottom:-10px;left:-96px;font-size:12px;color:#fff;width:84px;height:30px;line-height:30px;background:rgba(0,0,0,.8);box-sizing:border-box;text-align:center;border-radius:4px}.header[data-v-89dc3e88]{position:relative;z-index:2;height:34px;box-sizing:border-box}.header>.dropdown[data-v-89dc3e88]{position:absolute;top:12px;left:18px}.header>.copy_code[data-v-89dc3e88]{position:absolute;top:10px;right:12px}.code_editor[data-v-89dc3e88]{display:flex;flex-direction:column;font-size:0;position:relative;text-align:left}.code_editor>.code_area[data-v-89dc3e88]{position:relative;overflow:hidden}.code_editor>.code_area>textarea[data-v-89dc3e88],.code_editor>.code_area>pre>code[data-v-89dc3e88]{padding:0 20px 20px;font-family:Consolas,Monaco,monospace;line-height:1.5;font-size:16px}.code_editor>.code_area>textarea[data-v-89dc3e88]{overflow-y:hidden;box-sizing:border-box;caret-color:#7f7f7f;-webkit-text-fill-color:transparent;white-space:pre;word-wrap:normal;border:0;position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background:none;resize:none}.code_editor>.code_area>textarea[data-v-89dc3e88]:hover,.code_editor>.code_area>textarea[data-v-89dc3e88]:focus-visible{outline:none}.code_editor>.code_area>pre[data-v-89dc3e88]{position:relative;margin:0}.code_editor>.code_area>pre>code[data-v-89dc3e88]{position:relative;overflow-x:visible;border-radius:0;box-sizing:border-box;display:block;border:none;margin:0}.hide_header>.code_area>textarea[data-v-89dc3e88],.hide_header>.code_area>pre>code[data-v-89dc3e88]{padding:20px}.hide_header.scroll>.code_area[data-v-89dc3e88]{height:100%}.read_only>.code_area>pre>code[data-v-89dc3e88]{width:100%;height:100%;overflow:auto!important}.wrap_code>.code_area>textarea[data-v-89dc3e88],.wrap_code>.code_area>pre>code[data-v-89dc3e88]{white-space:pre-wrap;word-wrap:break-word}.scroll>.code_area[data-v-89dc3e88]{height:calc(100% - 34px)}.scroll>.code_area>textarea[data-v-89dc3e88]{overflow:auto}.scroll>.code_area>pre[data-v-89dc3e88]{width:100%;height:100%;overflow:hidden}.panel[data-v-89dc3e88]{user-select:none;height:100%;font-family:sans-serif}.panel>.lang_list[data-v-89dc3e88]{overflow:auto;height:calc(100% - 36px);font-size:13px;box-sizing:border-box;padding:0;list-style:none;margin:0;text-align:left;background:white}.panel>.lang_list>li[data-v-89dc3e88]{font-size:13px;color:#333;transition:background .16s ease,color .16s ease;box-sizing:border-box;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:30px}.panel>.lang_list>li[data-v-89dc3e88]:first-child{padding-top:5px}.panel>.lang_list>li[data-v-89dc3e88]:last-child{padding-bottom:5px}.panel>.lang_list>li[data-v-89dc3e88]:hover{color:#111;background:#eee}.atom_one_dark.hljs,.atom_one_dark .hljs{color:#abb2bf;background:#282c34}.atom_one_dark .hljs-comment,.atom_one_dark .hljs-quote{color:#5c6370;font-style:italic}.atom_one_dark .hljs-doctag,.atom_one_dark .hljs-keyword,.atom_one_dark .hljs-formula{color:#c678dd}.atom_one_dark .hljs-section,.atom_one_dark .hljs-name,.atom_one_dark .hljs-selector-tag,.atom_one_dark .hljs-deletion,.atom_one_dark .hljs-subst{color:#e06c75}.atom_one_dark .hljs-literal{color:#56b6c2}.atom_one_dark .hljs-string,.atom_one_dark .hljs-regexp,.atom_one_dark .hljs-addition,.atom_one_dark .hljs-attribute,.atom_one_dark .hljs-meta .hljs-string{color:#98c379}.atom_one_dark .hljs-attr,.atom_one_dark .hljs-variable,.atom_one_dark .hljs-template-variable,.atom_one_dark .hljs-type,.atom_one_dark .hljs-selector-class,.atom_one_dark .hljs-selector-attr,.atom_one_dark .hljs-selector-pseudo,.atom_one_dark .hljs-number{color:#d19a66}.atom_one_dark .hljs-symbol,.atom_one_dark .hljs-bullet,.atom_one_dark .hljs-link,.atom_one_dark .hljs-meta,.atom_one_dark .hljs-selector-id,.atom_one_dark .hljs-title{color:#61aeee}.atom_one_dark .hljs-built_in,.atom_one_dark .hljs-title .class_,.atom_one_dark .hljs-class .hljs-title{color:#e6c07b}.atom_one_dark .hljs-emphasis{font-style:italic}.atom_one_dark .hljs-strong{font-weight:700}.atom_one_dark .hljs-link{text-decoration:underline}.atom_one_light.hljs,.atom_one_light .hljs{color:#383a42;background:#fafafa}.atom_one_light .hljs-comment,.atom_one_light .hljs-quote{color:#a0a1a7;font-style:italic}.atom_one_light .hljs-doctag,.atom_one_light .hljs-keyword,.atom_one_light .hljs-formula{color:#a626a4}.atom_one_light .hljs-section,.atom_one_light .hljs-name,.atom_one_light .hljs-selector-tag,.atom_one_light .hljs-deletion,.atom_one_light .hljs-subst{color:#e45649}.atom_one_light .hljs-literal{color:#0184bb}.atom_one_light .hljs-string,.atom_one_light .hljs-regexp,.atom_one_light .hljs-addition,.atom_one_light .hljs-attribute,.atom_one_light .hljs-meta .hljs-string{color:#50a14f}.atom_one_light .hljs-attr,.atom_one_light .hljs-variable,.atom_one_light .hljs-template-variable,.atom_one_light .hljs-type,.atom_one_light .hljs-selector-class,.atom_one_light .hljs-selector-attr,.atom_one_light .hljs-selector-pseudo,.atom_one_light .hljs-number{color:#986801}.atom_one_light .hljs-symbol,.atom_one_light .hljs-bullet,.atom_one_light .hljs-link,.atom_one_light .hljs-meta,.atom_one_light .hljs-selector-id,.atom_one_light .hljs-title{color:#4078f2}.atom_one_light .hljs-built_in,.atom_one_light .hljs-title .class_,.atom_one_light .hljs-class .hljs-title{color:#c18401}.atom_one_light .hljs-emphasis{font-style:italic}.atom_one_light .hljs-strong{font-weight:700}.atom_one_light .hljs-link{text-decoration:underline} 2 | -------------------------------------------------------------------------------- /src/components/DragRow.vue: -------------------------------------------------------------------------------- 1 | 29 | 159 | -------------------------------------------------------------------------------- /dist/assets/index.22969eb3.css: -------------------------------------------------------------------------------- 1 | .drager_col{overflow:hidden;display:flex;box-sizing:border-box}.drager_col *{box-sizing:border-box}.drager_col>div{height:100%}.drager_left{padding-right:10px}.drager_left>div{height:100%;overflow:hidden}.drager_right{padding-left:10px}.drager_right>div{height:100%;overflow:hidden}.drager_col>.slider_col{transition:background .2s;position:relative;z-index:1;cursor:col-resize;background:var(--0203b1b2)}.drager_col>.slider_col:before{transition:background-color .2s;position:absolute;top:50%;left:31%;transform:translateY(-50%);content:"";display:block;width:1px;height:24%;min-height:30px;max-height:70px;background-color:var(--1afa9ff7)}.drager_col>.slider_col:after{transition:background-color .2s;position:absolute;top:50%;right:31%;transform:translateY(-50%);content:"";display:block;width:1px;height:24%;min-height:30px;max-height:70px;background-color:var(--1afa9ff7)}.drager_col>.slider_col:hover:before,.drager_col>.slider_col:hover:after,.drager_col>.slider_col:active:before,.drager_col>.slider_col:active:after{background-color:var(--706ea773)}.drager_col>.slider_col:hover,.drager_col>.slider_col:active{background:var(--6efb1ad0)}.drager_row{overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.drager_row *{box-sizing:border-box}.drager_row>div{width:100%}.drager_top{padding-bottom:10px}.drager_top>div{height:100%;overflow:hidden}.drager_bottom{padding-top:10px}.drager_bottom>div{height:100%;overflow:hidden}.drager_row>.slider_row{transition:background .2s;position:relative;z-index:1;cursor:row-resize;background:var(--0dfab1de)}.drager_row>.slider_row:before{transition:background-color .2s;position:absolute;left:50%;top:31%;transform:translate(-50%);content:"";display:block;height:1px;width:24%;min-width:30px;max-width:70px;background-color:var(--526889ba)}.drager_row>.slider_row:after{transition:background-color .2s;position:absolute;left:50%;bottom:31%;transform:translate(-50%);content:"";display:block;height:1px;width:24%;min-width:30px;max-width:70px;background-color:var(--526889ba)}.drager_row>.slider_row:hover:before,.drager_row>.slider_row:hover:after,.drager_row>.slider_row:active:before,.drager_row>.slider_row:active:after{background-color:var(--65a8b072)}.drager_row>.slider_row:hover,.drager_row>.slider_row:active{background:var(--2bfea428)}.resize_col{position:relative;overflow:hidden;box-sizing:border-box;padding-right:20px}.resize_col *{box-sizing:border-box}.resize_col_body{width:100%;height:100%}.resize_col>.slider_col{transition:background .2s;position:absolute;right:0;top:0;z-index:1;cursor:col-resize;height:100%;background:var(--0e8e0ce6)}.resize_col>.slider_col:before{transition:background-color .2s;position:absolute;top:50%;left:31%;transform:translateY(-50%);content:"";display:block;width:1px;height:24%;min-height:30px;max-height:70px;background-color:var(--72f3badc)}.resize_col>.slider_col:after{transition:background-color .2s;position:absolute;top:50%;right:31%;transform:translateY(-50%);content:"";display:block;width:1px;height:24%;min-height:30px;max-height:70px;background-color:var(--72f3badc)}.resize_col>.slider_col:hover:before,.resize_col>.slider_col:hover:after,.resize_col>.slider_col:active:before,.resize_col>.slider_col:active:after{background-color:var(--22438db8)}.resize_col>.slider_col:hover,.resize_col>.slider_col:active{background:var(--58b6db9d)}.resize_row{overflow:hidden;box-sizing:border-box;padding-bottom:20px;position:relative}.resize_row *{box-sizing:border-box}.resize_row_body{width:100%;height:100%}.resize_row>.slider_row{transition:background .2s;position:absolute;bottom:0;left:0;width:100%;z-index:1;cursor:row-resize;background:var(--9dd5c64e)}.resize_row>.slider_row:before{transition:background-color .2s;position:absolute;left:50%;top:31%;transform:translate(-50%);content:"";display:block;height:1px;width:24%;min-width:30px;max-width:70px;background-color:var(--742aae44)}.resize_row>.slider_row:after{transition:background-color .2s;position:absolute;left:50%;bottom:31%;transform:translate(-50%);content:"";display:block;height:1px;width:24%;min-width:30px;max-width:70px;background-color:var(--742aae44)}.resize_row>.slider_row:hover:before,.resize_row>.slider_row:hover:after,.resize_row>.slider_row:active:before,.resize_row>.slider_row:active:after{background-color:var(--4c7316ec)}.resize_row>.slider_row:hover,.resize_row>.slider_row:active{background:var(--95ae305e)}.resize{position:relative;overflow:hidden;box-sizing:border-box;padding:0 20px 20px 0}.resize *{box-sizing:border-box}.resize_body{width:100%;height:100%}.resize>.slider_row{transition:background .2s;position:absolute;bottom:0;left:0;width:100%;z-index:1;cursor:row-resize;background:var(--54a7f13e)}.resize>.slider_col{transition:background .2s;position:absolute;right:0;top:0;z-index:1;cursor:col-resize;height:100%;background:var(--54a7f13e)}.resize>.slider_col:before{transition:background-color .2s;position:absolute;top:50%;left:31%;transform:translateY(-50%);content:"";display:block;width:1px;height:24%;min-height:30px;max-height:70px;background-color:var(--96fd5afa)}.resize>.slider_col:after{transition:background-color .2s;position:absolute;top:50%;right:31%;transform:translateY(-50%);content:"";display:block;width:1px;height:24%;min-height:30px;max-height:70px;background-color:var(--96fd5afa)}.resize>.slider_col:hover:before,.resize>.slider_col:hover:after,.resize>.slider_col:active:before,.resize>.slider_col:active:after{background-color:var(--efa4a732)}.resize>.slider_col:hover,.resize>.slider_col:active{background:var(--26d7eae8)}.resize>.slider_row:before{transition:background-color .2s;position:absolute;left:50%;top:31%;transform:translate(-50%);content:"";display:block;height:1px;width:24%;min-width:30px;max-width:70px;background-color:var(--96fd5afa)}.resize>.slider_row:after{transition:background-color .2s;position:absolute;left:50%;bottom:31%;transform:translate(-50%);content:"";display:block;height:1px;width:24%;min-width:30px;max-width:70px;background-color:var(--96fd5afa)}.resize>.slider_row:hover:before,.resize>.slider_row:hover:after,.resize>.slider_row:active:before,.resize>.slider_row:active:after{background-color:var(--efa4a732)}.resize>.slider_row:hover,.resize>.slider_row:active{background:var(--26d7eae8)}body{margin-top:40px;font-family:sans-serif;background:#04111b}h1{font-size:40px;text-align:center;color:#fff}h2{margin-top:80px;font-size:30px;text-align:center;color:#fff}h3{margin-top:80px;font-size:20px;text-align:center;color:#fff}p{text-align:center;color:#9db0c2;margin-bottom:40px}.link{transition:color .2s;color:#6a8299;text-align:center;display:block;text-decoration:none;margin:30px 0}.link>span{transition:margin-right .2s;margin-right:6px;vertical-align:top;display:inline-block;line-height:20px}.link>svg{vertical-align:top}.link:hover{color:#c1d0df}.link:hover>span{margin-right:10px}.container{box-sizing:border-box;padding:20px 20px 100px;max-width:400px;width:100%;margin:0 auto}.drager_col,.drager_row,.resize_col,.resize_row,.resize{border-radius:12px}.resize *{border-radius:0}.example_1 .drager_left,.example_1 .drager_right{overflow:hidden;position:relative}.example_1 .drager_left>div{height:auto;font-size:24px;font-weight:700;color:#648192;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.example_1 .drager_right>div{height:auto;font-size:24px;font-weight:700;color:#89a0af;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.drager_left{background:#2d4252}.drager_right{background:#4d6170}.drager_top{background:#2d4252}.drager_bottom{background:#4d6170}.example_2 .drager_top,.example_2 .drager_bottom{overflow:hidden;position:relative}.example_2 .drager_top>div{height:auto;font-size:24px;font-weight:700;color:#648192;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.example_2 .drager_bottom>div{height:auto;font-size:24px;font-weight:700;color:#89a0af;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.resize_col{background:#4d6170}.example_3 .resize_col{overflow:hidden}.example_3 .resize_col_body{height:auto;width:auto;font-size:24px;font-weight:700;color:#89a0af;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.resize_row{background:#4d6170}.example_4 .resize_row{overflow:hidden}.example_4 .resize_row_body{height:auto;width:auto;font-size:24px;font-weight:700;color:#89a0af;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.resize{background:#4d6170}.example_5 .resize{overflow:hidden}.example_5 .resize_body{height:auto;width:160px;font-size:20px;font-weight:700;color:#89a0af;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} 2 | -------------------------------------------------------------------------------- /src/components/Resize.vue: -------------------------------------------------------------------------------- 1 | 30 | 218 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 288 | 289 | 683 | 684 | 879 | -------------------------------------------------------------------------------- /dist/assets/index.96c342ee.js: -------------------------------------------------------------------------------- 1 | import{_ as v,u as C,o as D,c as y,a as l,r as w,n as h,C as V,b as _,d as u,w as c,F as L,e as X,f,t as m,g as F}from"./vendor.71e97c65.js";const M=function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))a(i);new MutationObserver(i=>{for(const t of i)if(t.type==="childList")for(const o of t.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&a(o)}).observe(document,{childList:!0,subtree:!0});function s(i){const t={};return i.integrity&&(t.integrity=i.integrity),i.referrerpolicy&&(t.referrerPolicy=i.referrerpolicy),i.crossorigin==="use-credentials"?t.credentials="include":i.crossorigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function a(i){if(i.ep)return;i.ep=!0;const t=s(i);fetch(i.href,t)}};M();const b={name:"DragCol",props:{leftPercent:{type:Number,default:50},sliderWidth:{type:Number,default:20},width:{type:String,default:"400px"},height:{type:String,default:"400px"},sliderColor:{type:String,default:"#6f808d"},sliderBgColor:{type:String,default:"#1f2e3a"},sliderHoverColor:{type:String,default:"#6f808d"},sliderBgHoverColor:{type:String,default:"#16222a"}},data(){return{left:this.leftPercent,isDragging:!1}},methods:{mobileDragCol(e){e=e||window.event,e.stopPropagation();let n=e.changedTouches[0].clientX,s=this.left,a=0,i=0;const t=this.$refs.container.offsetWidth,o=this;this.isDragging=!0,this.$emit("isDragging",this.isDragging),document.ontouchmove=d,document.ontouchend=r;function d(g){if(this.time&&Date.now()-this.time<40)return;this.time=Date.now(),g=g||window.event,g.stopPropagation(),a=g.changedTouches[0].clientX;const p=parseFloat(((n-a)/t*100).toFixed(3));i=s-p,i<=0?o.left=0:i>=100?o.left=100:o.left=i,o.$emit("dragging",o.left)}function r(){o.isDragging=!1,o.$emit("isDragging",o.isDragging),document.ontouchmove=null,document.ontouchend=null}},dragCol(e){e=e||window.event,e.preventDefault(),e.stopPropagation();let n=e.clientX,s=this.left,a=0,i=0;const t=this.$refs.container.offsetWidth,o=this;this.isDragging=!0,this.$emit("isDragging",this.isDragging),document.onmousemove=d,document.onmouseup=r;function d(g){if(this.time&&Date.now()-this.time<40)return;this.time=Date.now(),g=g||window.event,g.preventDefault(),g.stopPropagation(),a=g.clientX;const p=parseFloat(((n-a)/t*100).toFixed(3));i=s-p,i<=0?o.left=0:i>=100?o.left=100:o.left=i,o.$emit("dragging",o.left)}function r(){o.isDragging=!1,o.$emit("isDragging",o.isDragging),document.onmouseup=null,document.onmousemove=null}}}},H=()=>{C(e=>({"0203b1b2":e.sliderBgColor,"1afa9ff7":e.sliderColor,"706ea773":e.sliderHoverColor,"6efb1ad0":e.sliderBgHoverColor}))},W=b.setup;b.setup=W?(e,n)=>(H(),W(e,n)):H;const E=b;function J(e,n,s,a,i,t){return D(),y("div",{class:"drager_col",ref:"container",style:h({width:s.width,height:s.height})},[l("div",{class:"drager_left",style:h({width:i.left+"%"})},[l("div",null,[w(e.$slots,"left")])],4),l("div",{class:"slider_col",onTouchstartPassive:n[0]||(n[0]=(...o)=>t.mobileDragCol&&t.mobileDragCol(...o)),onMousedown:n[1]||(n[1]=(...o)=>t.dragCol&&t.dragCol(...o)),style:h({width:s.sliderWidth+"px",marginLeft:-s.sliderWidth/2+"px",marginRight:-s.sliderWidth/2+"px"})},null,36),l("div",{class:"drager_right",style:h({width:100-i.left+"%"})},[l("div",null,[w(e.$slots,"right")])],4)],4)}var A=v(E,[["render",J]]);const R={name:"DragRow",props:{topPercent:{type:Number,default:50},sliderWidth:{type:Number,default:20},width:{type:String,default:"400px"},height:{type:String,default:"400px"},sliderColor:{type:String,default:"#6f808d"},sliderBgColor:{type:String,default:"#1f2e3a"},sliderHoverColor:{type:String,default:"#6f808d"},sliderBgHoverColor:{type:String,default:"#16222a"}},data(){return{top:this.topPercent,isDragging:!1}},methods:{mobileDragRow(e){document.body.style.overflow="hidden",document.body.style.overscrollBehaviorY="contain",e=e||window.event,e.stopPropagation();let n=e.changedTouches[0].clientY,s=this.top,a=0,i=0;const t=this.$refs.container.offsetHeight,o=this;this.isDragging=!0,this.$emit("isDragging",this.isDragging),document.ontouchmove=d,document.ontouchend=r;function d(g){if(this.time&&Date.now()-this.time<40)return;this.time=Date.now(),g=g||window.event,g.stopPropagation(),a=g.changedTouches[0].clientY;const p=parseFloat(((n-a)/t*100).toFixed(3));i=s-p,i<=0?o.top=0:i>=100?o.top=100:o.top=i,o.$emit("dragging",o.top)}function r(){o.isDragging=!1,o.$emit("isDragging",o.isDragging),document.body.style.overflow="",document.body.style.overscrollBehaviorY="",document.ontouchmove=null,document.ontouchend=null}},dragRow(e){e=e||window.event,e.preventDefault(),e.stopPropagation();let n=e.clientY,s=this.top,a=0,i=0;const t=this.$refs.container.offsetHeight,o=this;this.isDragging=!0,this.$emit("isDragging",this.isDragging),document.onmousemove=d,document.onmouseup=r;function d(g){if(this.time&&Date.now()-this.time<40)return;this.time=Date.now(),g=g||window.event,g.stopPropagation(),a=g.clientY;const p=parseFloat(((n-a)/t*100).toFixed(3));i=s-p,i<=0?o.top=0:i>=100?o.top=100:o.top=i,o.$emit("dragging",o.top)}function r(){o.isDragging=!1,o.$emit("isDragging",o.isDragging),document.onmouseup=null,document.onmousemove=null}}}},B=()=>{C(e=>({"0dfab1de":e.sliderBgColor,"526889ba":e.sliderColor,"65a8b072":e.sliderHoverColor,"2bfea428":e.sliderBgHoverColor}))},N=R.setup;R.setup=N?(e,n)=>(B(),N(e,n)):B;const O=R;function G(e,n,s,a,i,t){return D(),y("div",{class:"drager_row",ref:"container",style:h({width:s.width,height:s.height})},[l("div",{class:"drager_top",style:h({height:i.top+"%"})},[l("div",null,[w(e.$slots,"top")])],4),l("div",{class:"slider_row",onTouchstartPassive:n[0]||(n[0]=(...o)=>t.mobileDragRow&&t.mobileDragRow(...o)),onMousedown:n[1]||(n[1]=(...o)=>t.dragRow&&t.dragRow(...o)),style:h({height:s.sliderWidth+"px",marginTop:-s.sliderWidth/2+"px",marginBottom:-s.sliderWidth/2+"px"})},null,36),l("div",{class:"drager_bottom",style:h({height:100-i.top+"%"})},[l("div",null,[w(e.$slots,"bottom")])],4)],4)}var Z=v(O,[["render",G]]);const x={name:"ResizeCol",props:{sliderWidth:{type:Number,default:20},width:{type:Number,default:400},height:{type:String,default:"400px"},sliderColor:{type:String,default:"#6f808d"},sliderBgColor:{type:String,default:"#1f2e3a"},sliderHoverColor:{type:String,default:"#6f808d"},sliderBgHoverColor:{type:String,default:"#16222a"}},data(){return{reWidth:this.width,isDragging:!1}},methods:{mobileResizeCol(e){e=e||window.event,e.stopPropagation();let n=e.changedTouches[0].clientX,s=this.reWidth,a=0,i=0;const t=this;this.isDragging=!0,this.$emit("isDragging",this.isDragging),document.ontouchmove=o,document.ontouchend=d;function o(r){if(this.time&&Date.now()-this.time<40)return;this.time=Date.now(),r=r||window.event,r.stopPropagation(),a=r.changedTouches[0].clientX;const g=n-a;i=parseInt(s-g),i<=20?t.reWidth=20:t.reWidth=i,t.$emit("dragging",t.reWidth)}function d(){t.isDragging=!1,t.$emit("isDragging",t.isDragging),document.ontouchmove=null,document.ontouchend=null}},resizeCol(e){e=e||window.event,e.preventDefault(),e.stopPropagation();let n=e.clientX,s=this.reWidth,a=0,i=0;const t=this;this.isDragging=!0,this.$emit("isDragging",this.isDragging),document.onmousemove=o,document.onmouseup=d;function o(r){if(this.time&&Date.now()-this.time<40)return;this.time=Date.now(),r=r||window.event,r.preventDefault(),r.stopPropagation(),a=r.clientX;const g=n-a;i=parseInt(s-g),i<=20?t.reWidth=20:t.reWidth=i,t.$emit("dragging",t.reWidth)}function d(){t.isDragging=!1,t.$emit("isDragging",t.isDragging),document.onmouseup=null,document.onmousemove=null}}}},I=()=>{C(e=>({"0e8e0ce6":e.sliderBgColor,"72f3badc":e.sliderColor,"22438db8":e.sliderHoverColor,"58b6db9d":e.sliderBgHoverColor}))},k=x.setup;x.setup=k?(e,n)=>(I(),k(e,n)):I;const q=x,K={class:"resize_col_body"};function U(e,n,s,a,i,t){return D(),y("div",{class:"resize_col",style:h({width:i.reWidth+"px",height:s.height})},[l("div",K,[w(e.$slots,"default")]),l("div",{class:"slider_col",onTouchstartPassive:n[0]||(n[0]=(...o)=>t.mobileResizeCol&&t.mobileResizeCol(...o)),onMousedown:n[1]||(n[1]=(...o)=>t.resizeCol&&t.resizeCol(...o)),style:h({width:s.sliderWidth+"px"})},null,36)],4)}var Q=v(q,[["render",U]]);const z={name:"ResizeRow",props:{sliderWidth:{type:Number,default:20},height:{type:Number,default:400},width:{type:String,default:"400px"},sliderColor:{type:String,default:"#6f808d"},sliderBgColor:{type:String,default:"#1f2e3a"},sliderHoverColor:{type:String,default:"#6f808d"},sliderBgHoverColor:{type:String,default:"#16222a"}},data(){return{reHeight:this.height,isDragging:!1}},methods:{mobileResizeRow(e){document.body.style.overflow="hidden",document.body.style.overscrollBehaviorY="contain",e=e||window.event,e.stopPropagation();let n=e.changedTouches[0].clientY,s=this.reHeight,a=0,i=0;const t=this;this.isDragging=!0,this.$emit("isDragging",this.isDragging),document.ontouchmove=o,document.ontouchend=d;function o(r){if(this.time&&Date.now()-this.time<40)return;this.time=Date.now(),r=r||window.event,r.stopPropagation(),a=r.changedTouches[0].clientY;const g=n-a;i=parseInt(s-g),i<=20?t.reHeight=20:t.reHeight=i,t.$emit("dragging",t.reHeight)}function d(){t.isDragging=!1,t.$emit("isDragging",t.isDragging),document.body.style.overflow="",document.body.style.overscrollBehaviorY="",document.ontouchmove=null,document.ontouchend=null}},resizeRow(e){e=e||window.event,e.preventDefault(),e.stopPropagation();let n=e.clientY,s=this.reHeight,a=0,i=0;const t=this;this.isDragging=!0,this.$emit("isDragging",this.isDragging),document.onmousemove=o,document.onmouseup=d;function o(r){if(this.time&&Date.now()-this.time<40)return;this.time=Date.now(),r=r||window.event,r.preventDefault(),r.stopPropagation(),a=r.clientY;const g=n-a;i=parseInt(s-g),i<=20?t.reHeight=20:t.reHeight=i,t.$emit("dragging",t.reHeight)}function d(){t.isDragging=!1,t.$emit("isDragging",t.isDragging),document.onmouseup=null,document.onmousemove=null}}}},T=()=>{C(e=>({"9dd5c64e":e.sliderBgColor,"742aae44":e.sliderColor,"4c7316ec":e.sliderHoverColor,"95ae305e":e.sliderBgHoverColor}))},Y=z.setup;z.setup=Y?(e,n)=>(T(),Y(e,n)):T;const ee=z,te={class:"resize_row_body"};function ie(e,n,s,a,i,t){return D(),y("div",{class:"resize_row",style:h({height:i.reHeight+"px",width:s.width})},[l("div",te,[w(e.$slots,"default")]),l("div",{class:"slider_row",onTouchstartPassive:n[0]||(n[0]=(...o)=>t.mobileResizeRow&&t.mobileResizeRow(...o)),onMousedown:n[1]||(n[1]=(...o)=>t.resizeRow&&t.resizeRow(...o)),style:h({height:s.sliderWidth+"px"})},null,36)],4)}var oe=v(ee,[["render",ie]]);const P={name:"Resize",props:{sliderWidth:{type:Number,default:20},height:{type:Number,default:400},width:{type:Number,default:400},sliderColor:{type:String,default:"#6f808d"},sliderBgColor:{type:String,default:"#1f2e3a"},sliderHoverColor:{type:String,default:"#6f808d"},sliderBgHoverColor:{type:String,default:"#16222a"}},data(){return{reWidth:this.width,reHeight:this.height,isDragging:!1}},methods:{mobileResizeRow(e){document.body.style.overflow="hidden",document.body.style.overscrollBehaviorY="contain",e=e||window.event,e.stopPropagation();let n=e.changedTouches[0].clientY,s=this.reHeight,a=0,i=0;const t=this;this.isDragging=!0,this.$emit("isDraggingRow",this.isDragging),document.ontouchmove=o,document.ontouchend=d;function o(r){if(this.time&&Date.now()-this.time<40)return;this.time=Date.now(),r=r||window.event,r.stopPropagation(),a=r.changedTouches[0].clientY;const g=n-a;i=parseInt(s-g),i<=20?t.reHeight=20:t.reHeight=i,t.$emit("draggingRow",t.reHeight)}function d(){t.isDragging=!1,t.$emit("isDraggingRow",t.isDragging),document.body.style.overflow="",document.body.style.overscrollBehaviorY="",document.ontouchmove=null,document.ontouchend=null}},resizeRow(e){e=e||window.event,e.preventDefault(),e.stopPropagation();let n=e.clientY,s=this.reHeight,a=0,i=0;const t=this;this.isDragging=!0,this.$emit("isDraggingRow",this.isDragging),document.onmousemove=o,document.onmouseup=d;function o(r){if(this.time&&Date.now()-this.time<40)return;this.time=Date.now(),r=r||window.event,r.preventDefault(),r.stopPropagation(),a=r.clientY;const g=n-a;i=parseInt(s-g),i<=20?t.reHeight=20:t.reHeight=i,t.$emit("draggingRow",t.reHeight)}function d(){t.isDragging=!1,t.$emit("isDraggingRow",t.isDragging),document.onmouseup=null,document.onmousemove=null}},mobileResizeCol(e){e=e||window.event,e.stopPropagation();let n=e.changedTouches[0].clientX,s=this.reWidth,a=0,i=0;const t=this;this.isDragging=!0,this.$emit("isDraggingCol",this.isDragging),document.ontouchmove=o,document.ontouchend=d;function o(r){if(this.time&&Date.now()-this.time<40)return;this.time=Date.now(),r=r||window.event,r.stopPropagation(),a=r.changedTouches[0].clientX;const g=n-a;i=parseInt(s-g),i<=20?t.reWidth=20:t.reWidth=i,t.$emit("draggingCol",t.reWidth)}function d(){t.isDragging=!1,t.$emit("isDraggingCol",t.isDragging),document.ontouchmove=null,document.ontouchend=null}},resizeCol(e){e=e||window.event,e.preventDefault(),e.stopPropagation();let n=e.clientX,s=this.reWidth,a=0,i=0;const t=this;this.isDragging=!0,this.$emit("isDraggingCol",this.isDragging),document.onmousemove=o,document.onmouseup=d;function o(r){if(this.time&&Date.now()-this.time<40)return;this.time=Date.now(),r=r||window.event,r.preventDefault(),r.stopPropagation(),a=r.clientX;const g=n-a;i=parseInt(s-g),i<=20?t.reWidth=20:t.reWidth=i,t.$emit("draggingCol",t.reWidth)}function d(){t.isDragging=!1,t.$emit("isDraggingCol",t.isDragging),document.onmouseup=null,document.onmousemove=null}}}},j=()=>{C(e=>({"54a7f13e":e.sliderBgColor,"96fd5afa":e.sliderColor,efa4a732:e.sliderHoverColor,"26d7eae8":e.sliderBgHoverColor}))},$=P.setup;P.setup=$?(e,n)=>(j(),$(e,n)):j;const ne=P,re={class:"resize_body"};function le(e,n,s,a,i,t){return D(),y("div",{class:"resize",style:h({height:i.reHeight+"px",width:i.reWidth+"px"})},[l("div",re,[w(e.$slots,"default")]),l("div",{class:"slider_row",onTouchstartPassive:n[0]||(n[0]=(...o)=>t.mobileResizeRow&&t.mobileResizeRow(...o)),onMousedown:n[1]||(n[1]=(...o)=>t.resizeRow&&t.resizeRow(...o)),style:h({height:s.sliderWidth+"px"})},null,36),l("div",{class:"slider_col",onTouchstartPassive:n[2]||(n[2]=(...o)=>t.mobileResizeCol&&t.mobileResizeCol(...o)),onMousedown:n[3]||(n[3]=(...o)=>t.resizeCol&&t.resizeCol(...o)),style:h({width:s.sliderWidth+"px"})},null,36)],4)}var se=v(ne,[["render",le]]);const ae={components:{DragCol:A,DragRow:Z,ResizeCol:Q,ResizeRow:oe,Resize:se,CodeEditor:V},data(){return{example:`import { 2 | DragCol, 3 | DragRow, 4 | ResizeCol, 5 | ResizeRow, 6 | Resize, 7 | } from "vue-resizer";`,example_1:` 8 | 9 | 12 | 15 | `,example_1_1:`// Props 16 | props: { 17 | // width percentage of the left part 18 | // units: % 19 | leftPercent: { 20 | type: Number, 21 | default: 50, 22 | }, 23 | // width of the slider 24 | // units: px 25 | sliderWidth: { 26 | type: Number, 27 | default: 20, 28 | }, 29 | // width of the container 30 | // units: any 31 | width: { 32 | type: String, 33 | default: "400px", 34 | }, 35 | // height of the container 36 | // units: any 37 | height: { 38 | type: String, 39 | default: "400px", 40 | }, 41 | // color of the slider 42 | sliderColor: { 43 | type: String, 44 | default: "#6f808d", 45 | }, 46 | // bg color of the slider 47 | sliderBgColor: { 48 | type: String, 49 | default: "#1f2e3a", 50 | }, 51 | // color of the slider on hover 52 | sliderHoverColor: { 53 | type: String, 54 | default: "#6f808d", 55 | }, 56 | // bg color of the slider on hover 57 | sliderBgHoverColor: { 58 | type: String, 59 | default: "#16222a", 60 | } 61 | } 62 | `,example_2:` 63 | 66 | 69 | `,example_2_1:`props: { 70 | // height percentage of the top part 71 | // units: % 72 | topPercent: { 73 | type: Number, 74 | default: 50, 75 | }, 76 | // width of the slider 77 | // units: px 78 | sliderWidth: { 79 | type: Number, 80 | default: 20, 81 | }, 82 | // width of the container 83 | // units: any 84 | width: { 85 | type: String, 86 | default: "400px", 87 | }, 88 | // height of the container 89 | // units: any 90 | height: { 91 | type: String, 92 | default: "400px", 93 | }, 94 | // color of the slider 95 | sliderColor: { 96 | type: String, 97 | default: "#6f808d", 98 | }, 99 | // bg color of the slider 100 | sliderBgColor: { 101 | type: String, 102 | default: "#1f2e3a", 103 | }, 104 | // color of the slider on hover 105 | sliderHoverColor: { 106 | type: String, 107 | default: "#6f808d", 108 | }, 109 | // bg color of the slider on hover 110 | sliderBgHoverColor: { 111 | type: String, 112 | default: "#16222a", 113 | } 114 | }`,example_3:` 115 | 116 | `,example_3_1:`props: { 117 | // width of the slider 118 | // units: px 119 | sliderWidth: { 120 | type: Number, 121 | default: 20, 122 | }, 123 | // width of the container 124 | // units: px 125 | width: { 126 | type: Number, 127 | default: 400, 128 | }, 129 | // height of the container 130 | // units: any 131 | height: { 132 | type: String, 133 | default: "400px", 134 | }, 135 | // color of the slider 136 | sliderColor: { 137 | type: String, 138 | default: "#6f808d", 139 | }, 140 | // bg color of the slider 141 | sliderBgColor: { 142 | type: String, 143 | default: "#1f2e3a", 144 | }, 145 | // color of the slider on hover 146 | sliderHoverColor: { 147 | type: String, 148 | default: "#6f808d", 149 | }, 150 | // bg color of the slider on hover 151 | sliderBgHoverColor: { 152 | type: String, 153 | default: "#16222a", 154 | } 155 | }`,example_4:` 156 | 157 | `,example_4_1:`props: { 158 | // width of the slider 159 | // units: px 160 | sliderWidth: { 161 | type: Number, 162 | default: 20, 163 | }, 164 | // height of the container 165 | // units: px 166 | height: { 167 | type: Number, 168 | default: 400, 169 | }, 170 | // width of the container 171 | // units: any 172 | width: { 173 | type: String, 174 | default: "400px", 175 | }, 176 | // color of the slider 177 | sliderColor: { 178 | type: String, 179 | default: "#6f808d", 180 | }, 181 | // bg color of the slider 182 | sliderBgColor: { 183 | type: String, 184 | default: "#1f2e3a", 185 | }, 186 | // color of the slider on hover 187 | sliderHoverColor: { 188 | type: String, 189 | default: "#6f808d", 190 | }, 191 | // bg color of the slider on hover 192 | sliderBgHoverColor: { 193 | type: String, 194 | default: "#16222a", 195 | } 196 | }`,example_5:` 197 | 198 | `,example_5_1:`props: { 199 | // width of the slider 200 | // units: px 201 | sliderWidth: { 202 | type: Number, 203 | default: 20, 204 | }, 205 | // height of the container 206 | // units: px 207 | height: { 208 | type: Number, 209 | default: 400, 210 | }, 211 | // width of the container 212 | // units: px 213 | width: { 214 | type: Number, 215 | default: 400, 216 | }, 217 | // color of the slider 218 | sliderColor: { 219 | type: String, 220 | default: "#6f808d", 221 | }, 222 | // bg color of the slider 223 | sliderBgColor: { 224 | type: String, 225 | default: "#1f2e3a", 226 | }, 227 | // color of the slider on hover 228 | sliderHoverColor: { 229 | type: String, 230 | default: "#6f808d", 231 | }, 232 | // bg color of the slider on hover 233 | sliderBgHoverColor: { 234 | type: String, 235 | default: "#16222a", 236 | } 237 | },`,example_6:` 238 | 239 | 249 | 259 | 260 | `,install:"npm install vue-resizer",data_1:"50%",data_1_1:"50%",data_2:"50%",data_2_1:"50%",data_3:"320px",data_4:"400px",data_5_1:"320px",data_5_2:"400px",example_7:` 261 | 262 | 266 | 271 | 275 | 280 | 284 | 289 | 293 | 298 | 304 | `}},computed:{data_5(){return`${this.data_5_1} * ${this.data_5_2}`}},methods:{draggingCol(e){const n=parseInt(e);this.data_1=n+"%",this.data_1_1=100-n+"%"},draggingRow(e){const n=parseInt(e);this.data_2=n+"%",this.data_2_1=100-n+"%"},resizingCol(e){this.data_3=e+"px"},resizingRow(e){this.data_4=e+"px"},resizingC(e){this.data_5_1=e+"px"},resizingR(e){this.data_5_2=e+"px"},isDragging(e){console.log("Dragging: "+e)}}},ge=X('',1),de={class:"container"},ue=l("h1",null,"Vue Resizer",-1),he=l("p",null,"A series of the resizer components for Vue.js",-1),ce=l("br",null,null,-1),pe=l("a",{href:"https://github.com/justcaliturner/vue-resizer",target:"_blank",class:"link"},[l("span",null,"View on Github"),l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"feather feather-arrow-right"},[l("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),l("polyline",{points:"12 5 19 12 12 19"})])],-1),fe=l("h2",null,"Examples",-1),me=l("br",null,null,-1),we=l("br",null,null,-1),_e=l("br",null,null,-1),ve=l("br",null,null,-1),De=l("br",null,null,-1),ye=l("br",null,null,-1),Ce=l("br",null,null,-1),be=l("br",null,null,-1),Re=l("br",null,null,-1),xe=l("br",null,null,-1),ze=l("br",null,null,-1),Pe=l("br",null,null,-1),Se=l("br",null,null,-1),He=l("br",null,null,-1),We=l("h2",null,"Nesting",-1),Be=l("br",null,null,-1),Ne=l("h3",null,"Real-time State and Data",-1),Ie=l("a",{href:"https://github.com/justcaliturner/vue-resizer",target:"_blank",class:"link",style:{"margin-top":"40px"}},[l("span",null,"View on Github"),l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"feather feather-arrow-right"},[l("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),l("polyline",{points:"12 5 19 12 12 19"})])],-1);function ke(e,n,s,a,i,t){const o=_("CodeEditor"),d=_("DragCol"),r=_("DragRow"),g=_("ResizeCol"),p=_("ResizeRow"),S=_("Resize");return D(),y(L,null,[ge,l("div",de,[ue,he,u(o,{width:"100%",value:i.install,read_only:!0,languages:[["shell","NPM"]]},null,8,["value"]),ce,u(o,{width:"100%",value:i.example,read_only:!0,font_size:"16px",languages:[["javascript","JS"]]},null,8,["value"]),pe,fe,u(d,{class:"example_1",onIsDragging:t.isDragging,onDragging:t.draggingCol,width:"100%"},{left:c(()=>[f(m(i.data_1),1)]),right:c(()=>[f(m(i.data_1_1),1)]),_:1},8,["onIsDragging","onDragging"]),me,u(o,{font_size:"16px",width:"100%",value:i.example_1,read_only:!0,languages:[["html","template"]]},null,8,["value"]),we,u(o,{font_size:"16px",hide_header:!0,width:"100%",value:i.example_1_1,read_only:!0,languages:[["javascript","JS"]]},null,8,["value"]),_e,u(r,{class:"example_2",onIsDragging:t.isDragging,onDragging:t.draggingRow,width:"100%"},{top:c(()=>[f(m(i.data_2),1)]),bottom:c(()=>[f(m(i.data_2_1),1)]),_:1},8,["onIsDragging","onDragging"]),ve,u(o,{font_size:"16px",width:"100%",value:i.example_2,read_only:!0,languages:[["html","template"]]},null,8,["value"]),De,u(o,{font_size:"16px",hide_header:!0,width:"100%",value:i.example_2_1,read_only:!0,languages:[["javascript","JS"]]},null,8,["value"]),ye,u(g,{width:320,class:"example_3",onIsDragging:t.isDragging,onDragging:t.resizingCol},{default:c(()=>[f(m(i.data_3),1)]),_:1},8,["onIsDragging","onDragging"]),Ce,u(o,{font_size:"16px",width:"100%",value:i.example_3,read_only:!0,languages:[["html","template"]]},null,8,["value"]),be,u(o,{font_size:"16px",hide_header:!0,width:"100%",value:i.example_3_1,read_only:!0,languages:[["javascript","JS"]]},null,8,["value"]),Re,u(p,{width:"100%",class:"example_4",onIsDragging:t.isDragging,onDragging:t.resizingRow},{default:c(()=>[f(m(i.data_4),1)]),_:1},8,["onIsDragging","onDragging"]),xe,u(o,{font_size:"16px",width:"100%",value:i.example_4,read_only:!0,languages:[["html","template"]]},null,8,["value"]),ze,u(o,{font_size:"16px",hide_header:!0,width:"100%",value:i.example_4_1,read_only:!0,languages:[["javascript","JS"]]},null,8,["value"]),Pe,u(S,{width:320,class:"example_5",onIsDraggingRow:t.isDragging,onIsDraggingCol:t.isDragging,onDraggingRow:t.resizingR,onDraggingCol:t.resizingC},{default:c(()=>[f(m(t.data_5),1)]),_:1},8,["onIsDraggingRow","onIsDraggingCol","onDraggingRow","onDraggingCol"]),Se,u(o,{font_size:"16px",width:"100%",value:i.example_5,read_only:!0,languages:[["html","template"]]},null,8,["value"]),He,u(o,{font_size:"16px",hide_header:!0,width:"100%",value:i.example_5_1,read_only:!0,languages:[["javascript","JS"]]},null,8,["value"]),We,u(S,{width:320},{default:c(()=>[u(r,{height:"100%",width:"100%"},{top:c(()=>[u(d,{height:"100%",width:"100%",leftPercent:30},{left:c(()=>[]),right:c(()=>[]),_:1})]),bottom:c(()=>[u(d,{height:"100%",width:"100%",leftPercent:70},{left:c(()=>[]),right:c(()=>[]),_:1})]),_:1})]),_:1}),Be,u(o,{font_size:"16px",width:"100%",value:i.example_6,read_only:!0,languages:[["html","template"]]},null,8,["value"]),Ne,u(o,{font_size:"16px",wrap_code:!0,width:"100%",value:i.example_7,read_only:!0,languages:[["html","template"]]},null,8,["value"]),Ie])],64)}var Te=v(ae,[["render",ke]]);F(Te).mount("#app"); 313 | --------------------------------------------------------------------------------