fixes lower level icons not appearing bug and node update bug

kcsujeet · Feb 20, 2024 · 3016ca5 · 3016ca5
1 parent 1a3f988
commit 3016ca5
Show file tree

Hide file tree

Showing 11 changed files with 370 additions and 291 deletions.
diff --git a/README.md b/README.md
@@ -208,9 +208,16 @@ slVueTree.traverse((node, nodeModel, path) => {
 [see CONTRIBUTING.md](CONTRIBUTING.md)
 
 # Changelog
+v0.0.10
+- fixes lower level icons not appearing bug
+- fixes node update bug
+
+v0.0.9
+- update demo
+- update readme
+
 v0.0.8
 - update demos
--
 
 v0.0.7
   - add support for generics

diff --git a/demo/dark-theme.html b/demo/dark-theme.html
@@ -4,7 +4,13 @@
         <meta charset="UTF-8" />
         <title>sl-vue-tree-next</title>
         <link rel="stylesheet" href="../public/sl-vue-tree-next-dark.css" />
-        <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+            integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        />
         <script src="https://unpkg.com/vue@3.4.18/dist/vue.global.js"></script>
     </head>
     <body>
@@ -27,30 +33,30 @@ <h2>Sl-vue-tree-next - custom dark theme and events handlers</h2>
                         @toggle="nodeToggled"
                         @nodecontextmenu="showContextMenu"
                     >
-                        <template slot="title" slot-scope="{ node }">
+                        <template #title="{ node }">
                             <span class="item-icon">
-                                <i class="fa fa-file" v-if="node.isLeaf"></i>
-                                <i class="fa fa-folder" v-if="!node.isLeaf"></i>
+                                <i class="fa-solid fa-file" v-if="node.isLeaf"></i>
+                                <i class="fa-solid fa-folder" v-if="!node.isLeaf"></i>
                             </span>
 
                             {{ node.title }}
                         </template>
 
-                        <template slot="toggle" slot-scope="{ node }">
+                        <template #toggle="{ node }">
                             <span v-if="!node.isLeaf">
                                 <i v-if="node.isExpanded" class="fa fa-chevron-down"></i>
                                 <i v-if="!node.isExpanded" class="fa fa-chevron-right"></i>
                             </span>
                         </template>
 
-                        <template slot="sidebar" slot-scope="{ node }">
+                        <template #sidebar="{ node }">
                             <span class="visible-icon" @click="event => toggleVisibility(event, node)">
                                 <i v-if="!node.data || node.data.visible !== false" class="fa fa-eye"></i>
                                 <i v-if="node.data && node.data.visible === false" class="fa fa-eye-slash"></i>
                             </span>
                         </template>
 
-                        <template slot="draginfo"> {{selectedNodesTitle}} </template>
+                        <template #draginfo="draginfo"> {{selectedNodesTitle}} </template>
                     </sl-vue-tree-next>
                 </div>
 
@@ -68,7 +74,7 @@ <h2>JSON Preview</h2>
         <script type="module">
             import { SlVueTreeNext } from '../public/sl-vue-tree-next.global.js'
 
-            var nodes = [
+            const nodes = [
                 { title: 'Item1', isLeaf: true },
                 { title: 'Item2', isLeaf: true, data: { visible: false } },
                 { title: 'Folder1' },

diff --git a/demo/externaldrag.html b/demo/externaldrag.html
@@ -4,7 +4,13 @@
         <meta charset="UTF-8" />
         <title>sl-vue-tree-next</title>
         <link rel="stylesheet" href="../public/sl-vue-tree-next-dark.css" />
-        <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+            integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        />
         <script src="https://unpkg.com/vue@3.4.18/dist/vue.global.js"></script>
     </head>
     <body>
@@ -14,16 +20,16 @@ <h2>sl-vue-tree-next - drag external elements</h2>
             <div class="row">
                 <div class="tree-container">
                     <sl-vue-tree-next v-model="nodes" ref="slVueTree" @externaldrop="onExternalDropHandler">
-                        <template slot="title" slot-scope="{ node }">
+                        <template #title="{ node }">
                             <span class="item-icon">
-                                <i class="fa fa-file" v-if="node.isLeaf"></i>
-                                <i class="fa fa-folder" v-if="!node.isLeaf"></i>
+                                <i class="fa-solid fa-file" v-if="node.isLeaf"></i>
+                                <i class="fa-solid fa-folder" v-if="!node.isLeaf"></i>
                             </span>
 
                             {{ node.title }}
                         </template>
 
-                        <template slot="toggle" slot-scope="{ node }">
+                        <template #toggle="{ node }">
                             <span v-if="!node.isLeaf">
                                 <i v-if="node.isExpanded" class="fa fa-chevron-down"></i>
                                 <i v-if="!node.isExpanded" class="fa fa-chevron-right"></i>
@@ -56,7 +62,7 @@ <h2>sl-vue-tree-next - drag external elements</h2>
         <script type="module">
             import { SlVueTreeNext } from '../public/sl-vue-tree-next.global.js'
 
-            var nodes = [
+            const nodes = [
                 { title: 'Item1', isLeaf: true },
                 { title: 'Item2', isLeaf: true },
                 {

diff --git a/demo/keyboardcontrol.html b/demo/keyboardcontrol.html
@@ -4,7 +4,13 @@
         <meta charset="UTF-8" />
         <title>sl-vue-tree-next</title>
         <link rel="stylesheet" href="../public/sl-vue-tree-next-dark.css" />
-        <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+            integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        />
         <script src="https://unpkg.com/vue@3.4.18/dist/vue.global.js"></script>
     </head>
     <body>
@@ -17,16 +23,16 @@ <h2>Sl-vue-tree-next - Press Up and Down to move selection, Space and Enter to e
             <div class="row">
                 <div class="tree-container">
                     <sl-vue-tree-next v-model="nodes" ref="slVueTree">
-                        <template slot="title" slot-scope="{ node }">
+                        <template #title="{ node }">
                             <span class="item-icon">
-                                <i class="fa fa-file" v-if="node.isLeaf"></i>
-                                <i class="fa fa-folder" v-if="!node.isLeaf"></i>
+                                <i class="fa-solid fa-file" v-if="node.isLeaf"></i>
+                                <i class="fa-solid fa-folder" v-if="!node.isLeaf"></i>
                             </span>
 
                             {{ node.title }}
                         </template>
 
-                        <template slot="toggle" slot-scope="{ node }">
+                        <template #toggle="{ node }">
                             <span v-if="!node.isLeaf">
                                 <i v-if="node.isExpanded" class="fa fa-chevron-down"></i>
                                 <i v-if="!node.isExpanded" class="fa fa-chevron-right"></i>
@@ -43,7 +49,7 @@ <h2>Sl-vue-tree-next - Press Up and Down to move selection, Space and Enter to e
 
         <script type="module">
             import { SlVueTreeNext } from '../public/sl-vue-tree-next.global.js'
-            var nodes = [
+            const nodes = [
                 { title: 'Item1', isLeaf: true },
                 { title: 'Item2', isLeaf: true },
                 {

diff --git a/demo/minimal-theme.html b/demo/minimal-theme.html
@@ -4,7 +4,13 @@
         <meta charset="UTF-8" />
         <title>sl-vue-tree</title>
         <link rel="stylesheet" href="../public/sl-vue-tree-next-minimal.css" />
-        <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+            integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        />
         <script src="https://unpkg.com/vue@3.4.18/dist/vue.global.js"></script>
     </head>
     <body>
@@ -27,7 +33,7 @@ <h2>Sl-vue-tree-next - minimal css</h2>
         <script type="module">
             import { SlVueTreeNext } from '../public/sl-vue-tree-next.global.js'
 
-            var nodes = [
+            const nodes = [
                 { title: 'Item1', isLeaf: true },
                 { title: 'Item2', isLeaf: true, data: { visible: false } },
                 { title: 'Folder1' },

diff --git a/index.html b/index.html
@@ -1,18 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"
-      rel="stylesheet"
-    />
-
-    <title>Vite + Vue + TS</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+            integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        />
+        <title>Vite + Vue + TS</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "sl-vue-tree-next",
-    "version": "0.0.9",
+    "version": "0.0.10",
     "description": "draggable tree vue component",
     "browserslist": "> 0.25%, not dead",
     "type": "module",