Code restructure (#1)

src/index.js

@@ -0,0 +1,3 @@
+import VueContext from './vue-context';
+
+export { VueContext };

src/vue-context.vue

@@ -0,0 +1,126 @@
+<template>
+	<div class="v-context"
+		 v-show="show"
+		 :style="style"
+		 tabindex="-1"
+		 @blur="close"
+		 @click="close"
+		 @contextmenu.capture.prevent
+	>
+		<slot :data="data"></slot>
+	</div>
+</template>
+
+<script>
+	export default {
+		computed: {
+			/**
+			 * Generate the CSS styles for positioning the context menu.
+			 *
+			 * @returns {object|null}
+			 */
+		    style () {
+		        return this.show
+			        ? { top: `${this.top}px`, left: `${this.left}px` }
+			        : null;
+		    },
+		},
+
+		data () {
+		    return {
+		        top: null,
+			    left: null,
+			    show: false,
+			    data: null
+		    };
+		},
+
+		methods: {
+			/**
+			 * Close the context menu.
+			 */
+		    close () {
+		        this.top = null;
+		        this.left = null;
+		        this.data = null;
+		        this.show = false;
+		    },
+
+			/**
+			 * Open the context menu.
+			 *
+			 * @param {Event} event
+			 * @param {object} data
+			 */
+			open (event, data) {
+				this.data = data;
+				this.show = true;
+
+				this.$nextTick(() => {
+					this.positionMenu(event.clientY, event.clientX);
+					this.$el.focus();
+				});
+			},
+
+			/**
+			 * Set the context menu top and left positions.
+			 *
+			 * @param {number} top
+			 * @param {number} left
+			 */
+			positionMenu (top, left) {
+			    const largestHeight = window.innerHeight - this.$el.offsetHeight - 25;
+			    const largestWidth = window.innerWidth - this.$el.offsetWidth - 25;
+
+			    if (top > largestHeight) {
+			    	top = largestHeight;
+			    }
+
+			    if (left > largestWidth) {
+			    	left = largestWidth;
+			    }
+
+			    this.top = top;
+			    this.left = left;
+			}
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	$blue600: #1e88e5;
+	$gray74: #bdbdbd;
+	$gray93: #ededed;
+	$gray98: #fafafa;
+
+	.v-context {
+		background: $gray98;
+		border: 1px solid $gray74;
+		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+		display: block;
+		margin: 0;
+		padding: 0;
+		position: fixed;
+		width: 250px;
+		z-index: 99999;
+
+		ul {
+			list-style: none;
+			padding: 10px 0;
+			margin: 0;
+			font-size: 12px;
+			font-weight: 600;
+
+			li {
+				margin: 0;
+				padding: 10px 35px;
+				cursor: pointer;
+
+				&:hover {
+					background: $blue600;
+					color: $gray98;
+				}
+			}
+		}
+	}
+</style>