#180 Is to possible for only parent to call a function?

Author: KP73410

demo/pages/events.html

@@ -140,7 +140,7 @@
         { name: 'node:dblclick', args: ['Node'] },
         { name: 'node:selected', args: ['Node'] },
         { name: 'node:unselected', args: ['Node'] },
-        { name: 'node:checked', args: ['Node'] },
+        { name: 'node:checked', args: ['Node', 'Target Node'] },
         { name: 'node:unchecked', args: ['Node'] },
         { name: 'node:expanded', args: ['Node'] },
         { name: 'node:collapsed',  args: ['Node'] },
@@ -228,6 +228,7 @@
               )
 
               console.log(arguments)
+              console.log(node.text, newNode ? newNode.text : null)
             }
           }
         }

package.json

@@ -1,13 +1,13 @@
 {
   "name": "liquor-tree",
   "description": "A Vue.js tree component.",
-  "version": "0.2.68",
+  "version": "0.2.69",
   "author": "Kostiantyn <[email protected]>",
   "library": "LiquorTree",
   "homepage": "https://amsik.github.io/liquor-tree/",
   "scripts": {
     "dev": "cross-env NODE_ENV=development rollup -w -c rollup.config.js",
-    "build": "cross-env NODE_ENV=production rollup -c rollup.config.js",
+    "build": "cross-env NODE_ENV=production rollup -c rollup.config.js -- --environment BUILD:production",
     "lint": "eslint --fix src test",
     "test": "npm run lint && npm run unit",
     "unit": "jest",
@@ -26,12 +26,13 @@
     "vue-tree",
     "treeview"
   ],
-  "dependencies": {},
+  "license": "MIT",
   "files": [
     "src",
     "dist/*.js"
   ],
   "devDependencies": {
+    "@rollup/plugin-alias": "^2.2.0",
     "@storybook/addon-notes": "^3.4.11",
     "@storybook/addon-options": "^3.4.11",
     "@storybook/vue": "^3.4.11",
@@ -45,19 +46,20 @@
     "eslint-plugin-jest": "^21.22.1",
     "eslint-plugin-vue-libs": "^2.1.0",
     "jest": "^22.4.4",
-    "rollup": "^0.66.2",
-    "rollup-plugin-alias": "^1.4.0",
-    "rollup-plugin-buble": "^0.19.2",
-    "rollup-plugin-serve": "^0.4.2",
-    "rollup-plugin-uglify": "^3.0.0",
-    "rollup-plugin-vue": "^3.0.0",
-    "vue": "^2.5.17",
-    "vue-jest": "^2.6.0",
-    "vue-loader": "^14.2.3",
-    "vue-template-compiler": "^2.5.17"
+    "rollup": "^0.66.6",
+    "rollup-plugin-buble": "^0.19.8",
+    "rollup-plugin-serve": "^1.0.1",
+    "rollup-plugin-vue": "^4.6.0",
+    "rollup-plugin-uglify": "^6.0.3",
+    "vue": "^2.6.10",
+    "vue-jest": "^3.0.5",
+    "vue-loader": "^15.7.2",
+    "vue-template-compiler": "^2.6.10"
   },
   "jest": {
-    "setupFiles": ["./test/setupTests.js"],
+    "setupFiles": [
+      "./tests/setupTests.js"
+    ],
     "moduleFileExtensions": [
       "js",
       "vue"

rollup.config.js

@@ -1,12 +1,10 @@
 import pkg from './package.json'
 import vue from 'rollup-plugin-vue'
 import buble from 'rollup-plugin-buble'
-import uglify from 'rollup-plugin-uglify'
-import alias from 'rollup-plugin-alias'
+import { uglify } from 'rollup-plugin-uglify'
+import alias from '@rollup/plugin-alias'
 import serve from 'rollup-plugin-serve'
 
-const path = require('path')
-
 const version = pkg.version
 const banner = `
 /*!
@@ -16,50 +14,56 @@ const banner = `
  */
 `
 
-const config = {
-  input: 'src/main.js',
-  output: [
-    {
-      file: pkg.module,
-      format: 'es',
-      sourcemap: true,
-      banner
-    }, {
-      file: pkg.main,
-      format: 'umd',
-      name: 'LiquorTree',
-      sourcemap: true,
-      banner
-    }
-  ],
-  cache: false,
-  plugins: [
-    alias({
-      resolve: ['.vue', '.js'],
-      '@': path.resolve(__dirname, './src')
-    }),
-    vue({ css: true }),
-    buble({ objectAssign: 'Object.assign' })
-  ]
+const plugins = [
+  alias({
+    resolve: ['.vue', '.js'],
+  }),
+  vue({ css: true }),
+  buble({ objectAssign: 'Object.assign' })
+]
+
+const outputES = {
+  file: pkg.module,
+  format: 'es',
+  sourcemap: true,
+  banner
 }
 
-if ('production' == process.env.NODE_ENV) {
-  config.output.forEach(c => (c.sourcemap = false))
-  config.plugins.push(uglify({
-    output: {
-      comments: function(node, comment) {
-          var text = comment.value;
-          var type = comment.type;
-          if (type == "comment2") {
-              return /license/i.test(text);
-          }
-      }
-    }
-  }))
+const outputUMD = {
+  file: pkg.main,
+  format: 'umd',
+  name: 'LiquorTree',
+  sourcemap: true,
+  banner
 }
 
+const config = [
+  {
+    input: 'src/main.js',
+    output: outputES,
+    cache: false,
+    plugins
+  },
+  {
+    input: 'src/main.js',
+    output: outputUMD,
+    cache: false,
+    plugins: plugins.concat('production' !== process.env.NODE_ENV ? [] : uglify({
+      output: {
+        comments: function(node, comment) {
+            var text = comment.value;
+            var type = comment.type;
+            if (type == "comment2") {
+                return /license/i.test(text);
+            }
+        }
+      }
+    }))
+  },
+]
+
 if ('development' == process.env.NODE_ENV) {
-  config.plugins.push(serve({
+  config[0].plugins.push(serve({
     contentBase: ['dist', 'demo'],
     port: 8081,
     open: true

src/components/NodeContent.js

@@ -0,0 +1,55 @@
+<script>
+  const NodeContent = {
+    name: 'node-content',
+    props: ['node'],
+    render (h) {
+      const node = this.node
+      const vm = this.node.tree.vm
+
+      if (node.isEditing) {
+        let nodeText = node.text
+
+        this.$nextTick(_ => {
+          this.$refs.editCtrl.focus()
+        })
+
+        return h('input', {
+          domProps: {
+            value: node.text,
+            type: 'text'
+          },
+          class: 'tree-input',
+          on: {
+            input (e) {
+              nodeText = e.target.value
+            },
+            blur () {
+              node.stopEditing(nodeText)
+            },
+            keyup (e) {
+              if (e.keyCode === 13) {
+                node.stopEditing(nodeText)
+              }
+            },
+            mouseup (e) {
+              e.stopPropagation()
+            }
+          },
+          ref: 'editCtrl'
+        })
+      }
+
+      if (vm.$scopedSlots.default) {
+        return vm.$scopedSlots.default({ node: this.node })
+      }
+
+      return h('span', {
+        domProps: {
+          innerHTML: node.text
+        }
+      })
+    }
+  }
+
+  export default NodeContent
+</script>

src/components/NodeContent.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script>
-  import NodeContent from '@/components/NodeContent'
+  import NodeContent from './NodeContent.vue'
 
   const TreeNode = {
     name: 'Node',

src/components/TreeNode.vue

@@ -33,11 +33,11 @@
 </template>
 
 <script>
-  import TreeNode from '@/components/TreeNode'
-  import DraggableNode from '@/components/DraggableNode'
-  import TreeMixin from '@/mixins/TreeMixin'
-  import TreeDnd from '@/mixins/DndMixin'
-  import Tree from '@/lib/Tree'
+  import TreeNode from './TreeNode.vue'
+  import DraggableNode from './DraggableNode.vue'
+  import TreeMixin from '../mixins/TreeMixin.js'
+  import TreeDnd from '../mixins/DndMixin.js'
+  import Tree from '../lib/Tree.js'
 
   const defaults = {
     direction: 'ltr',
@@ -74,7 +74,7 @@
     },
     plainList: false,
     showChildren: true
-  }
+  };
 
   export default {
     name: 'Tree',

src/components/TreeRoot.vue

@@ -1,7 +1,7 @@
-import { recurseDown } from '@/utils/recurse'
-import find from '@/utils/find'
-import uuidV4 from '@/utils/uuidV4'
-import Selection from '@/lib/Selection'
+import { recurseDown } from '../utils/recurse'
+import find from '../utils/find'
+import uuidV4 from '../utils/uuidV4'
+import Selection from '../lib/Selection'
 
 export default class Node {
   constructor (tree, item) {
@@ -223,6 +223,7 @@ export default class Node {
     }
 
     const checkDisabledChildren = this.tree.options.checkDisabledChildren
+    const targetNode = this
 
     if (this.tree.options.autoCheckChildren) {
       this.recurseDown(node => {
@@ -236,7 +237,7 @@ export default class Node {
           this.tree.check(node)
 
           node.state('checked', true)
-          node.$emit('checked')
+          node.$emit('checked', node.id === targetNode.id ? undefined : targetNode)
         }
       })
 
@@ -258,6 +259,8 @@ export default class Node {
       return this
     }
 
+    const targetNode = this
+
     if (this.tree.options.autoCheckChildren) {
       this.recurseDown(node => {
         node.state('indeterminate', false)
@@ -266,7 +269,7 @@ export default class Node {
           this.tree.uncheck(node)
 
           node.state('checked', false)
-          node.$emit('unchecked')
+          node.$emit('unchecked', node.id === targetNode.id ? undefined : targetNode)
         }
       })