{"id":24975495,"url":"https://github.com/motla/vue-file-toolbar-menu","last_synced_at":"2025-04-05T22:05:12.447Z","repository":{"id":55655995,"uuid":"268031399","full_name":"motla/vue-file-toolbar-menu","owner":"motla","description":":desktop_computer: UI file/toolbar menus for Vue apps","archived":false,"fork":false,"pushed_at":"2024-01-04T14:33:37.000Z","size":17724,"stargazers_count":149,"open_issues_count":3,"forks_count":32,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T21:03:58.839Z","etag":null,"topics":["application","bar","document","dropdown","file","menu","toolbar","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://motla.github.io/vue-file-toolbar-menu","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/motla.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-05-30T07:32:37.000Z","updated_at":"2025-03-06T13:19:24.000Z","dependencies_parsed_at":"2024-01-07T12:17:26.092Z","dependency_job_id":null,"html_url":"https://github.com/motla/vue-file-toolbar-menu","commit_stats":{"total_commits":56,"total_committers":3,"mean_commits":"18.666666666666668","dds":0.3035714285714286,"last_synced_commit":"45573bc71476b1a52436b1f4c7cd986fe71ee4ad"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motla%2Fvue-file-toolbar-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motla%2Fvue-file-toolbar-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motla%2Fvue-file-toolbar-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motla%2Fvue-file-toolbar-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/motla","download_url":"https://codeload.github.com/motla/vue-file-toolbar-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406085,"owners_count":20933803,"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":["application","bar","document","dropdown","file","menu","toolbar","vue","vuejs"],"created_at":"2025-02-03T21:00:09.091Z","updated_at":"2025-04-05T22:05:12.426Z","avatar_url":"https://github.com/motla.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/motla/vue-file-toolbar-menu/raw/master/img/logo.png\" alt=\"vue-file-toolbar-menu\" width=\"305\"\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/motla/vue-file-toolbar-menu/raw/master/img/preview.png\" width=\"794\"\u003e\n\u003c/div\u003e\n\n## Features\n### :rocket: [See live demo](https://motla.github.io/vue-file-toolbar-menu)\n- Synced menu content (stored in Vue.js computed/data fields, not in `\u003ctemplate\u003e`)\n- Easy styling\n- Add your own custom components for menus and buttons\n- Uses standard [Material Icons](https://material.io/resources/icons/)\n- Hotkey support\n- Touch-device compatible\n- Easy multi-language implementation ([vue-i18n](https://github.com/intlify/vue-i18n-next))\n- Migrated to Vue.js 3.x (to use with Vue 2.x, select library version 1.x)\n\n###### :speech_balloon: If you plan to build a document editor, also check out [vue-document-editor](https://github.com/motla/vue-document-editor)\n\n## Installation\n##### In your Vue.js 3.x project:\n\n```\nnpm install vue-file-toolbar-menu\n```\n\n##### In your Vue.js 2.x project:\n\n```\nnpm install vue-file-toolbar-menu@1\n```\n\n###### :speech_balloon: If you prefer static files, import assets from the `dist` folder\n\n## Basic example\n###### MyComponent.vue\n```Vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e \u003cvue-file-toolbar-menu :content=\"my_menu\" /\u003e \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueFileToolbarMenu from 'vue-file-toolbar-menu'\n\nexport default {\n  components: { VueFileToolbarMenu },\n\n  data () { return { happy: false } },\n\n  computed: {\n    my_menu () {\n      return [\n        { text: \"My Menu\", menu: [\n          { text: \"Item 1\", click: () =\u003e alert(\"Action 1\") },\n          { text: \"Item 2\", click: () =\u003e alert(\"Action 2\") }\n        ] }, {\n          text: \"My Button\",\n          active: this.happy,\n          icon: this.happy ? \"sentiment_very_satisfied\" : \"sentiment_satisfied\",\n          click: () =\u003e { this.happy = !this.happy }\n        }\n      ]\n    }\n  }\n}\n\u003c/script\u003e\n```\nShould render this:\n\n\u003cimg src=\"https://github.com/motla/vue-file-toolbar-menu/raw/master/img/basic-example.png\" width=\"201\"\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003csmall\u003esame example using static files loaded with a CDN (Vue 3)\u003c/small\u003e\u003c/summary\u003e\n\n```HTML\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-file-toolbar-menu@2/dist/VueFileToolbarMenu.umd.min.js\"\u003e\u003c/script\u003e\n  \u003clink href=\"https://cdn.jsdelivr.net/npm/vue-file-toolbar-menu@2/dist/VueFileToolbarMenu.css\" rel=\"stylesheet\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-file-toolbar-menu :content=\"my_menu\" /\u003e\n  \u003c/div\u003e\n  \u003cscript\u003e\n  const app = Vue.createApp({\n    components: { VueFileToolbarMenu },\n\n    data () { return { happy: false } },\n\n    computed: {\n      my_menu () {\n        return [\n          { text: \"My Menu\", menu: [\n            { text: \"Item 1\", click: () =\u003e alert(\"Action 1\") },\n            { text: \"Item 2\", click: () =\u003e alert(\"Action 2\") }\n          ] }, {\n            text: \"My Button\",\n            active: this.happy,\n            icon: this.happy ? \"sentiment_very_satisfied\" : \"sentiment_satisfied\",\n            click: () =\u003e { this.happy = !this.happy }\n          }\n        ]\n      }\n    }\n  }).mount('#app');\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\u003csmall\u003esame example using static files loaded with a CDN (Vue 2)\u003c/small\u003e\u003c/summary\u003e\n\n```HTML\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-file-toolbar-menu@1/dist/VueFileToolbarMenu.umd.min.js\"\u003e\u003c/script\u003e\n  \u003clink href=\"https://cdn.jsdelivr.net/npm/vue-file-toolbar-menu@1/dist/VueFileToolbarMenu.css\" rel=\"stylesheet\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-file-toolbar-menu :content=\"my_menu\" /\u003e\n  \u003c/div\u003e\n  \u003cscript\u003e\n  var app = new Vue({\n    el: '#app',\n    components: { VueFileToolbarMenu },\n\n    data () { return { happy: false } },\n\n    computed: {\n      my_menu () {\n        return [\n          { text: \"My Menu\", menu: [\n            { text: \"Item 1\", click: () =\u003e alert(\"Action 1\") },\n            { text: \"Item 2\", click: () =\u003e alert(\"Action 2\") }\n          ] }, {\n            text: \"My Button\",\n            active: this.happy,\n            icon: this.happy ? \"sentiment_very_satisfied\" : \"sentiment_satisfied\",\n            click: () =\u003e { this.happy = !this.happy }\n          }\n        ]\n      }\n    }\n  })\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003c/details\u003e\n\n## Complete example\nSee the [Demo.vue](src/Demo/Demo.vue) file corresponding to the [live demo](https://motla.github.io/vue-file-toolbar-menu). **:blue_book: Also read the [API](API.md)**.\n\n## Styling\n\nStyling can be done either by writing CSS variables or by overloading CSS properties using [`!important`](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_!important_exception).\n\n**:blue_book: Check the CSS variables list and default values in the [stylesheet](src/Bar/Bar.vue#L70).**\n\n###### :speech_balloon: If you need some variables that are missing, edit the stylesheet then submit a PR.\n\n#### Some styling examples:\n\n- #### Docs-like theme:\n\n\u003cimg src=\"https://github.com/motla/vue-file-toolbar-menu/raw/master/img/docs-theme.png\" width=\"319\"\u003e\n\u003cdetails\u003e\u003csummary\u003eView specific CSS variables for this theme\u003c/summary\u003e\n\n```css\n:root {\n  --bar-font-color: rgb(32, 33, 36);\n  --bar-font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;\n  --bar-font-size: 15px;\n  --bar-font-weight: 500;\n  --bar-letter-spacing: 0.2px;\n  --bar-padding: 3px;\n  --bar-button-icon-size: 20px;\n  --bar-button-padding: 4px 6px;\n  --bar-button-radius: 4px;\n  --bar-button-hover-bkg: rgb(241, 243, 244);\n  --bar-button-active-color: rgb(26, 115, 232);\n  --bar-button-active-bkg: rgb(232, 240, 254);\n  --bar-button-open-color: rgb(32, 33, 36);\n  --bar-button-open-bkg: rgb(232, 240, 254);\n  --bar-menu-bkg: white;\n  --bar-menu-border-radius: 0 0 3px 3px;\n  --bar-menu-item-chevron-margin: 0;\n  --bar-menu-item-hover-bkg: rgb(241, 243, 244);\n  --bar-menu-item-padding: 5px 8px 5px 35px;\n  --bar-menu-item-icon-size: 15px;\n  --bar-menu-item-icon-margin: 0 9px 0 -25px;\n  --bar-menu-padding: 6px 1px;\n  --bar-menu-shadow: 0 2px 6px 2px rgba(60, 64, 67, 0.15);\n  --bar-menu-separator-height: 1px;\n  --bar-menu-separator-margin: 5px 0 5px 34px;\n  --bar-menu-separator-color: rgb(227, 229, 233);\n  --bar-separator-color: rgb(218, 220, 224);\n  --bar-separator-width: 1px;\n  --bar-sub-menu-border-radius: 3px;\n}\n```\n\u003c/details\u003e\n\n- #### macOS-like theme:\n\u003cimg src=\"https://github.com/motla/vue-file-toolbar-menu/raw/master/img/macos-theme.png\" width=\"332\"\u003e\n\u003cdetails\u003e\n\u003csummary\u003eView specific CSS variables for this theme\u003c/summary\u003e\n\n```css\n:root {\n  --bar-font-color: rgba(0, 0, 0, 0.75);\n  --bar-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  --bar-font-size: 15.5px;\n  --bar-button-icon-size: 20px;\n  --bar-button-padding: 4px 7px 5px 7px;\n  --bar-button-radius: 0;\n  --bar-button-hover-bkg: none;\n  --bar-button-active-color: white;\n  --bar-button-active-bkg: rgba(41, 122, 255, 0.9);\n  --bar-button-open-color: white;\n  --bar-button-open-bkg: rgba(41, 122, 255, 0.9);\n  --bar-menu-bkg: rgba(255, 255, 255, 0.95);\n  --bar-menu-backdrop-filter: saturate(180%) blur(20px);\n  --bar-menu-backdrop-filter-bkg: rgba(255, 255, 255, 0.3);\n  --bar-menu-border: solid 1px #BBB;\n  --bar-menu-border-radius: 0 0 6px 6px;\n  --bar-menu-item-chevron-margin: 0;\n  --bar-menu-item-hover-color: white;\n  --bar-menu-item-hover-bkg: rgba(41, 122, 255, 0.9);\n  --bar-menu-item-padding: 1px 12px 2px 25px;\n  --bar-menu-item-icon-size: 16px;\n  --bar-menu-item-icon-margin: 0 4px 0 -20px;\n  --bar-menu-padding: 3px 0;\n  --bar-menu-shadow: 0 6px 13px 0 rgba(60, 60, 60, 0.4);\n  --bar-menu-separator-height: 2px;\n  --bar-menu-separator-margin: 5px 0;\n  --bar-menu-separator-color: rgba(0, 0, 0, 0.08);\n  --bar-separator-color: rgba(0, 0, 0, 0.1);\n  --bar-separator-width: 2px;\n  --bar-separator-margin: 5px 7px;\n  --bar-sub-menu-border-radius: 6px;\n}\n```\n\u003c/details\u003e\n\n## Project development\n- `npm run serve` compiles, serves and hot-reloads demo for development\n- `npm run build` compiles and minifies production files and demo\n\n## Dependencies\n- [hotkeys-js](https://github.com/jaywcjlove/hotkeys) by Kenny Wong, MIT License\n- [material-icons](https://github.com/marella/material-icons) by Ravindra Marella and Google, Apache-2.0 License\n- [node-emoji](https://github.com/omnidan/node-emoji) by Daniel Bugl, MIT License\n- [vue-color](https://github.com/xiaokaike/vue-color) by xiaokaike, MIT License\n\n## Licensing\nCopyright (c) 2020 Romain Lamothe, [MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmotla%2Fvue-file-toolbar-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmotla%2Fvue-file-toolbar-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmotla%2Fvue-file-toolbar-menu/lists"}