Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prabhuignoto/vue-dock-menu
⚓Dockable Menu bar for Vue
https://github.com/prabhuignoto/vue-dock-menu
docakable-menu dock dockable menu menubar menus nested-menus sidebar-menu typescript vue vue-menu vue3
Last synced: 3 days ago
JSON representation
⚓Dockable Menu bar for Vue
- Host: GitHub
- URL: https://github.com/prabhuignoto/vue-dock-menu
- Owner: prabhuignoto
- License: mit
- Created: 2020-09-26T07:06:56.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-02-05T02:28:41.000Z (about 1 year ago)
- Last Synced: 2024-10-13T04:32:18.540Z (4 months ago)
- Topics: docakable-menu, dock, dockable, menu, menubar, menus, nested-menus, sidebar-menu, typescript, vue, vue-menu, vue3
- Language: Vue
- Homepage: https://vue-dock-menu.vercel.app/
- Size: 5.87 MB
- Stars: 278
- Watchers: 5
- Forks: 27
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://dev.azure.com/prabhummurthy/vue-dock-menu/_build/latest?definitionId=8&branchName=master)
[](https://deepscan.io/dashboard#view=project&tid=10074&pid=13372&bid=223016)
[](https://deepsource.io/gh/prabhuignoto/vue-dock-menu/?ref=repository-badge)
[](https://www.codacy.com/manual/prabhuignoto/vue-dock-menu/dashboard?utm_source=github.com&utm_medium=referral&utm_content=prabhuignoto/vue-dock-menu&utm_campaign=Badge_Grade)
[](https://lgtm.com/projects/g/prabhuignoto/vue-dock-menu/context:javascript)
[](https://depfu.com/github/prabhuignoto/vue-dock-menu?project_id=16495)
[](https://snyk.io/test/github/prabhuignoto/vue-dock-menu?targetFile=package.json)
Features
- ⚓ Dock your menu with ease.
- 🤏 Dock the Menubar by dragging and dropping to the edges of the screen.
- 👆 Touch support.
- 👍 Support for nested menus up to any levels.
- 👓 The Menus adjust to any docked position and enables an intuitive menu navigation.
- ⌨ Keyboard Accessible.
- 🎨 Icon support.
- ⚡ Zero dependencies.
- 💪 Built with [Typescript](https://www.typescriptlang.org/).
- 🧰 Intuitive [API](#props) with data driven behavior.
- 🌠 Built with the all new [Vue 3](https://v3.vuejs.org/).
Table of Contents
- [⚡ Installation](#-installation)
- [🚀 Getting Started](#-getting-started)
- [Props](#props)
- [⚓ Dock](#-dock)
- [📡 on-selected](#-on-selected)
- [⚡ Populating Menu](#-populating-menu)
- [🎨 Custom color scheme](#-custom-color-scheme)
- [🎭 Icon support](#-icon-support)
- [What's coming next](#whats-coming-next)
- [📦 Build Setup](#-build-setup)
- [🔨 Contributing](#-contributing)
- [🧱 Built with](#-built-with)
- [📄 Notes](#-notes)
- [Meta](#meta)
## ⚡ Installation
```sh
yarn install vue-dock-menu
```
## 🚀 Getting Started
`vue-dock-menu` has some great defaults. Please check the [prop](#Props) section for all available options.
The following snippet creates a simple Menubar and docks it to the `top` of the page.
```sh
import { DockMenu } from "vue-dock-menu";
import "vue-dock-menu/dist/vue-dock-menu.css";
export default {
name: "example",
components: {
DockMenu
},
data() {
return {
items = [
{
name: "File",
menu: [{ name: "Open"}, {name: "New Window"}, {name: "Exit"}]
},
{
name: "Edit",
menu: [{ name: "Cut"}, {name: "Copy"}, {name: "Paste"}]
}
]
}
}
}
```
## Props
| Name | Description | Default |
|-------------|---------------------------------------------------------------------------------------------------|---------|
| dock | default docking position. Can be any one of `TOP`, `LEFT`, `RIGHT`, `BOTTOM` | `TOP` | |
| on-selected | Callback that will be called on a menu item selection | |
| items | Data for the Menu bar | [] |
| theme | prop to customize the color theme | |
| draggable | enables/disbales dragging on the menubar. | True |
### ⚓ Dock
use the `dock` prop to dock the menubar to your preferred position. The prop can accept the following values `TOP`, `BOTTOM`, `LEFT`, `RIGHT`.
Here we dock the Menu bar to the right side of the screen.
```sh
:items="items"
dock="RIGHT"
```
### 📡 on-selected
The `on-selected` prop is used to retrieve the selected menu item. The callback receives an object with `name` and a `path` property.
- **name** - Name of the selected menu item.
- **path** - Full path of the selected menu item.
if you select the `Copy` menu item under the `Edit` menu, below would be the payload received on the `on-selected` callback.
```sh
{
name: "Copy",
path: "edit>copy"
}
```
### ⚡ Populating Menu
Use the `items` prop to create Simple or Nested menus of your liking.
Here we create a simple Menu structure with 3 Menu items with `Edit` and `Open Recent` having sub menus.
- To include a divider, set an empty item object with just a `isDivider` property set to `true`.
- To disable an item, set `disable` to `true`.
```sh
const items = [
{ name: "New" },
{ isDivider: true },
{
name: "Edit",
menu: {
name: "edit-items",
disable: true
},
},
{ isDivider: true },
{
name: "Open Recent",
menu: {
name: "recent-items",
},
},
{ isDivider: true },
{ name: "Save", disable: true },
{ name: "Save As..." },
{ isDivider: true },
{ name: "Close" },
{ name: "Exit" },
]
```
```sh
:items="items"
dock="BOTTOM"
```
### 🎨 Custom color scheme
use the `theme` prop to customize the colors of the menu bar.
```sh
```
### 🎭 Icon support
Each menu item can be iconified and the component uses slots to inject the icons.
Pass 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.
```sh
export default defineComponent({
name: "MenuExample",
data() {
return {
items: [
{ name: "New File", iconSlot: "file" },
{ name: "New Window", iconSlot: "window" },
]
}
}
})
```
This works seamlessly even for `nested` menu structure. Make sure the `slot ids` match and the component will render the icons appropriately.
```sh
export default defineComponent({
name: "MenuExample",
data() {
return {
items: [
{ name: "New File",
subMenu: [{ name: "New Window", iconSlot: "window" }]},
]
}
}
});
```
## What's coming next
- support for react.
- accordion style rendering on sidebar mode.
## 📦 Build Setup
``` bash
# install dependencies
yarn install
# start dev
yarn run dev
# package lib
npm run rollup
# run css linting
yarn run lint:css
```
## 🔨 Contributing
1. Fork it ( [https://github.com/prabhuignoto/vue-dock-menu/fork](https://github.com/prabhuignoto/vue-dock-menu/fork) )
2. Create your feature branch (`git checkout -b new-feature`)
3. Commit your changes (`git commit -am 'Add feature'`)
4. Push to the branch (`git push origin new-feature`)
5. Create a new Pull Request
## 🧱 Built with
- [Typescript](typescript).
## 📄 Notes
- The project uses [vite](vite) instead of @vue/cli. I choose vite for speed and i also believe [vite](vite) will be the future.
## Meta
Prabhu Murthy – [@prabhumurthy2](https://twitter.com/prabhumurthy2) – [email protected]
[https://www.prabhumurthy.com](https://www.prabhumurthy.com)
Distributed under the MIT license. See `LICENSE` for more information.
[https://github.com/prabhuingoto/](https://github.com/prabhuignoto/)
[vue]: https://vuejs.org
[typescript]: https://typescriptlang.org
[vite]: https://github.com/vitejs/vite