{"_id":"@dans98/vue-multipane","name":"@dans98/vue-multipane","dist-tags":{"latest":"0.10.0"},"versions":{"0.10.0":{"name":"@dans98/vue-multipane","description":"Resizable split panes for Vue.js.","version":"0.10.0","author":{"name":"Yan Sern","email":"hey@yansern.io"},"main":"dist/vue-multipane.js","unpkg":"dist/vue-multipane.min.js","module":"dist/vue-multipane.esm.js","license":"MIT","homepage":"https://github.com/yansern/vue-multipane/index.html","repository":{"type":"git","url":"git+https://github.com/yansern/vue-multipane.git"},"bugs":{"url":"https://github.com/yansern/vue-multipane/issues"},"keywords":["vue","multipane","split pane","ui","resize","resizeable","layout","flexbox","components"],"devDependencies":{"babel-env":"^2.4.1","babel-eslint":"^7.2.3","babel-runtime":"^6.26.0","cross-env":"^5.0.5","eslint-plugin-prettier":"^2.2.0","eslint_d":"^5.1.0","laravel-mix":"^1.4.5","laravel-mix-environments":"^0.1.0","rollup":"^0.50.0","rollup-plugin-alias":"^1.3.1","rollup-plugin-buble":"^0.16.0","rollup-plugin-commonjs":"^8.4.1","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-scss":"^0.3.0","rollup-plugin-uglify":"^2.0.1","rollup-plugin-vue":"^5.1.9","uglify-es":"^3.1.2","vue":"^2.4.4","yargs":"^9.0.1"},"engines":{"node":">=6.0.0"},"dependencies":{"yarn":"^1.6.0"},"scripts":{"build":"yarn run build:prod && yarn run build:dev && yarn run build:esm && yarn run build:demo","build:prod":"cross-env rollup -c rollup.config.prod.js","build:dev":"cross-env rollup -c rollup.config.dev.js","build:esm":"cross-env rollup -c rollup.config.esm.js","build:demo":"cross-env NODE_ENV=production webpack --progress --hide-modules --env.entry=demo --config=node_modules/laravel-mix/setup/webpack.config.js","dev":"cross-env NODE_ENV=development webpack-dev-server --hot --inline --env.entry=demo --config=node_modules/laravel-mix/setup/webpack.config.js"},"_id":"@dans98/vue-multipane@0.10.0","_integrity":"sha512-4i9rdWA5Yi6ZqUGJ5eXPB3AP1QSaE3BjSmKjlFkX+Jf9NVxB2osvgcqaM68SjOBlY46mTfydDO3CU1r4arOtug==","_resolved":"C:\\Users\\me\\AppData\\Local\\Temp\\82a1d1bf43db72c114814f4d5dc8f2ae\\dans98-vue-multipane-0.10.0.tgz","_from":"file:dans98-vue-multipane-0.10.0.tgz","_nodeVersion":"22.5.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-4i9rdWA5Yi6ZqUGJ5eXPB3AP1QSaE3BjSmKjlFkX+Jf9NVxB2osvgcqaM68SjOBlY46mTfydDO3CU1r4arOtug==","shasum":"d57d7d269a71a1e7a027449e56ae13b9ff02fb1c","tarball":"https://registry.npmjs.org/@dans98/vue-multipane/-/vue-multipane-0.10.0.tgz","fileCount":33,"unpackedSize":757877,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG6ZQSh9GX+KkogGTfEBkYz8CFN8JwabU+hdCZve8MnBAiA0T1yX+iEJpQb8JN9JzEG0NHttYZ/jScJCyEew+LQvpA=="}]},"_npmUser":{"name":"dans98","email":"me@danielshields.uk"},"directories":{},"maintainers":[{"name":"dans98","email":"me@danielshields.uk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-multipane_0.10.0_1722343590223_0.2070977906083502"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-30T12:46:30.124Z","0.10.0":"2024-07-30T12:46:30.540Z","modified":"2024-07-30T12:46:30.799Z"},"maintainers":[{"name":"dans98","email":"me@danielshields.uk"}],"description":"Resizable split panes for Vue.js.","homepage":"https://github.com/yansern/vue-multipane/index.html","keywords":["vue","multipane","split pane","ui","resize","resizeable","layout","flexbox","components"],"repository":{"type":"git","url":"git+https://github.com/yansern/vue-multipane.git"},"author":{"name":"Yan Sern","email":"hey@yansern.io"},"bugs":{"url":"https://github.com/yansern/vue-multipane/issues"},"license":"MIT","readme":"# vue-multipane ![npm tag](https://img.shields.io/npm/v/vue-multipane.svg)\r\n> Resizable split panes for [Vue.js](http://vuejs.org).\r\n\r\nNB: This repository has added all the outstanding pull request patches as of 7 November 2020. The original repository does not appear to be maintained.\r\n\r\n<p align=\"center\">\r\n  <img src=\"https://raw.githubusercontent.com/yansern/vue-multipane/master/demo/preview.gif\" />\r\n  <br/>\r\n  <b>Check out the <a href=\"https://yansern.github.io/vue-multipane/demo/index.html\" target=\"_blank\">live demo</a>.</b>\r\n</p>\r\n\r\n## Features\r\n\r\n* Uses CSS3 Flexbox.\r\n* Supports vertical & horizontal layouts.\r\n* Supports fixed and fluid panes.\r\n* Configure everything using CSS!\r\n\r\n## Installation\r\n```bash\r\n$ npm install vue-multipane\r\n```\r\n\r\n## Using vue-multipane\r\n\r\nFirst, import `vue-multipane` into your Vue component.\r\n```js\r\nimport { Multipane, MultipaneResizer } from 'vue-multipane';\r\n\r\nexport default {\r\n  // ...\r\n  components: {\r\n    Multipane,\r\n    MultipaneResizer\r\n  }\r\n}\r\n```\r\n\r\nThen, construct your split pane layout using multipane component.\r\n```html\r\n<multipane>\r\n  <div>Pane 1</div>\r\n  <multipane-resizer></multipane-resizer>\r\n  <div>Pane 2</div>\r\n  <multipane-resizer></multipane-resizer>\r\n  <div>Pane 3</div>\r\n</multipane>\r\n```\r\n\r\n## Customizing pane layout\r\nYou can customize pane layouts using CSS.\r\n\r\n* Create vertical/horizontal layouts using `layout=\"vertical|horizontal\"` attribute.\r\n* Set initial pane size using `width|height` CSS property.\r\n* Set pane size constraints using `min-width|min-height|max-width|max-height` CSS property.\r\n* Create fixed/fluid combination panes by using `px|%` units.\r\n* Use `flex-grow: 1` for that one pane that should take all remaining space available on the multipane container.\r\n\r\nThis example below shows a combination of different styling properties you can apply to make the panes render the way you want it to:\r\n```html\r\n<multipane class=\"foo\" layout=\"vertical\">\r\n  <div :style=\"{ width: '100px', maxWidth: '200px' }\">Pane 1</div>\r\n  <multipane-resizer></multipane-resizer>\r\n  <div :style=\"{ width: '25%', maxWidth: '50%' }\">Pane 2</div>\r\n  <multipane-resizer></multipane-resizer>\r\n  <div :style=\"{ flexGrow: 1 }\">Pane 3</div>\r\n</multipane>\r\n\r\n```\r\n\r\n## Customizing resize handle\r\nBy default, vue-multipane creates an invisible 10px resize handle that sits in between 2 panes. You can customize the appearance of the resize handle to fit your needs.\r\n\r\nThis example below creates a 15px blue resize handle:\r\n\r\n```css\r\n.multipane.foo.layout-v .multipane-resizer {\r\n  margin: 0; left: 0; /* reset default styling */\r\n  width: 15px;\r\n  background: blue;\r\n}\r\n\r\n.multipane.foo.layout-h .multipane-resizer {\r\n  margin: 0; top: 0; /* reset default styling */\r\n  height: 15px;\r\n  background: blue;\r\n}\r\n\r\n```\r\n\r\n#### Optional resize handle\r\nYou can also add resize handle only specific panes by just adding `<multipane-resizer>` next it.\r\n\r\n```html\r\n<multipane>\r\n  <div>Pane 1</div> <!-- No resizing on Pane 1. -->\r\n  <div>Pane 2</div> <!-- Resizing is possible on Pane 2. -->\r\n  <multipane-resizer></multipane-resizer>\r\n  <div>Pane 3</div>\r\n</multipane>\r\n```\r\n\r\n## Options\r\n\r\n** Multipane **\r\n\r\n|    Property    |    Description   |   Type     |  Default     |\r\n| -------------- | ---------------- | :--------: | :----------: |\r\n| layout         | Determine layout of panes. | String [vertical, horizontal] |vertical |\r\n\r\n## Events\r\n\r\n** Multipane **\r\n\r\n|    Event           |    Description   |   Returns  |\r\n| ------------------ | ---------------- | :--------: |\r\n| paneresizestart    | When user clicks on the resize handle to start resizing a pane. | pane, container, size |\r\n| paneresize         | When user is resizing a pane. | pane, container, size |\r\n| paneresizestop     | When user release the resize handle to stop resizing a pane. | pane, container, size |\r\n\r\n## License\r\n**[vue-multipane](https://github.com/yansern/vue-multipane)** by [Yan Sern](https://twitter.com/yansernio) licensed under [MIT](LICENSE).\r\n\r\n> PS: I would love to know if you're using vue-multipane. Tweet to me at [@yansernio](https://twitter.com/yansernio).\r\n","readmeFilename":"README.md"}