{"id":13424021,"url":"https://github.com/3mcd/vue-panel","last_synced_at":"2025-12-12T05:03:28.433Z","repository":{"id":33634028,"uuid":"37286370","full_name":"3mcd/vue-panel","owner":"3mcd","description":"Suite of Vue components for building Flexbox layouts","archived":true,"fork":false,"pushed_at":"2019-07-16T00:41:26.000Z","size":385,"stargazers_count":58,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-24T16:49:08.687Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/3mcd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-11T21:09:33.000Z","updated_at":"2024-03-29T06:55:33.000Z","dependencies_parsed_at":"2022-08-31T09:22:54.448Z","dependency_job_id":null,"html_url":"https://github.com/3mcd/vue-panel","commit_stats":null,"previous_names":["ericmcdaniel/vue-panel"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3mcd%2Fvue-panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3mcd%2Fvue-panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3mcd%2Fvue-panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3mcd%2Fvue-panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/3mcd","download_url":"https://codeload.github.com/3mcd/vue-panel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243767772,"owners_count":20344967,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T00:00:46.914Z","updated_at":"2025-10-22T20:37:59.530Z","avatar_url":"https://github.com/3mcd.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)"],"sub_categories":["Libraries \u0026 Plugins"],"readme":"# vue-panel\n\n\u003e Note: This project is no longer maintained.\n\nThis plugin aims to provide your [Vue](http://vuejs.org/) application with a\nhandful of light, composable, Flexbox-powered components.\n\n### Installation\n\nJust `bower` or `npm install ericmcdaniel/vue-panel`. The package is exposed as\na UMD module so you can require it with Browserify/Webpack/etc. or include it in\nyour page via script tag.\n\nTo use this plugin with Vue, simply call `Vue.use(require('vue-panel'))`, or\n`Vue.use(window.VuePanel)` if including in a script tag.\n\n### Components\n\n#### VPanel\n`\u003cv-panel\u003e` responds to a variety of Flexbox parameters and is useable as both a\n`display: flex` element and a flex-item:\n\n```html\n\u003cv-panel grow=\"1\" shrink=\"0\"\u003e\u003c/v-panel\u003e\n```\n\n`\u003cv-panel\u003e` will display any content inside of the element as it's own\ntransclusion content:\n\n```html\n\u003cv-panel basis=\"200px\"\u003e\n    \u003ch3\u003eFoo\u003c/h3\u003e\n    \u003cp\u003eLorem ipsum dolor sit amet...\u003c/p\u003e\n\u003c/v-panel\u003e\n```\n\n`\u003cv-panel\u003e` responds to\n* `align-items`,\n* `align-self`,\n* `order`,\n* `direction` (flex-direction),\n* `flex`,\n* `grow` (flex-grow),\n* `shrink` (flex-shrink),\n* `basis` (flex-basis),\n* and `justify` (justify-content).\n\nThe plugin provides two more components: `\u003cv-panel-bar\u003e` and `\u003cv-panel-content\u003e`.\n\n#### VPanelBar\n`\u003cv-panel-bar\u003e` responds to\n* `align-items`,\n* `direction`,\n* `justify`,\n* and `size` (flex-basis).\n\nThe bar is 30px wide by default. When the `direction` value changes,\nthe component will broadcast the event `v-panel-bar:direction` (with it's\n`$data.direction` value) to child components so they can respond to it's\nflex-direction.\n\n#### VPanelContent\n`\u003cv-panel-content\u003e` is a simple flex-item that responds to `flex`, `grow` and\n`shrink`.\n\n```html\n\u003cv-panel\u003e\n    \u003cv-panel-bar\u003e\n        \u003cbutton on=\"click: updateContent\"\u003eClick\u003c/button\u003e\n    \u003c/v-panel-bar\u003e\n    \u003cv-panel-content v-ref=\"content\"\u003eFoo\u003c/v-panel-content\u003e\n\u003c/v-panel\u003e\n```\n\n### Directives\n\nEach of the included components are also provided as directives. These directives can take parameters in the form of attributes, not to be confused with component props. These params follow the same naming conventions as the props documented above.\n\n```html\n\u003csection v-panel grow=\"1\" shrink=\"0\"\u003e\n  \u003cdiv v-panel-bar size=\"90px\"\u003e\u003c/div\u003e\n  \u003cdiv v-panel-content\u003e\u003c/div\u003e\n\u003c/section\u003e\n```\n\nThe directives share common defaults with the components, but you will have to manually declare bindings using the `v-bind` directive if you want to hook up ViewModel data to the params. For example:\n\n```html\n\u003cmy-nav v-panel-bar v-bind:size=\"myBarSize\"\u003e\u003c/my-component\u003e\n```\n\n### Configuration\n\nEach of the vue-panel _components_ can be globally configured to initialize with\nadditional `data` values via an object literal where the key is the property\nname and the value is the initial value. This is done by passing an object as\nthe second parameter to the `Vue.use` function like so:\n\n```javascript\nVue.use(VuePanel, {\n  // either hyphenated\n  'v-panel': {\n    class: 'Panel',\n    style: {\n      color: 'red',\n      backgroundColor: '#ccc'\n    }\n  },\n  // or camel case:\n  'vPanelBar': {\n    class: 'Panel-bar'\n  },\n  'vPanelContent': {\n    class: 'Panel-content'\n  }\n});\n```\n\n`class` and `style` are currently the only options that have any built-in\neffect. The value from `class` will be merged with the class list of each\ncomponent instance via the `v-bind:class` directive. The value(s) from `style`\nwill be merged with the inline styles of each component instance via the\n`v-bind:style` directive.\n\n\u003e Note: This feature does not work with the bundled directives. Directives are designed to provide the bare-minimum Flexbox parameters that you can integrate with any component or element.\n\n### Example\n\nOpen `example/index.html` for a straightforward example.\n\n### Tests\n\nThe plugin ships with Jasmine specs in the `test` folder if installing from NPM\nor GitHub. `npm install` to pull down the Vue dependency, then open\n`test/index.html` to run the specs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3mcd%2Fvue-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F3mcd%2Fvue-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3mcd%2Fvue-panel/lists"}