Vue 3 migration

Feat 37458 vue3 migration
soft4ti · Oct 23, 2024 · fac6ef6 · fac6ef6
2 parents 82914db + 383b3c8
commit fac6ef6
Show file tree

Hide file tree

Showing 32 changed files with 29,068 additions and 22,167 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,12 +5,15 @@ module.exports = {
     "plugin:vue/recommended"
   ],
   plugins: [
-   //"prettier".
-  "jest"
+    //"prettier".
+    "jest"
   ],
   rules: {
     eqeqeq: "off",
-    "no-cond-assign": "off"
+    "no-cond-assign": "off",
+    "vue/multi-word-component-names": ["error", {
+      "ignores": ['Tree']
+    }]
   }
 }
 

diff --git a/.travis.yml b/.travis.yml
@@ -2,7 +2,7 @@ sudo: false
 
 language: node_js
 node_js:
-  - 9
+  - 20
 
 branches:
   only:

diff --git a/copilo.js b/copilo.js
diff --git a/demo/pages/async.html b/demo/pages/async.html
@@ -1,14 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
     <title>Liquor Tree: Basic Usage</title>
-    <link rel="stylesheet" href="../assets/style.css">
+    <link rel="stylesheet" href="../assets/style.css" />
     <script src="../assets/menu.js"></script>
 
-    <!-- first import Vue -->
-    <script src="https://unpkg.com/vue/dist/vue.js"></script>
+    <script src="https://unpkg.com/vue"></script>
     <script src="/liquor-tree.umd.js"></script>
 
     <style>
@@ -24,15 +23,16 @@
     </style>
   </head>
   <body>
-    <div class="hello">
-      Async Loading.
-    </div>
+    <div class="hello">Async Loading.</div>
 
     <div id="app">
       <div class="examples">
         <div class="example">
           <div class="example-description">
-            <p>Tree is able to recieve the data as an Object or a Promise. Lets try with <b>fetch</b> API.</p>
+            <p>
+              Tree is able to recieve the data as an Object or a Promise. Lets
+              try with <b>fetch</b> API.
+            </p>
           </div>
 
           <div class="example-tree">
@@ -42,10 +42,11 @@
 
         <div class="example">
           <div class="example-description">
-            Here we don't have an initial data. The tree will try to fetch init data with ID == 'root' (node's name is 'root' as well)
+            Here we don't have an initial data. The tree will try to fetch init
+            data with ID == 'root' (node's name is 'root' as well)
           </div>
           <div class="example-tree">
-              <tree :options="fetchExample0" />
+            <tree :options="fetchExample0" />
           </div>
         </div>
 
@@ -54,43 +55,46 @@
             Loading indicator and delay (5000ms)
           </div>
           <div class="example-tree">
-              <tree :options="fetchExample1" :data="treeData1" />
+            <tree :options="fetchExample1" :data="treeData1" />
           </div>
         </div>
 
         <div class="example">
-            <div class="example-description">
-              Prop names
-            </div>
-            <div class="example-tree">
-                <tree :options="fetchExample2" />
-            </div>
+          <div class="example-description">Prop names</div>
+          <div class="example-tree">
+            <tree :options="fetchExample2" />
           </div>
+        </div>
       </div>
     </div>
 
     <script>
       // Some Vuex emulation :)
       const $store = {
         dispatch(t) {
-          switch(t) {
-            case 'FETCH-TREE': return fetch('/assets/data/fetch-example.json').then(r => r.json())
+          switch (t) {
+            case "FETCH-TREE":
+              return fetch("/assets/data/fetch-example.json").then((r) =>
+                r.json(),
+              );
           }
-        }
-      }
+        },
+      };
 
-      new Vue({
-        el: '#app',
-        data: () => ({
-          treeData: $store.dispatch('FETCH-TREE'),
-          treeData1: [{
-            text: 'Root node',
-            id: 'root',
-            isBatch: true
-          }],
+      const app = Vue.createApp({
+        data() {
+          return {
+            treeData: $store.dispatch("FETCH-TREE"),
+            treeData1: [
+              {
+                text: "Root node",
+                id: "root",
+                isBatch: true,
+              },
+            ],
 
-          fetchExample0: {
-            /*
+            fetchExample0: {
+              /*
               - fetchData: `/assets/data/fetch0/data-{id}.json`
               - fetchData(node) {
                 return `/assets/data/fetch0/data-${node.id}.json`
@@ -101,46 +105,53 @@
               }
             */
 
-            fetchData(node) {
-              // return Promise object
-              return fetch(`/assets/data/fetch0/data-${node.id}.json`).then(r => r.json()).catch(e => console.log(e))
-            }
-          },
-
-          fetchExample1: {
-            checkbox: true,
-            minFetchDelay: 600,
-            fetchData(node) {
-              // return Promise object
-              return fetch(`/assets/data/fetch0/data-${node.id}.json`).then(r => r.json()).then(data => {
-                data[0].state = {
-                  checked: true
-                }
-                return data
-              }).catch(e => console.log(e))
+              fetchData(node) {
+                // return Promise object
+                return fetch(`/assets/data/fetch0/data-${node.id}.json`)
+                  .then((r) => r.json())
+                  .catch((e) => console.log(e));
+              },
             },
-            onFetchError(error) {
-              console.error(error)
-            }
-          },
 
-          fetchExample2: {
-            propertyNames: {
-              text: 'name',
+            fetchExample1: {
+              checkbox: true,
+              minFetchDelay: 600,
+              fetchData(node) {
+                // return Promise object
+                return fetch(`/assets/data/fetch0/data-${node.id}.json`)
+                  .then((r) => r.json())
+                  .then((data) => {
+                    data[0].state = {
+                      checked: true,
+                    };
+                    return data;
+                  })
+                  .catch((e) => console.log(e));
+              },
+              onFetchError(error) {
+                console.error(error);
+              },
             },
-            fetchData: node => {
-              return new Promise((resolve, reject) => {
-                resolve({
-                  id: 1,
-                  name: 'test',
-                  isBatch: true,
+
+            fetchExample2: {
+              propertyNames: {
+                text: "name",
+              },
+              fetchData: (node) => {
+                return new Promise((resolve, reject) => {
+                  resolve({
+                    id: 1,
+                    name: "test",
+                    isBatch: true,
+                  });
                 });
-              })
-            }
-          }
-        })
-      })
+              },
+            },
+          };
+        },
+      });
+      app.use(LiquorTree);
+      app.mount("#app");
     </script>
-
   </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,7 @@ sudo: false @@
     language: node_js
     node_js:
-      - 9
+      - 20
     branches:
       only:
@@ Expand Down @@