{"_rev":"3-3ccfd9c6290e2e22a791f57d8fb0caac","time":{"created":"2022-06-28T03:50:09.017Z","5.2.100":"2022-06-27T21:58:57.225Z","modified":"2022-06-28T03:50:09.434Z","5.2.5":"2022-06-28T03:50:09.330Z"},"_id":"@adwil800/vue-sidebar-menu","name":"@adwil800/vue-sidebar-menu","dist-tags":{"latest":"5.2.5"},"versions":{"5.2.5":{"name":"@adwil800/vue-sidebar-menu","description":"A Vue.js Sidebar Menu Component","version":"5.2.5","author":{"name":"yaminncco","email":"yaminncco@gmail.com"},"license":"MIT","main":"dist/vue-sidebar-menu.js","module":"dist/vue-sidebar-menu.esm.js","unpkg":"dist/vue-sidebar-menu.min.js","types":"./types/index.d.ts","repository":{"type":"git","url":"git+https://github.com/yaminncco/vue-sidebar-menu.git"},"homepage":"https://yaminncco.github.io/vue-sidebar-menu/","keywords":["vue","vue-component","vue-sidebar","vue-sidebar-menu","sidebar","sidebar-menu","admin-sidebar"],"scripts":{"dev":"cd demo && npm run dev","build:demo":"cd demo && npm run build","build:lib":"rollup -c rollup.config.js","preview":"cd demo && npm run preview","lint":"eslint --ext .js,.vue ."},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-node-resolve":"^9.0.0","@vue/compiler-sfc":"^3.1.1","autoprefixer":"^10.4.2","eslint":"^7.29.0","eslint-config-standard":"^16.0.3","eslint-plugin-import":"^2.23.4","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.3.1","eslint-plugin-vue":"^7.11.1","rollup":"^2.52.2","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-vue":"^6.0.0","sass":"^1.35.1","vue":"^3.1.1"},"dependencies":{},"gitHead":"fbdb69fe7b13d326d876bc9c7a7161bed34e1f89","bugs":{"url":"https://github.com/yaminncco/vue-sidebar-menu/issues"},"_id":"@adwil800/vue-sidebar-menu@5.2.5","_nodeVersion":"16.14.2","_npmVersion":"8.7.0","dist":{"integrity":"sha512-8ZKepjaHZsYIgJo9aWIdaxYyjVgNlePoGLh26DePzobpf6rJuJWxlM2bCQhyfo7M5agv+T4jb6DlHZsoP4Elow==","shasum":"264fbc7e1dade6e1ae290cea0287f62414e84335","tarball":"https://registry.npmjs.org/@adwil800/vue-sidebar-menu/-/vue-sidebar-menu-5.2.5.tgz","fileCount":27,"unpackedSize":401933,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0NIQFKR86/4CzxUKU5B4J73j+dqxQTuQ/UPogd63sPwIgT2+ZDzxFGP3iGv/6d4lqazj9xaAU6Agk8d+kDaZJBP0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiunpxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr7g/+OeIKB8pgERsvjAdzpNlUvkBNpmKlSsSF3rbc9JzTXNixze++\r\n/79dcLJXhWF6RECX0OrUKAVhpdfVomiZ7q9nEy/aHuFqLfalFm7KbK9qp1/X\r\n+Hka78YE4e5ixPXLvx5oGy/fEqukVQk7ThtK1H0+vsU5FBrL5MOeVjDiMsNX\r\nXdF3CiUfExAYFHFXlmYsnjb0x/89V8AFBK1xNBrJvwDy/ZRzBKIQDhS8sZig\r\n5Lj7glBReQam6PyOCIzo5teT052cbDou2fEYtJ5BJL4ng9tifQl+hofOxgul\r\nafH/y4xKu4eP25QhSUdWPtsBfGYXq8n/T6OzbkblNdFVKF2gQiRpIwu/lz1e\r\nDnQ7lvgXnSwQUeAUTAmFtGdYQoUMLTlq/UtbIpOcJbAfN9NRlh6n/OO3vbSJ\r\nvpefrGxUkW+fsq+L93hf2FglWJSm5WYJugeXteRYMPvpFpKuGW5WQknofS3Y\r\nxL2Pbs6yWFwwPiqVrNfxRFoFhxiMMpzg7D3gCaBCxaMxij2LJtCdXmjFT3HD\r\nzZzxiMlyy+cLuF+jD5M32Zv97UrsnioWQhk0myiL7LXw4iXcBjBmpvMSZFrG\r\nKOCygn7nfp1UWRNKnwb9807w+SxHvED0W8lOHPf+2QCGItEpq3znVivfoQfv\r\nLcy6voOEuMlpCooL4UvueZKV1dFYZ2BSA/o=\r\n=seFg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"adwil800","email":"adwil800@gmail.com"},"directories":{},"maintainers":[{"name":"adwil800","email":"adwil800@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-sidebar-menu_5.2.5_1656388209107_0.17850791574187208"},"_hasShrinkwrap":false}},"maintainers":[{"name":"adwil800","email":"adwil800@gmail.com"}],"description":"A Vue.js Sidebar Menu Component","homepage":"https://yaminncco.github.io/vue-sidebar-menu/","keywords":["vue","vue-component","vue-sidebar","vue-sidebar-menu","sidebar","sidebar-menu","admin-sidebar"],"repository":{"type":"git","url":"git+https://github.com/yaminncco/vue-sidebar-menu.git"},"author":{"name":"yaminncco","email":"yaminncco@gmail.com"},"bugs":{"url":"https://github.com/yaminncco/vue-sidebar-menu/issues"},"license":"MIT","readme":"# vue-sidebar-menu (for Vue 3)\r\n\r\nA Vue.js sidebar menu component with vue-router compatibility\r\n\r\n## Demo\r\n\r\n[vue-sidebar-menu-demo](https://yaminncco.github.io/vue-sidebar-menu/)\r\n\r\n### :warning: This documentation is for Vue 3, for Vue 2 [click here](https://github.com/yaminncco/vue-sidebar-menu/tree/vue2)\r\n\r\n## What new in v5.0.0\r\n\r\n- Vue 3 support\r\n- Improved the sidebar design\r\n- Added custom scrollbar\r\n- Improved the sidebar accessibility\r\n- Custom link support\r\n\r\n## Installation\r\n\r\n```\r\nnpm i vue-sidebar-menu --save\r\n```\r\n\r\nInstall the plugin globally.\r\n\r\n```js\r\n//main.js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport VueSidebarMenu from 'vue-sidebar-menu'\r\nimport 'vue-sidebar-menu/dist/vue-sidebar-menu.css'\r\n\r\nconst app = createApp(App)\r\napp.use(VueSidebarMenu)\r\napp.mount(\"#app\")\r\n```\r\n\r\nOr import the component locally.\r\n\r\n```js\r\n//App.vue\r\nimport { SidebarMenu } from 'vue-sidebar-menu'\r\nimport 'vue-sidebar-menu/dist/vue-sidebar-menu.css'\r\nexport default {\r\n components: {\r\n SidebarMenu\r\n }\r\n}\r\n```\r\n\r\n## Basic Usage\r\n\r\n```html\r\n\r\n\r\n\r\n```\r\n\r\n### Item Properties\r\n\r\n```js\r\nmenu [\r\n // item\r\n {\r\n // string or a location object\r\n href: '/',\r\n // href: { path: '/' }\r\n\r\n title: 'Dashboard',\r\n\r\n // icon class\r\n icon: 'fa fa-user'\r\n /* or custom icon\r\n icon: {\r\n element: 'span',\r\n class: 'fa fa-user',\r\n // attributes: {}\r\n // text: ''\r\n }\r\n */\r\n\r\n /*\r\n badge: {\r\n text: 'new',\r\n class: 'vsm--badge_default'\r\n // attributes: {}\r\n // element: 'span'\r\n }\r\n */\r\n\r\n // child: []\r\n // disabled: true\r\n // class: ''\r\n // attributes: {}\r\n // hidden: false\r\n // hiddenOnCollapse: true\r\n\r\n /* with vue-router */\r\n // external: true\r\n // exact: true // apply active class when current route is exactly the same. (based on route records, query & hash are not relevant)\r\n },\r\n\r\n // header item\r\n {\r\n header: 'Main Navigation'\r\n // hidden: false\r\n // hiddenOnCollapse: true\r\n // class: ''\r\n // attributes: {}\r\n },\r\n\r\n // component item\r\n {\r\n component: componentName\r\n // props: componentProps\r\n // hidden: false\r\n // hiddenOnCollapse: true\r\n }\r\n]\r\n```\r\n\r\n## Props\r\n\r\n```js\r\nprops: {\r\n // Sidebar menu (required)\r\n menu: {\r\n type: Array,\r\n required: true\r\n },\r\n\r\n // Sidebar Collapse state (v-model:collapsed to enable two-way data binding)\r\n collapsed: {\r\n type: Boolean,\r\n default: false\r\n },\r\n\r\n // Sidebar width (expanded)\r\n width: {\r\n type: String,\r\n default: '290px'\r\n },\r\n\r\n // Sidebar width (collapsed)\r\n widthCollapsed: {\r\n type: String,\r\n default: '65px'\r\n },\r\n\r\n // Keep only one child opened at a time (first level only)\r\n showOneChild: {\r\n type: Boolean,\r\n default: false\r\n },\r\n\r\n // Keep all child open\r\n showChild: {\r\n type: Boolean,\r\n default: false\r\n },\r\n\r\n // Sidebar right to left\r\n rtl: {\r\n type: Boolean,\r\n default: false\r\n },\r\n\r\n // Make sidebar relative to the parent (by default the sidebar is relative to the viewport)\r\n relative: {\r\n type: Boolean,\r\n default: false\r\n },\r\n\r\n // Hide toggle collapse btn\r\n hideToggle: {\r\n type: Boolean,\r\n default: false\r\n },\r\n\r\n // Sidebar theme (available themes: 'white-theme')\r\n theme: {\r\n type: String,\r\n default: ''\r\n },\r\n\r\n // Disable hover on collapse mode\r\n disableHover: {\r\n type: Boolean,\r\n default: false\r\n },\r\n\r\n // The name of the custom link component (must be registered globally and define item as a prop)\r\n linkComponentName: {\r\n type: String,\r\n default: undefined\r\n }\r\n}\r\n```\r\n\r\n## Events\r\n\r\n```html\r\n\r\n...\r\nmethods: {\r\n onToggleCollapse(collapsed) {},\r\n onItemClick(event, item) {}\r\n}\r\n...\r\n```\r\n\r\n__@update:collapsed(collapsed)__ Trigger on toggle btn click\r\n\r\n__@item-click(event, item)__ Trigger on item link click\r\n\r\n## Styles\r\n\r\nAll styles customization can be done in normal CSS by using this classes\r\n\r\n```css\r\n.v-sidebar-menu {}\r\n.v-sidebar-menu.vsm_expanded {}\r\n.v-sidebar-menu.vsm_collapsed {}\r\n.v-sidebar-menu.vsm_rtl {}\r\n.v-sidebar-menu .vsm--item {}\r\n.v-sidebar-menu .vsm--link {}\r\n.v-sidebar-menu .vsm--link_active {}\r\n.v-sidebar-menu .vsm--link_open {}\r\n.v-sidebar-menu .vsm--link_mobile {}\r\n.v-sidebar-menu .vsm--link_level-[n] {}\r\n.v-sidebar-menu .vsm--link_disabled {}\r\n.v-sidebar-menu .vsm--title {}\r\n.v-sidebar-menu .vsm--icon {}\r\n.v-sidebar-menu .vsm--arrow {}\r\n.v-sidebar-menu .vsm--arrow_open {}\r\n.v-sidebar-menu .vsm--badge {}\r\n.v-sidebar-menu .vsm--badge_default {}\r\n.v-sidebar-menu .vsm--header {}\r\n.v-sidebar-menu .vsm--dropdown {}\r\n.v-sidebar-menu .vsm--mobile-bg {}\r\n.v-sidebar-menu .vsm--toggle-btn {}\r\n```\r\n\r\nor you can override Sass variables (complete list of all variables can be found in `src/scss/_variables.scss`) and create your own theme\r\n\r\n```scss\r\n@import \"custom-var.scss\";\r\n@import \"vue-sidebar-menu/src/scss/vue-sidebar-menu.scss\";\r\n```\r\n\r\n## Slots\r\n\r\n```html\r\n\r\n \r\n \r\n \r\n \r\n\r\n```\r\n\r\n## Customize link\r\n\r\nby default the component use a customized version of ``, if your are using a 3rd party framework you can customize the link via the use of the `link-component-name` prop.\r\n\r\nthe link component must be registered globally and define item as a prop.\r\n\r\nexample with inertia.js:\r\n\r\n```js\r\nimport { createApp, h } from 'vue'\r\nimport link from '@inertiajs/inertia-vue3/src/link'\r\n\r\nconst customLink = {\r\n name: 'CustomLink',\r\n props: ['item'],\r\n render() {\r\n return h(link, this.$slots.default)\r\n },\r\n watch: {\r\n '$page.url' () {\r\n this.onRouteChange()\r\n }\r\n },\r\n inject: ['onRouteChange']\r\n}\r\n\r\nconst app = createApp(App)\r\napp.component('custom-link', customLink)\r\n```\r\n```html\r\n\r\n```\r\n\r\nNote: the `onRouteChange` function can be injected useful for updating the active state whenever the url change.\r\n","readmeFilename":"README.md"}