@everchron/ec-shards 4.4.1 → 4.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "4.4.1",
+  "version": "4.4.2",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/context-menu/context-menu.vue

@@ -48,6 +48,16 @@ export default {
     /** If passed, an icon will appear. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
     icon: {
       type: String
+    },
+    /** Use the offset of the context menu appears in a scrollable container which does not start at the very top of the browser window. For example, pass the pixel height value of the everchron navigation bar and toolbar. */
+    offsetTop: {
+      type: Number,
+      default: 0
+    },
+    /** Use the offset of the context menu appears in a scrollable container which does not start at the very left of the browser window. For example, pass the pixel width value of a left hand sidebar. */
+    offsetLeft: {
+      type: Number,
+      default: 0
     }
   },
 
@@ -86,17 +96,16 @@ export default {
       }
 
       if (this.menuWidth + event.pageX >= window.innerWidth) {
-        this.left = event.pageX - this.menuWidth + 2
+        this.left = event.pageX - this.menuWidth + 2 - this.offsetLeft
       } else {
-        this.left = event.pageX - 2
+        this.left = event.pageX - 2 - this.offsetLeft
       }
 
       if (this.menuHeight + event.pageY >= window.innerHeight) {
-        this.top = event.pageY - this.menuHeight + 2
+        this.top = event.pageY - this.menuHeight + 2 - this.offsetTop
       } else {
-        this.top = event.pageY - 2
+        this.top = event.pageY - 2 - this.offsetTop
       }
-
       this.opened = true
     },
 

package/src/stories/context-menu/context-menu.stories.js

@@ -21,7 +21,7 @@ export const contextMenu = () => ({
                   <ecs-data-grid-head-cell name="Fourth" :width="200" />
                 </template>
 
-                <ecs-data-grid-row v-for="index in 6" :key="index" mouse-event="contextmenu" @click="(e) => handleClick(e, index)">
+                <ecs-data-grid-row v-for="index in 60" :key="index" mouse-event="contextmenu" @click="(e) => handleClick(e, index)">
                   <ecs-data-grid-cell column="first" :width="200">Right click me</ecs-data-grid-cell>
                   <ecs-data-grid-cell column="second" :width="200">Right click me</ecs-data-grid-cell>
                   <ecs-data-grid-cell column="third" :width="200">Right click me</ecs-data-grid-cell>
@@ -63,6 +63,7 @@ export const contextMenu = () => ({
   },
   methods: {
     handleClick(event, item) {
+      console.log(this.$refs)
       this.$refs.contextMenu.showMenu(event, item)
     }
   },