3.7.0 add the fnCustomClasses property

TinyWisp · Jul 13, 2021 · 6e728dc · 6e728dc
1 parent 91aae9d
commit 6e728dc
Show file tree

Hide file tree

Showing 13 changed files with 142 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+3.7.0
+- added:
+    - the fnCustomClasses property
+
 3.6.0
 - fixed:
     - the input box's width didn't fit its content well.

diff --git a/CHANGELOG.zh.md b/CHANGELOG.zh.md
@@ -1,3 +1,7 @@
+3.7.0
+- 添加:
+    - 属性 fnCustomClasses
+
 3.6.0
 - 修正:
     - 编辑一个结点的标题时，输入框的宽度不能很好地适应内容的长度。

diff --git a/docs/css/app.571cd6dc.css → docs/css/app.8cea11bb.css b/docs/css/app.571cd6dc.css → docs/css/app.8cea11bb.css
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>twtree</title><link href="css/app.571cd6dc.css" rel="preload" as="style"><link href="js/app.291f2d3f.js" rel="preload" as="script"><link href="js/chunk-vendors.c3eedee7.js" rel="preload" as="script"><link href="css/app.571cd6dc.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but twtree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.c3eedee7.js"></script><script src="js/app.291f2d3f.js"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>twtree</title><link href="css/app.8cea11bb.css" rel="preload" as="style"><link href="js/app.52c6bc78.js" rel="preload" as="script"><link href="js/chunk-vendors.c3eedee7.js" rel="preload" as="script"><link href="css/app.8cea11bb.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but twtree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.c3eedee7.js"></script><script src="js/app.52c6bc78.js"></script></body></html>
diff --git a/docs/js/app.291f2d3f.js b/docs/js/app.291f2d3f.js
diff --git a/docs/js/app.291f2d3f.js.map b/docs/js/app.291f2d3f.js.map
diff --git a/docs/js/app.52c6bc78.js b/docs/js/app.52c6bc78.js
diff --git a/docs/js/app.52c6bc78.js.map b/docs/js/app.52c6bc78.js.map
diff --git a/example/router/index.js b/example/router/index.js
@@ -42,6 +42,7 @@ import CustomAppearanceStripesExample from '../views/CustomAppearanceStripesExam
 import CustomAppearanceDisableAnimationsExample from '../views/CustomAppearanceDisableAnimationsExample.vue'
 import CustomAppearanceExtraContentExample from '../views/CustomAppearanceExtraContentExample.vue'
 import CustomAppearanceLimitTitleWidthExample from '../views/CustomAppearanceLimitTitleWidthExample.vue'
+import CustomAppearanceCustomClassesExample from '../views/CustomAppearanceCustomClassesExample.vue'
 
 Vue.use(VueRouter)
 
@@ -244,6 +245,11 @@ const routes = [
     path: '/:lang/example/custom-appearance/limit-title-width',
     name: 'custom-appearance-limit-title-width-example',
     component: CustomAppearanceLimitTitleWidthExample
+  },
+  {
+    path: '/:lang/example/custom-appearance/custom-classes',
+    name: 'custom-appearance-custom-classes-example',
+    component: CustomAppearanceCustomClassesExample
   }
 ]
 

diff --git a/example/views/CustomAppearanceCustomClassesExample.vue b/example/views/CustomAppearanceCustomClassesExample.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="example-wrapper">
+    <div class="panel">
+      <TWTree 
+      :tree="tree"
+      :fnCustomClasses="fnCustomClasses"
+      class="tree" />
+    </div>
+  </div>
+</template>
+
+<script>
+import TWTree from '../../src/TWTree.vue'
+
+export default {
+  name: 'custom-appearance-custom-classes-example',
+  components: {
+    TWTree
+  },
+  data() {
+    return {
+      tree: [
+        {
+          id: 1,
+          title: 'ROOT',
+          hasChild: true,
+          children: [
+            {
+              id: 2,
+              title: 'child 1',
+            },
+            {
+              id: 3,
+              title: 'child 2',
+              hasChild: true,
+              children: [
+                {
+                  id: 4,
+                  title: 'child 2-1',
+                  type: 'red'
+                },
+                {
+                  id: 5,
+                  title: 'child 2-2',
+                  type: 'blue'
+                },
+                {
+                  id: 6,
+                  title: 'child 2-3',
+                  type: 'brown'
+                }
+              ],
+            },
+            {
+              id: 7,
+              title: 'child 3',
+            },
+            {
+              id: 8,
+              title: 'child 4',
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    fnCustomClasses(node) {
+      if (node.type !== undefined) {
+        return ['twtree-node-' + node.type]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.panel .tree {
+  width: 50%;
+}
+.panel .tree >>> .twtree-node-red {
+  color: red;
+}
+.panel .tree >>> .twtree-node-blue {
+  color: blue;
+}
+.panel .tree >>> .twtree-node-brown {
+  color: brown;
+}
+</style>
diff --git a/example/views/Home.vue b/example/views/Home.vue
@@ -362,6 +362,15 @@ export default {
               route:         '/example/custom-appearance/limit-title-width',
               sourceCodeUrl: 'https://github.com/TinyWisp/twtree/blob/master/example/views/CustomAppearanceLimitTitleWidthExample.vue',
               codepenUrl:    'https://codepen.io/tinywisp/pen/yLexJQL'
+            },
+            {
+              title_en:      'custom classes',
+              title_zh:      '自定义样式类',
+              note_en:       'use the fnCustomClasses property to add custom classes to the nodes',
+              note_zh:       '使用fnCustomClasses为节点添加自定义样式类',
+              route:         '/example/custom-appearance/custom-classes',
+              sourceCodeUrl: 'https://github.com/TinyWisp/twtree/blob/master/example/views/CustomAppearanceCustomClassesExample.vue',
+              codepenUrl:    'https://codepen.io/tinywisp/pen/NWjdjQM'
             }
           ]
         }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "twtree",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "A highly customizable tree component for vue, which features checkbox, async loading, drag and drop, context menu and custom appearance.",
   "main": "lib/twtree.umd.min.js",
   "module": "lib/twtree.esm.js",
@@ -68,9 +68,7 @@
     ],
     "rules": {
       "no-console": "off",
-      "no-constant-condition": {
-        "checkLoops": false
-      }
+      "no-constant-condition": "off"
     },
     "parserOptions": {
       "parser": "babel-eslint"

diff --git a/src/TWTree.vue b/src/TWTree.vue
@@ -14,14 +14,15 @@
         <template v-for="item of items">
           <li
             v-if="item.__.isVisible"
-            :class="{
-              'twtree-node':                true, 
-              'twtree-node-selected':       item.selected,
-              'twtree-node-search-result':  item.__.isSearchResult,
-              'twtree-node-drag-over-prev': item.__.dragOverArea === 'prev' && item.__.isDroppable,
-              'twtree-node-drag-over-next': item.__.dragOverArea === 'next' && item.__.isDroppable,
-              'twtree-node-drag-over-self': item.__.dragOverArea === 'self' && item.__.isDroppable
-            }"
+            :class="[
+              {'twtree-node':                true}, 
+              {'twtree-node-selected':       item.selected},
+              {'twtree-node-search-result':  item.__.isSearchResult},
+              {'twtree-node-drag-over-prev': item.__.dragOverArea === 'prev' && item.__.isDroppable},
+              {'twtree-node-drag-over-next': item.__.dragOverArea === 'next' && item.__.isDroppable},
+              {'twtree-node-drag-over-self': item.__.dragOverArea === 'self' && item.__.isDroppable},
+              ...item.__.customClasses
+            ]"
             :style="{
               '--fullIndent':          item.__.fullIndent,
               '--height':              item.style.height,
@@ -277,6 +278,11 @@ export default {
       type: Function,
       required: false,
       default: null
+    },
+    fnCustomClasses: {
+      type: Function,
+      required: false,
+      default: null
     }
   },
   data() {
@@ -325,7 +331,8 @@ export default {
           mousex: 0,
           mousey: 0,
           titleMaxWidth: 'none',
-          titleTip: ''
+          titleTip: '',
+          customClasses: []
         }
       },
 
@@ -457,6 +464,11 @@ export default {
           titleMaxWidth = 'calc(' + (parseFloat(titleMaxWidth) / 100.0) + ' * var(--treeWidth))'
         }
 
+        let customClasses = this.getAttr(node, '__', 'customClasses')
+        if (typeof(this.fnCustomClasses) === 'function') {
+          customClasses = this.fnCustomClasses(node)
+        }
+
         this.setAttr(node, 'directoryState',  this.getDirectoryState(node))
         this.setAttr(node, 'selected',        this.getAttr(node, 'selected'))
 
@@ -496,6 +508,7 @@ export default {
         this.setAttr(node, '__', 'titleTip',       this.getAttr(node, '__', 'titleTip'))
         this.setAttr(node, '__', 'fullIndent',     fullIndent)
         this.setAttr(node, '__', 'titleMaxWidth',  titleMaxWidth)
+        this.setAttr(node, '__', 'customClasses',  customClasses)
 
         if (typeof(this.fnAfterCalculate) === 'function') {
           this.fnAfterCalculate(node)
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>twtree</title><link href="css/app.571cd6dc.css" rel="preload" as="style"><link href="js/app.291f2d3f.js" rel="preload" as="script"><link href="js/chunk-vendors.c3eedee7.js" rel="preload" as="script"><link href="css/app.571cd6dc.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but twtree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.c3eedee7.js"></script><script src="js/app.291f2d3f.js"></script></body></html>
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>twtree</title><link href="css/app.8cea11bb.css" rel="preload" as="style"><link href="js/app.52c6bc78.js" rel="preload" as="script"><link href="js/chunk-vendors.c3eedee7.js" rel="preload" as="script"><link href="css/app.8cea11bb.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but twtree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.c3eedee7.js"></script><script src="js/app.52c6bc78.js"></script></body></html>