Merge pull request #5 from lacrioque/main

Added provide to bind context in custom Events

Author: Hunlongyu

README.md

@@ -59,22 +59,31 @@ app.vue
   </context-menu>
 
   <div v-contextmenu="{id: '123'}">右键点击区域{id: '123'}</div>
-  <div v-contextmenu="{id: [1, 2, 3]}">右键点击区域{ id: [1, 2, 3]}</div>
+  <div @contextmenu="openContextMenu">右键点击区域{ id: [1, 2, 3]}</div>
 </template>
 
 <script lang="ts">
+
+import { inject } from 'vue'
+
 export default {
   name: 'App',
   setup () {
+    const emitContext = inject('emitContext') as (event: Event, dataId: Record<string, unknown>) => void
+
     function refresh () {
       alert('刷新')
     }
 
+    function openContextMenu (e: any) {
+      emitContext(e, { id: [1, 2, 3] })
+    }
+
     function itemClickEvent (e: any) {
       console.log('停止，自定义id:' + e.id)
     }
 
-    return { refresh, itemClickEvent }
+    return { refresh, itemClickEvent, openContextMenu }
   }
 }
 </script>
@@ -104,6 +113,132 @@ export default {
 
 
 
+## Project setup
+```
+yarn install
+yarn serve
+yarn build
+yarn lint
+```
+
+
+# vue3-contextmenu (ENGLISH TRANSLATION)
+
+English translation (with the help of google translator) !ONLY! 
+
+Right-click menu component for Vue3 writte in Typescript
+
+Official website, documentation and example in chinese (https://hunlongyu.github.io/vue3-contextmenu/) 
+
+### Screenshot
+![vue3-contextmenu.png](https://i.loli.net/2021/01/06/n8JgY9MW5bqeax2.png)
+
+### Installation
+```bash
+$ npm i -S vue3-contextmenu
+
+# or
+
+$ yarn add vue3-contextmenu
+```
+
+### How-To
+
+main.ts
+```js
+import contextmenu from 'vue3-contextmenu'
+import 'vue3-contextmenu/dist/vue3-contextmenu.css'
+app.use(contextmenu)
+```
+
+app.vue
+```html
+<template>
+  <context-menu>
+    <context-menu-submenu :label="'View'">
+      <context-menu-item disabled> Icon </context-menu-item>
+      <context-menu-item> List </context-menu-item>
+      <context-menu-item> Detailed information </context-menu-item>
+    </context-menu-submenu>
+    <context-menu-submenu :label="'Sort by'">
+      <context-menu-item> Name </context-menu-item>
+      <context-menu-item> Date </context-menu-item>
+      <context-menu-item> Type </context-menu-item>
+      <context-menu-item> Size </context-menu-item>
+      <context-menu-item disabled> Duration </context-menu-item>
+    </context-menu-submenu>
+    <context-menu-item @click="refresh" :divider="true"> Refresh </context-menu-item>
+    <context-menu-item @itemClickHandele="itemClickEvent" :divider="true"> Stop </context-menu-item>
+    <context-menu-submenu :label="'Custom'" divider>
+      <context-menu-item> Secondary menu </context-menu-item>
+      <context-menu-submenu :label="'Multi level menu'">
+        <context-menu-item>Three level menu</context-menu-item>
+        <context-menu-item>Nested menu</context-menu-item>
+      </context-menu-submenu>
+    </context-menu-submenu>
+    <context-menu-submenu :label="'New'" divider>
+      <context-menu-item>New file</context-menu-item>
+      <context-menu-item>New folder</context-menu-item>
+      <context-menu-item>Shortcut</context-menu-item>
+    </context-menu-submenu>
+    <context-menu-item :disabled="true">Properties</context-menu-item>
+  </context-menu>
+
+  <div v-contextmenu="{id: '123'}">Right click on area {id: '123'}</div>
+  <div v-contextmenu="{id: [1, 2, 3]}">Right click on area { id: [1, 2, 3]}</div>
+</template>
+
+<script lang="ts">
+
+import { inject } from 'vue'
+
+export default {
+  name: 'App',
+  setup () {
+    const emitContext = inject('emitContext') as (event: Event, dataId: Record<string, unknown>) => void
+
+    function refresh () {
+      alert('refresh')
+    }
+
+    function openContextMenu (e: any) {
+      emitContext(e, { id: [1, 2, 3] })
+    }
+
+    function itemClickEvent (e: any) {
+      console.log('Stop; with id:' + e.id)
+    }
+
+    return { refresh, itemClickEvent, openContextMenu }
+  }
+}
+</script>
+```
+
+### 说明
+
+| 参数     | 说明                 | 类型    | 默认值  |
+| -------- | -------------------- | ------- | ------- |
+| label    | Submenu title text       | String  | `null`  |
+| disabled | Toggle enable_/disable of menu         | Boolean | `false` |
+| divider  | Show dividing line below item | Boolean | `false` |
+| itemClickHandele | Event on element click, contains custom id as event attribute `id´ | any | `undefinded` |
+
+
+Css classes that may be customized
+
+* `v-contextmenu`: Root element
+* `v-contextmenu-item`: contextmenu item
+* `v-contextmenu-item:hover`: contextmenu item, in hovered state
+* `v-contextmenu-item--disabled`: contextmenu item, disabled state
+* `v-contextmenu-divider`: menu divider line
+* `v-contextmenu-submenu-label`: Submenu title
+* `v-contextmenu-submenu-right`: Right arrow in submenu
+* `v-contextmenu-submenu-children`: submenu container
+
+
+
+
 ## Project setup
 ```
 yarn install

docs/css/app.0a01be44.css

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<title>vue3-contextmenu demo</title>
+<script src="./vue3-contextmenu.umd.js"></script>
+
+<link rel="stylesheet" href="./vue3-contextmenu.css">
+
+
+<script>
+console.log(vue3-contextmenu)
+</script>