chore: upgrade packages

Author: prabhuignoto

azure-pipelines.yml

@@ -12,7 +12,7 @@ pool:
 steps:
 - task: NodeTool@0
   inputs:
-    versionSpec: '12.x'
+    versionSpec: '14.x'
   displayName: 'Install Node.js'
 
 - script: |

package.json

@@ -46,34 +46,34 @@
   },
   "devDependencies": {
     "@rollup/plugin-beep": "^0.2.0",
-    "@rollup/plugin-node-resolve": "^13.2.0",
-    "@rollup/plugin-sucrase": "^4.0.3",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-sucrase": "^4.0.4",
     "@rollup/plugin-typescript": "^8.3.2",
-    "@typescript-eslint/eslint-plugin": "^5.19.0",
-    "@typescript-eslint/parser": "^5.19.0",
-    "@vitejs/plugin-vue": "^2.3.1",
-    "@vue/compiler-sfc": "^3.2.32",
-    "eslint": "^8.13.0",
-    "eslint-plugin-vue": "^8.6.0",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.3.7",
-    "postcss": "^8.4.12",
-    "postcss-html": "^1.3.1",
-    "postcss-scss": "^4.0.3",
-    "rollup": "^2.70.1",
+    "@typescript-eslint/eslint-plugin": "^5.26.0",
+    "@typescript-eslint/parser": "^5.26.0",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vue/compiler-sfc": "^3.2.36",
+    "eslint": "^8.16.0",
+    "eslint-plugin-vue": "^9.0.1",
+    "husky": "^8.0.1",
+    "lint-staged": "^12.4.2",
+    "postcss": "^8.4.14",
+    "postcss-html": "^1.4.1",
+    "postcss-scss": "^4.0.4",
+    "rollup": "^2.75.3",
     "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0",
-    "sass": "^1.50.0",
-    "stylelint": "^14.6.1",
-    "stylelint-config-standard": "^23.0.0",
-    "tslib": "^2.3.1",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.4",
-    "vue": "^3.2.32",
+    "sass": "^1.52.1",
+    "stylelint": "^14.8.5",
+    "stylelint-config-standard": "^25.0.0",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.2",
+    "vite": "^2.9.9",
+    "vue": "^3.2.36",
     "vue-float-menu": "^1.9.1"
   },
   "peerDependencies": {

src/components/Menu.scss

@@ -42,7 +42,7 @@
   }
 
   &.disabled {
-    opacity: 45%;
+    opacity: 0.45;
   }
 }
 
@@ -149,7 +149,7 @@
   }
 
   &.selected {
-    background-color: transparentize(#cccc, 0.5);
+    background-color: rgba(#cccc, 0.5);
   }
 
   &.highlight {
@@ -196,10 +196,10 @@
 
 @keyframes show {
   0% {
-    opacity: 0%;
+    opacity: 0;
   }
 
   100% {
-    opacity: 100%;
+    opacity: 1;
   }
 }

src/components/index.scss

@@ -72,12 +72,12 @@ $cubic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
 @keyframes show {
   0% {
-    opacity: 0%;
+    opacity: 0;
     transform: scale(0.95);
   }
 
   100% {
-    opacity: 100%;
+    opacity: 1;
     transform: scale(1);
   }
 }

src/components/index.vue

@@ -40,7 +40,7 @@
       >
         <XIcon />
       </span>
-      <Menu
+      <MenuComponent
         v-if="menuActive"
         :data="menuData"
         :flip="flipMenu"
@@ -49,30 +49,31 @@
         :on-close="handleMenuClose"
         :menu-style="computedMenuStyle"
       >
-        <template v-for="slot in Object.keys($slots)" #[slot]="scope">
-          <slot :name="slot" v-bind="scope" />
+        <template
+          v-for="slot in Object.keys($slots)"
+          #[slot]="scope"
+        >
+          <slot
+            :name="slot"
+            v-bind="scope"
+          />
         </template>
-      </Menu>
+      </MenuComponent>
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import "focus-visible";
 import {
-  defineComponent,
-  onMounted,
-  ref,
-  unref,
-  computed,
-  nextTick,
-  onUnmounted,
+computed, defineComponent, nextTick, onMounted, onUnmounted, ref,
+unref
 } from "vue";
-import Menu from "./Menu.vue";
-import XIcon from "./icons/XIcon.vue";
-import MenuIcon from "./icons/MenuIcon.vue";
 import utils from "../utils";
+import MenuIcon from "./icons/MenuIcon.vue";
+import XIcon from "./icons/XIcon.vue";
+import MenuComponent from "./Menu.vue";
 import Props from "./props";
-import "focus-visible";
 
 interface Position {
   left: number;
@@ -81,9 +82,9 @@ interface Position {
 export default defineComponent({
   name: "FloatMenu",
   components: {
-    Menu,
-    XIcon,
     MenuIcon,
+    MenuComponent,
+    XIcon,
   },
   props: Props,
   setup(props, { slots }) {