US-338: Upgrade vue to version 3 in neo-savant

products/neo-savant/package.json

@@ -9,36 +9,43 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.1",
+    "@imengyu/vue3-context-menu": "^1.4.0",
+    "@kyvg/vue3-notification": "^3.2.1",
     "@ledgerhq/hw-transport-u2f": "^5.34.0",
     "@ledgerhq/hw-transport-webusb": "^6.28.5",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/compat": "^3.4.21",
+    "@vue/compiler-sfc": "^3.4.21",
     "@zilliqa-js/account": "^3.5.0",
     "@zilliqa-js/crypto": "^3.5.0",
     "@zilliqa-js/util": "^3.5.0",
     "@zilliqa-js/zilliqa": "^3.5.0",
-    "animate.css": "^3.7.2",
+    "animate.css": "^4.1.1",
     "axios": "^1.6.8",
     "bootstrap": "^4.4.1",
+    "codemirror": "^6.0.1",
+    "element-plus": "^2.7.0",
+    "floating-vue": "^5.2.2",
+    "mitt": "^3.0.1",
     "numbro": "^2.5.0",
-    "sweetalert2": "^9.7.2",
+    "sweetalert2": "^11.10.7",
     "uuid": "^9.0.1",
-    "v-tooltip": "^2.1.3",
-    "vite": "^2.5.4",
-    "vite-plugin-vue2": "2.0.3",
-    "vue": "^2.6.11",
+    "vite": "^5.2.8",
+    "vue": "^3.4.21",
+    "vue-codemirror": "^6.1.1",
     "vue-color": "^2.8.1",
-    "vue-context": "^5.0.0",
-    "vue-json-pretty": "^1.6.3",
-    "vue-notification": "^1.3.20",
-    "vue-router": "^3.1.3",
-    "vue-template-compiler": "^2.7.16",
-    "vue2-brace-editor": "^2.0.2",
-    "vuex": "^3.1.2",
-    "vuex-persist": "^2.2.0"
+    "vue-json-pretty": "^2.4.0",
+    "vue-router": "^4.3.0",
+    "vuex": "^4.1.0",
+    "vuex-persist": "^3.1.3"
   },
   "devDependencies": {
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-vue": "^9.24.1",
     "sass": "^1.74.1",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   }
 }

products/neo-savant/src/components/BottomPanel/Checker.vue

@@ -14,30 +14,25 @@
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      events: []
-    };
-  },
-  mounted() {
-    window.EventBus.$on("checker-events", ({ warnings, errors }) => {
-      this.events = [];
-      if (warnings !== undefined) {
-        warnings.forEach(item => {
-          this.events.push(item);
-        });
-      }
+<script setup>
+import {ref, onMounted} from 'vue'
+const events = ref([])
+onMounted(() => {
+  window.EventBus.$on("checker-events", ({ warnings, errors }) => {
+    events.value = [];
+    if (warnings !== undefined) {
+      warnings.forEach(item => {
+        this.events.push(item);
+      });
+    }
 
-      if (errors !== undefined) {
-        errors.forEach(item => {
-          this.events.push(item);
-        });
-      }
-    });
-  }
-};
+    if (errors !== undefined) {
+      errors.forEach(item => {
+        this.events.push(item);
+      });
+    }
+  });
+})
 </script>
 
 <style lang="scss" scoped>
@@ -54,4 +49,4 @@ export default {
     }
   }
 }
-</style>
+</style>

products/neo-savant/src/components/BottomPanel/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bottom-panel">
-    <div class="header" @click="handleToggle">
+    <div class="header" @click="$emit('toggle')">
       <div class="tab d-flex align-items-center">
         <img height="13px" class="pr-1" src="@/assets/terminal.svg" /> Checker
       </div>
@@ -11,18 +11,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
+
+import { defineProps, defineEmits } from "vue";
 import CheckerTab from "./Checker.vue";
+defineProps(["active"])
+const emit = defineEmits(["toggle"])
 
-export default {
-  props: ["active"],
-  components: { CheckerTab },
-  methods: {
-    handleToggle() {
-      this.$emit("toggle");
-    }
-  }
-};
 </script>
 
 <style lang="scss" scoped>
@@ -62,4 +57,4 @@ export default {
     overflow-y: scroll;
   }
 }
-</style>
+</style>

products/neo-savant/src/components/Files/FileName.vue

@@ -1,76 +1,87 @@
 <template>
-  <div
-    class="file-name"
-    :class="{'selected' : selected}"
-    @click="$emit('select-file', file.id)"
-    @contextmenu.prevent="$refs.menu.open"
-  >
+  <div class="file-name" :class="{ 'selected': selected }" @click="$emit('select-file', file.id)"
+    @contextmenu="onContextMenu">
     <span class="editable" @dblclick="edit = true" v-if="!edit">{{ file.name }}</span>
-    <input v-if="edit" v-model="file.name" v-on:blur="handleRename" @keyup.enter="handleRename" />
+    <input v-if="edit" v-model="newFileName" @blur="edit = false; newFileName = file.name"
+      @keyup.enter="handleRename" @keyup.esc = "edit = false; newFileName = file.name"/>
     <span class="extension">.scilla</span>
-
-    <vue-context class="context-menu" ref="menu">
-      <li>
-        <a href="#" @click.prevent="edit = true">Rename</a>
-      </li>
-      <li>
-        <a href="#" @click.prevent="handleDelete">Delete</a>
-      </li>
-    </vue-context>
   </div>
 </template>
 
-<script>
-import { VueContext } from "vue-context";
+<script setup>
+import ContextMenu from '@imengyu/vue3-context-menu'
+import { defineProps, ref, defineEmits } from 'vue';
+import { useStore } from 'vuex';
+import { notify } from "@kyvg/vue3-notification";
 
-export default {
-  data() {
-    return {
-      edit: false
-    };
-  },
-  props: ["file", "selected"],
-  components: { VueContext },
-  methods: {
-    handleRename() {
-      this.edit = false;
+const store = useStore();
+const props = defineProps(["file", "selected"])
+defineEmits(['select-file'])
+const edit = ref(false)
+const newFileName = ref(props.file.name)
 
-      this.$store
-        .dispatch("files/RenameFile", {
-          id: this.file.id,
-          name: this.file.name
-        })
-        .then(() => {
-          this.$notify({
-            group: "scilla",
-            type: "success",
-            position: "bottom right",
-            title: "Files",
-            text: "File has been renamed"
-          });
-        });
-    },
-    handleDelete() {
-      const confirmed = confirm("Are you sure you want to delete this file?");
+const handleRename = () => {
+  console.log("here")
+  edit.value = false;
 
-      if (confirmed) {
-        this.$store
-          .dispatch("files/RemoveFile", {
-            id: this.file.id
-          })
-          .then(() => {
-            this.$notify({
-              group: "scilla",
-              type: "success",
-              position: "bottom right",
-              title: "Files",
-              text: "File has been deleted"
-            });
-          });
-      }
-    }
+  store
+    .dispatch("files/RenameFile", {
+      id: props.file.id,
+      name: newFileName.value
+    })
+    .then(() => {
+      notify({
+        group: "scilla",
+        type: "success",
+        position: "bottom right",
+        title: "Files",
+        text: "File has been renamed"
+      });
+    });
+}
+
+const handleDelete = () => {
+  const confirmed = confirm("Are you sure you want to delete this file?");
+
+  if (confirmed) {
+    store
+      .dispatch("files/RemoveFile", {
+        id: props.file.id
+      })
+      .then(() => {
+        notify({
+          group: "scilla",
+          type: "success",
+          position: "bottom right",
+          title: "Files",
+          text: "File has been deleted"
+        });
+      });
   }
-};
+}
+
+const onContextMenu = (e) => {
+  // Prevent the browser's default menu
+  e.preventDefault();
+  ContextMenu.showContextMenu({
+    x: e.x,
+    y: e.y,
+    items: [
+      {
+        label: "Rename",
+        onClick: () => {
+          edit.value = true;
+        }
+      },
+      {
+        label: "Delete",
+        onClick: () => {
+          handleDelete()
+        }
+      },
+    ]
+  });
+}
 </script>
 
 <style lang="scss" scoped>
@@ -95,4 +106,4 @@ export default {
     }
   }
 }
-</style>
+</style>

products/neo-savant/src/components/Files/List.vue

@@ -13,7 +13,7 @@
       >
         <file-name
           :file="file"
-          v-on:select-file="handleSelect"
+          @select-file="handleSelect"
           :selected="selected && selected.id === file.id"
         />
       </div>
@@ -75,4 +75,4 @@ export default {
     cursor: pointer;
   }
 }
-</style>
+</style>

products/neo-savant/src/components/Inputs/InputPopover.vue

@@ -1,18 +1,18 @@
 <template>
-  <v-popover offset="16" trigger="click" placement="top">
+  <VDropdown distance="16" :triggers="['click', 'focus']" placement="top">
     <!-- This will be the popover target (for the events and position) -->
     <a class="tooltip-target d-flex align-items-center">
       <span>{{ type }}</span>
       <img class="ml-1" src="@/assets/question.svg" />
     </a>
 
     <!-- This will be the content of the popover -->
-    <template slot="popover" v-if="selected !== undefined">
+    <template #popper v-if="selected !== undefined">
       {{selected.description}} Read more about this
       <a :href="selected.link" target="_blank">here</a>
     </template>
-    <template slot="popover" v-else>{{type}}</template>
-  </v-popover>
+    <template #popper v-else>{{type}}</template>
+  </VDropdown>
 </template>
 
 <script>
@@ -70,4 +70,4 @@ export default {
     height: 12px;
   }
 }
-</style>
+</style>