feat(UI): Introducing new component to apply a custom cursor to a spe…

…cific area of the DOM (#125)

components/ui/CustomCursorArea/CustomCursorArea.html

@@ -0,0 +1,4 @@
+<div id="custom-cursor-area" @mouseover="hideCursor = false" @mouseleave="hideCursor = true">
+    <div v-if="!hideCursor" id="custom-cursor" ref="point" :style="cursorPoint"></div>
+    <slot />
+</div>

components/ui/CustomCursorArea/CustomCursorArea.less

@@ -0,0 +1,33 @@
+#custom-cursor {
+  top: 0;
+  left: 0;
+  position: fixed;
+  width: 30px;
+  height: 30px;
+  pointer-events: none;
+  user-select: none;
+  border-radius: 100%;
+  z-index: 55555555;
+  backface-visibility: hidden;
+  will-change: transform;
+  box-shadow: 0 0 8px #fff, inset 0 0 8px #fff;
+  -webkit-animation: pulse 2s linear 1s infinite;
+  background: -webkit-radial-gradient(
+    rgba(255, 255, 255, 0.2),
+    rgba(255, 255, 255, 0.4),
+    rgba(255, 255, 255, 0.7)
+  );
+  opacity: 0.4;
+}
+
+@-webkit-keyframes pulse {
+  0% {
+    box-shadow: 0 0 8px #fff, inset 0 0 8px #fff;
+  }
+  50% {
+    box-shadow: 0 0 20px #fff, inset 0 0 18px #fff;
+  }
+  100% {
+    box-shadow: 0 0 8px #fff, inset 0 0 8px #fff;
+  }
+}

components/ui/CustomCursorArea/CustomCursorArea.vue

@@ -0,0 +1,31 @@
+<template src="./CustomCursorArea.html"></template>
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  data() {
+    return { xChild: 0, yChild: 0, xParent: 0, yParent: 0, hideCursor: true }
+  },
+  computed: {
+    cursorPoint(): string {
+      return `transform: translateX(${this.xChild - 15}px) translateY(${
+        this.yChild - 15
+      }px) translateZ(0) translate3d(0, 0, 0);`
+    },
+  },
+  methods: {
+    moveCursor(e: Event | any) {
+      this.xChild = e.clientX
+      this.yChild = e.clientY
+      setTimeout(() => {
+        this.xParent = e.clientX - 15
+        this.yParent = e.clientY - 15
+      }, 1000)
+    },
+  },
+  mounted() {
+    document.addEventListener('mousemove', this.moveCursor)
+  },
+})
+</script>
+<style scoped lang="less" src="./CustomCursorArea.less"></style>