Merge pull request #12 from prabhuignoto/disable-menu-items

🔒 disable menu items

.deepsource.toml

@@ -0,0 +1,11 @@
+version = 1
+
+[[analyzers]]
+name = "javascript"
+enabled = true
+
+  [analyzers.meta]
+  environment = ["browser"]
+  plugins = ["vue"]
+  style_guide = "standard"
+  dialect = "typescript"

README.md

@@ -8,7 +8,7 @@
   [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/prabhuignoto/vue-dock-menu.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/prabhuignoto/vue-dock-menu/context:javascript)
   [![Depfu](https://badges.depfu.com/badges/f3a16c4fe1fcbd36df15d6949d9846bc/overview.svg)](https://depfu.com/github/prabhuignoto/vue-dock-menu?project_id=16495)
   [![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)
-  ![https://badgen.net/bundlephobia/min/vue-dock-menu](https://badgen.net/bundlephobia/min/vue-dock-menu)
+  ![https://badgen.net/bundlephobia/minzip/vue-dock-menu](https://badgen.net/bundlephobia/minzip/vue-dock-menu)
 
   ![demo](./readme-assets/demo-small.gif)
 
@@ -135,21 +135,33 @@ 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" },
 ]
 ```
 
@@ -181,7 +193,6 @@ use the `theme` prop to customize the colors of the menu bar.
 
 ## What's coming next
 
-- keyboard accessibility.
 - support for react.
 - support for icons in the menu.
 - accordion style rendering on sidebar mode.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-dock-menu",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
   "author": "Prabhu Murthy",
   "description": "Dockable menu bar for Vue 3",
@@ -40,28 +40,28 @@
     "focus-visible": "^5.2.0"
   },
   "devDependencies": {
-    "@interactjs/types": "^1.10.0",
+    "@interactjs/types": "^1.10.1",
     "@rollup/plugin-beep": "^0.2.0",
     "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^16.0.0",
-    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
     "@rollup/plugin-sucrase": "^3.1.0",
-    "@typescript-eslint/eslint-plugin": "^4.8.2",
-    "@typescript-eslint/parser": "^4.8.2",
-    "@vue/compiler-sfc": "^3.0.2",
+    "@typescript-eslint/eslint-plugin": "^4.9.0",
+    "@typescript-eslint/parser": "^4.9.0",
+    "@vue/compiler-sfc": "^3.0.3",
     "eslint": "^7.14.0",
     "eslint-plugin-vue": "^7.1.0",
     "husky": "^4.3.0",
-    "lint-staged": "^10.5.1",
-    "rollup": "^2.33.3",
+    "lint-staged": "^10.5.2",
+    "rollup": "^2.34.0",
     "rollup-plugin-scss": "^2.6.1",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue": "^6.0.0-beta.11",
+    "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.29.0",
     "stylelint": "^13.8.0",
     "stylelint-config-standard": "^20.0.0",
     "typescript": "^4.1.2",
-    "vite": "^1.0.0-rc.9",
+    "vite": "^1.0.0-rc.13",
     "vue": "^3.0.2"
   },
   "peerDependencies": {},

rollup.config.js

@@ -42,7 +42,6 @@ export default {
       name: "FloatMenu",
       globals: {
         vue: "vue",
-        nanoid: "nanoid",
       },
     },
   ],
@@ -59,5 +58,5 @@ export default {
     resolve(),
     terser()
   ],
-  external: ["vue", "nanoid"],
+  external: ["vue"],
 };

src/components/HelloWorld.vue

@@ -63,7 +63,7 @@ export default defineComponent({
             },
             { name: "Open Workspace" },
             { isDivider: true },
-            { name: "Save" },
+            { name: "Save", disable: true },
             { name: "Save As..." },
             { isDivider: true },
             { name: "Close" },

src/components/Menu.vue

@@ -29,6 +29,7 @@
             'is-parent': !!item.menu,
             highlight: index === highlightedIndex,
             divider: item.isDivider,
+            disable: item.disable,
           },
         ]"
         :style="menuItemStyle"
@@ -38,6 +39,7 @@
             event: $event,
             name: item.name,
             isParent: !!item.menu,
+            disable: item.disable,
           })
         "
       >
@@ -161,6 +163,10 @@ export default defineComponent({
       selectedItem.event.stopPropagation();
       selectedItem.event.preventDefault();
 
+      if (selectedItem.disable) {
+        return;
+      }
+
       if (selectedItem.isParent) {
         showSubMenu.value = !showSubMenu.value;
         return;

src/components/menu.scss

@@ -81,6 +81,10 @@
       transform: rotate(180deg);
     }
   }
+
+  &.disable {
+    filter: opacity(0.5);
+  }
 }
 
 .sub-menu-wrapper {

src/models/SelectedItemModel.ts

@@ -3,4 +3,5 @@ export interface SelectedItemModel {
   path: string;
   event: MouseEvent | KeyboardEvent;
   isParent?: boolean;
+  disable?: boolean;
 }