{"id":13407006,"url":"https://github.com/prabhuignoto/vue-dock-menu","last_synced_at":"2025-04-05T08:07:56.064Z","repository":{"id":37826256,"uuid":"298758009","full_name":"prabhuignoto/vue-dock-menu","owner":"prabhuignoto","description":"⚓Dockable Menu bar for Vue","archived":false,"fork":false,"pushed_at":"2024-02-05T02:28:41.000Z","size":6156,"stargazers_count":278,"open_issues_count":13,"forks_count":27,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-13T04:32:18.540Z","etag":null,"topics":["docakable-menu","dock","dockable","menu","menubar","menus","nested-menus","sidebar-menu","typescript","vue","vue-menu","vue3"],"latest_commit_sha":null,"homepage":"https://vue-dock-menu.vercel.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prabhuignoto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"prabhuignoto","ko_fi":"prabhuignoto","custom":["paypal.me/prabhuignoto","https://www.buymeacoffee.com/prabhuignoto"]}},"created_at":"2020-09-26T07:06:56.000Z","updated_at":"2024-10-12T01:50:15.000Z","dependencies_parsed_at":"2024-01-18T23:05:42.854Z","dependency_job_id":"7a0db027-0689-4a33-824b-6856ab0c90e5","html_url":"https://github.com/prabhuignoto/vue-dock-menu","commit_stats":{"total_commits":145,"total_committers":4,"mean_commits":36.25,"dds":0.05517241379310345,"last_synced_commit":"199dd3987e51108b65c14ded2e91e7cbd7eb29f7"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Fvue-dock-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Fvue-dock-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Fvue-dock-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Fvue-dock-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prabhuignoto","download_url":"https://codeload.github.com/prabhuignoto/vue-dock-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305934,"owners_count":20917208,"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":["docakable-menu","dock","dockable","menu","menubar","menus","nested-menus","sidebar-menu","typescript","vue","vue-menu","vue3"],"created_at":"2024-07-30T19:02:45.598Z","updated_at":"2025-04-05T08:07:56.035Z","avatar_url":"https://github.com/prabhuignoto.png","language":"Vue","funding_links":["https://github.com/sponsors/prabhuignoto","https://ko-fi.com/prabhuignoto","paypal.me/prabhuignoto","https://www.buymeacoffee.com/prabhuignoto"],"categories":["Vue"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  ![logo](./readme-assets/social-logo-small.png)\n\n  [![Build Status](https://dev.azure.com/prabhummurthy/vue-dock-menu/_apis/build/status/prabhuignoto.vue-dock-menu?branchName=master)](https://dev.azure.com/prabhummurthy/vue-dock-menu/_build/latest?definitionId=8\u0026branchName=master)\n  [![DeepScan grade](https://deepscan.io/api/teams/10074/projects/13372/branches/223016/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=10074\u0026pid=13372\u0026bid=223016)\n  [![DeepSource](https://deepsource.io/gh/prabhuignoto/vue-dock-menu.svg/?label=active+issues)](https://deepsource.io/gh/prabhuignoto/vue-dock-menu/?ref=repository-badge)\n  [![Codacy Badge](https://app.codacy.com/project/badge/Grade/65c2863c31644d5a98ae5bb83c1bd104)](https://www.codacy.com/manual/prabhuignoto/vue-dock-menu/dashboard?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=prabhuignoto/vue-dock-menu\u0026amp;utm_campaign=Badge_Grade)\n  [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/prabhuignoto/vue-dock-menu.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/prabhuignoto/vue-dock-menu/context:javascript)\n  [![Depfu](https://badges.depfu.com/badges/f3a16c4fe1fcbd36df15d6949d9846bc/overview.svg)](https://depfu.com/github/prabhuignoto/vue-dock-menu?project_id=16495)\n  [![Known Vulnerabilities](https://snyk.io/test/github/prabhuignoto/vue-dock-menu/badge.svg?targetFile=package.json)](https://snyk.io/test/github/prabhuignoto/vue-dock-menu?targetFile=package.json)\n  ![https://badgen.net/bundlephobia/minzip/vue-dock-menu](https://badgen.net/bundlephobia/minzip/vue-dock-menu)\n\n  ![demo](./readme-assets/demo.gif)\n\n\u003c/div\u003e\n\n\u003ch2\u003eFeatures\u003c/h2\u003e\n\n- ⚓ \u0026nbsp;Dock your menu with ease.\n- 🤏 \u0026nbsp;Dock the Menubar by dragging and dropping to the edges of the screen.\n- 👆 \u0026nbsp;Touch support.\n- 👍 \u0026nbsp;Support for nested menus up to any levels.\n- 👓\u0026nbsp; The Menus adjust to any docked position and enables an intuitive menu navigation.\n- ⌨\u0026nbsp; Keyboard Accessible.\n- 🎨\u0026nbsp; Icon support.\n- ⚡\u0026nbsp; Zero dependencies.\n- 💪\u0026nbsp; Built with [Typescript](https://www.typescriptlang.org/).\n- 🧰\u0026nbsp; Intuitive [API](#props) with data driven behavior.\n- 🌠\u0026nbsp; Built with the all new [Vue 3](https://v3.vuejs.org/).\n  \n\u003ch2\u003eTable of Contents\u003c/h2\u003e\n\n- [⚡ Installation](#-installation)\n- [🚀 Getting Started](#-getting-started)\n- [Props](#props)\n  - [⚓ Dock](#-dock)\n  - [📡 on-selected](#-on-selected)\n  - [⚡ Populating Menu](#-populating-menu)\n  - [🎨 Custom color scheme](#-custom-color-scheme)\n  - [🎭 Icon support](#-icon-support)\n- [What's coming next](#whats-coming-next)\n- [📦 Build Setup](#-build-setup)\n- [🔨 Contributing](#-contributing)\n- [🧱 Built with](#-built-with)\n- [📄 Notes](#-notes)\n- [Meta](#meta)\n\n## ⚡ Installation\n\n```sh\nyarn install vue-dock-menu\n```\n\n## 🚀 Getting Started\n\n`vue-dock-menu` has some great defaults. Please check the [prop](#Props) section for all available options.\n\nThe following snippet creates a simple Menubar and docks it to the `top` of the page.\n\n```sh\n\u003ctemplate\u003e\n  \u003cvue-dock-menu :items=\"items\"\u003e\n  \u003c/vue-dock-menu\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { DockMenu } from \"vue-dock-menu\";\nimport \"vue-dock-menu/dist/vue-dock-menu.css\";\n\nexport default {\n  name: \"example\",\n  components: {\n    DockMenu\n  },\n  data() {\n    return {\n      items = [\n        {\n          name: \"File\",\n          menu: [{ name: \"Open\"}, {name: \"New Window\"}, {name: \"Exit\"}]\n        },\n        {\n          name: \"Edit\",\n          menu: [{ name: \"Cut\"}, {name: \"Copy\"}, {name: \"Paste\"}]\n        }\n      ]\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n![sample1](./readme-assets/sample1.png)\n\n## Props\n\n| Name        | Description                                                                                       | Default |\n|-------------|---------------------------------------------------------------------------------------------------|---------|\n| dock        | default docking position. Can be any one of `TOP`, `LEFT`, `RIGHT`, `BOTTOM` | `TOP`              |         |\n| on-selected | Callback that will be called on a menu item selection                                             |         |\n| items       | Data for the Menu bar                                                                             | []      |\n| theme       | prop to customize the color theme                                                                 |         |\n| draggable   | enables/disbales dragging on the menubar.                                                         | True    |\n\n### ⚓ Dock\n\nuse the `dock` prop to dock the menubar to your preferred position. The prop can accept the following values `TOP`, `BOTTOM`, `LEFT`, `RIGHT`.\n\nHere we dock the Menu bar to the right side of the screen.\n\n```sh\n\u003cvue-dock-menu\u003e\n  :items=\"items\"\n  dock=\"RIGHT\"\n\u003c/vue-dock-menu\u003e\n```\n\n### 📡 on-selected\n\nThe `on-selected` prop is used to retrieve the selected menu item. The callback receives an object with `name` and a `path` property.\n\n- **name** - Name of the selected menu item.\n- **path** - Full path of the selected menu item.\n\nif you select the `Copy` menu item under the `Edit` menu, below would be the payload received on the `on-selected` callback.\n\n```sh\n{\n  name: \"Copy\",\n  path: \"edit\u003ecopy\"\n}\n```\n\n### ⚡ Populating Menu\n\nUse the `items` prop to create Simple or Nested menus of your liking.\n\nHere we create a simple Menu structure with 3 Menu items with `Edit` and `Open Recent` having sub menus.\n\n- To include a divider, set an empty item object with just a `isDivider` property set to `true`.\n- To disable an item, set `disable` to `true`.\n\n```sh\nconst items = [\n  { name: \"New\" },\n  { isDivider: true },\n  {\n    name: \"Edit\",\n    menu: {\n      name: \"edit-items\",\n      disable:  true\n    },\n  },\n  { isDivider: true },\n  {\n    name: \"Open Recent\",\n    menu: {\n      name: \"recent-items\",\n    },\n  },\n  { isDivider: true },\n  { name: \"Save\", disable: true },\n  { name: \"Save As...\" },\n  { isDivider: true },\n  { name: \"Close\" },\n  { name: \"Exit\" },\n]\n```\n\n```sh\n  \u003cvue-dock-menu\u003e\n    :items=\"items\"\n    dock=\"BOTTOM\"\n  \u003c/vue-dock-menu\u003e\n```\n\n### 🎨 Custom color scheme\n\nuse the `theme` prop to customize the colors of the menu bar.\n\n```sh\n  \u003cmenu-bar\n    :items=\"items\"\n    :on-selected=\"selected\"\n    :theme=\"{\n      primary: '#001B48',\n      secondary: '#02457a',\n      tertiary: '#018abe',\n      textColor: '#fff'\n    }\"\n  /\u003e\n```\n\n![theme](./readme-assets/theme.png)\n\n### 🎭 Icon support\n\nEach menu item can be iconified and the component uses slots to inject the icons.\n\nPass individual icons (or images) as templates marked with a unique `slot id`. please make sure the `ids` match the  `iconSlot` property in the items array.\n\n```sh\n\u003cmenu-bar\n  :items=\"items\"\n  :on-selected=\"selected\"\n\u003e\n  \u003ctemplate #file\u003e\n    \u003cimg\n      src=\"../assets/file.svg\"\n      alt=\"file\"\n      :style=\"style\"\n    \u003e\n  \u003c/template\u003e\n  \u003ctemplate #window\u003e\n    \u003cimg\n      src=\"../assets/window-maximize.svg\"\n      alt=\"file\"\n      :style=\"style\"\n    \u003e\n  \u003c/template\u003e\n\u003c/menu-bar\u003e\n\nexport default defineComponent({\n  name: \"MenuExample\",\n  data()  {\n    return {\n      items: [\n        { name: \"New File\", iconSlot: \"file\" },\n        { name: \"New Window\", iconSlot: \"window\" },\n      ]\n    }\n  }\n})\n```\n\n![menu-icon](./readme-assets/menu-icon.png)\n\nThis works seamlessly even for `nested` menu structure. Make sure the `slot ids` match and the component will render the icons appropriately.\n\n```sh\n\u003cmenu-bar\n  :items=\"items\"\n  :on-selected=\"selected\"\n\u003e\n  \u003ctemplate #window\u003e\n    \u003cimg\n      src=\"../assets/window-maximize.svg\"\n      alt=\"file\"\n      :style=\"style\"\n    \u003e\n  \u003c/template\u003e\n\u003c/menu-bar\u003e\n\nexport default defineComponent({\n  name: \"MenuExample\",\n  data()  {\n    return {\n      items: [\n        { name: \"New File\",\n        subMenu: [{ name: \"New Window\", iconSlot: \"window\" }]},\n      ]\n    }\n  }\n});\n```\n\n## What's coming next\n\n- support for react.\n- accordion style rendering on sidebar mode.\n\n## 📦 Build Setup\n\n``` bash\n# install dependencies\nyarn install\n\n# start dev\nyarn run dev\n\n# package lib\nnpm run rollup\n\n# run css linting\nyarn run lint:css\n```\n\n## 🔨 Contributing\n\n1. Fork it ( [https://github.com/prabhuignoto/vue-dock-menu/fork](https://github.com/prabhuignoto/vue-dock-menu/fork) )\n2. Create your feature branch (`git checkout -b new-feature`)\n3. Commit your changes (`git commit -am 'Add feature'`)\n4. Push to the branch (`git push origin new-feature`)\n5. Create a new Pull Request\n\n## 🧱 Built with\n\n- [Typescript](typescript).\n\n## 📄 Notes\n\n- The project uses [vite](vite) instead of @vue/cli. I choose vite for speed and i also believe [vite](vite) will be the future.\n\n## Meta\n\nPrabhu Murthy – [@prabhumurthy2](https://twitter.com/prabhumurthy2) – prabhu.m.murthy@gmail.com\n\n[https://www.prabhumurthy.com](https://www.prabhumurthy.com)\n\nDistributed under the MIT license. See `LICENSE` for more information.\n\n[https://github.com/prabhuingoto/](https://github.com/prabhuignoto/)\n\n[vue]: https://vuejs.org\n[typescript]: https://typescriptlang.org\n[vite]: https://github.com/vitejs/vite\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprabhuignoto%2Fvue-dock-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprabhuignoto%2Fvue-dock-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprabhuignoto%2Fvue-dock-menu/lists"}