Support Customisable expander

[geekhybrid]

Resolves #10

Usage

<template>    
    <vue3-tree-vue :items="items" 
                   :isCheckable="false"
                   :hideGuideLines="false"
                   v-model:selectedItem="selectedItem">
       <template v-slot:item-expander="item" >
             <your-component-here-with-styling 
                 :color="item.foo === 'bars' ? 'blue' : 'red'" />

             <template v-slot:item-prepend-icon="treeViewItem" /> --Add image before node header
       </template>
    </vue3-tree-vue>
</template>

[SciManJD]

Thanks a lot for your solution. Unfortunately when I updated to the latest version, I cannot compile anymore. Probably the problem is in my settings, but I can't find what is going on. Can you help me, please? Here is what I get:

`Module parse failed: Unexpected token (10:16) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | */ | const cascadeStateToDescendants = (item, state) => {

item.children?.forEach(child => { | child.checkedStatus = item.checkedStatus; | state.emitItemCheckedChange(child);

@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/DeviceTree.vue?vue&type=script&lang=js 2:0-40 9:4-15 @ ./src/components/DeviceTree.vue?vue&type=script&lang=js @ ./src/components/DeviceTree.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/NavigationScreen.vue?vue&type=script&lang=js @ ./src/views/NavigationScreen.vue?vue&type=script&lang=js @ ./src/views/NavigationScreen.vue @ ./src/router/index.js`

[geekhybrid]

Thanks a lot for your solution. Unfortunately when I updated to the latest version, I cannot compile anymore. Probably the problem is in my settings, but I can't find what is going on. Can you help me, please? Here is what I get:

`Module parse failed: Unexpected token (10:16) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | */ | const cascadeStateToDescendants = (item, state) => {

item.children?.forEach(child => { | child.checkedStatus = item.checkedStatus; | state.emitItemCheckedChange(child);

@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/DeviceTree.vue?vue&type=script&lang=js 2:0-40 9:4-15 @ ./src/components/DeviceTree.vue?vue&type=script&lang=js @ ./src/components/DeviceTree.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/NavigationScreen.vue?vue&type=script&lang=js @ ./src/views/NavigationScreen.vue?vue&type=script&lang=js @ ./src/views/NavigationScreen.vue @ ./src/router/index.js`

Interesting... Did you happen to make any other changes to your project configuration? And by the latest version, do you mean 1.0.20?

[SciManJD]

I worked with V1.0.17 without problems. Yesterday I just executed 'npm update vue3-tree-vue' and I got the latest version (exactly 1.0.20). I have no other changes, just tried to build and i got this problem.

[geekhybrid]

I worked with V1.0.17 without problems. Yesterday I just executed 'npm update vue3-tree-vue' and I got the latest version (exactly 1.0.20). I have no other changes, just tried to build and i got this problem.

Having a look... I think we might be having a re-occurence of #1 which you raised a year ago. Can I have a look at your package.json and wepack.config (if any) ? Thanks

[SciManJD]

Here is the content of my package.json (I just changed some texts):

{ "name": "my-tool", "productName": "MyTool", "version": "0.1.0", "description": "", "author": "me", "private": false, "scripts": { "serve": "set NODE_OPTIONS=--openssl-legacy-provider && ..\jobs\PreBuildActions.bat && vue-cli-service build && ..\jobs\PostBuildActions.bat", "build": "set NODE_OPTIONS=--openssl-legacy-provider && jobs\GetVersions.bat && vue-cli-service build", "lint": "vue-cli-service lint", "electron:build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:build", "electron:serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:build --mode development", "postinstall": "electron-builder install-app-deps", "postuninstall": "electron-builder install-app-deps" }, "main": "background.js", "dependencies": { "@popperjs/core": "^2.11.5", "@vue-flow/core": "^1.19.0", "@vueform/multiselect": "^2.5.6", "@vueform/slider": "^2.1.5", "apexcharts": "^3.35.3", "axios": "^1.1.3", "bootstrap-vue": "^2.22.0", "bootstrap-vue-3": "^0.5.1", "core-js": "^3.6.5", "data-uri-to-buffer": "^4.0.1", "electron-builder": "^23.6.0", "electron-window-state": "^5.0.3", "file-saver": "^2.0.5", "find-process": "^1.4.7", "floating-vue": "^2.0.0-beta.20", "form-wizard-vue3": "^1.1.0", "html2canvas": "^1.4.1", "is-electron": "^2.2.1", "jquery": "^3.7.0", "lightvue": "^1.5.1", "mitt": "^3.0.0", "typescript": "^5.0.4", "vue": "^3.2.36", "vue-autosize-input": "^0.1.1", "vue-dock-menu": "^1.1.0", "vue-good-table": "^2.21.11", "vue-good-table-next": "^0.2.1", "vue-i18n": "^9.2.2", "vue-input-autowidth": "^2.2.0", "vue-router": "^4.0.16", "vue3-apexcharts": "^1.4.1", "vue3-tree-vue": "^1.0.17", "vuex": "^4.0.2", "xlsx-js-style": "^1.2.0", "xml2js": "^0.6.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.2.37", "babel-eslint": "^10.1.0", "electron": "^13.0.0", "electron-devtools-installer": "^3.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", "vue-cli-plugin-electron-builder": "~2.1.1" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

[geekhybrid]

Thanks, do you have a webpack config on the project ?

[SciManJD]

No, I don't.

[geekhybrid]

No, I don't.

Having a look...

[SciManJD]

Hi! Did you find something concerning my problem?

[geekhybrid]

Hi! Did you find something concerning my problem?

Hi @SciManJD , Yeah, I think so. Can you try this workaround in your project? https://github.com/PaulLeCam/react-leaflet/issues/883#issue-894454397. Please let me know how it goes. Thanks.

I am working on the v2.0 of this package to add other richer functionalities and better testing.

[SciManJD]

Installing of the plugin that transpiles nullish coalescing operator didn't help. But I don't think that this is the problem in my case. Looking at the error, mentioned above, I don't see such operator.

[geekhybrid]

Installing of the plugin that transpiles nullish coalescing operator didn't help. But I don't think that this is the problem in my case. Looking at the error, mentioned above, I don't see such operator.

item.children?.forEach(child => { | child.checkedStatus =

[SciManJD]

item.children?.forEach(child => { | child.checkedStatus =

OK! This is another variant of the nullish coalescing operator. But I intsalled plugin and changed my babel.config.json from:

module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ] }

to:

module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], 'plugins': [ '@babel/plugin-transform-nullish-coalescing-operator' ] }

But I get the same error. I see that other people also couldn't solve the problem. Am I doing something wrong?

[geekhybrid]

_item.children?.forEach(child => {

| child.checkedStatus = _

OK! This is another variant of the nullish coalescing operator. But I intsalled plugin and changed my babel.config.json from:

module.exports = {

presets: [

'@vue/cli-plugin-babel/preset'

]

}

to:

module.exports = {

presets: [

'@vue/cli-plugin-babel/preset'

],

'plugins': [

'@babel/plugin-transform-nullish-coalescing-operator'

]

}

But I get the same error. I see that other people also couldn't solve the problem. Am I doing something wrong?

Hard to say.

For your sakes, I will remove the operator and publish an update today. Thanks

[SciManJD]

Great. Thank you so much and sorry for the additional effort, but I really would like to have this new feature.

[geekhybrid]

Hi @SciManJD Please checkout this patch, and let me know if you experience any wierdness Thanks.

vue3-tree-vue@1.0.20-nullable-patch

[SciManJD]

Hi!

I installed the patched version with: npm install vue3-tree-vue@1.0.20-nullable-patch

I see now in my package.json the the version is changed: ... "vue3-tree-vue": "^1.0.20-nullable-patch", ...

But when I build I set the following error:

error in ./node_modules/vue3-tree-vue/dist/vue3-tree-vue.esm.js

| state.emitItemCheckedChange(child);

@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/DeviceTree.vue?vue&type=script&lang=js 2:0-40 9:4-15 @ ./src/components/DeviceTree.vue?vue&type=script&lang=js @ ./src/components/DeviceTree.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/NavigationScreen.vue?vue&type=script&lang=js @ ./src/views/NavigationScreen.vue?vue&type=script&lang=js @ ./src/views/NavigationScreen.vue @ ./src/router/index.js @ ./src/main.js @ multi ./src/main.js

[geekhybrid]

Hi!

I installed the patched version with: npm install vue3-tree-vue@1.0.20-nullable-patch

I see now in my package.json the the version is changed: ... "vue3-tree-vue": "^1.0.20-nullable-patch", ...

But when I build I set the following error:

error in ./node_modules/vue3-tree-vue/dist/vue3-tree-vue.esm.js

| state.emitItemCheckedChange(child);

@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/DeviceTree.vue?vue&type=script&lang=js 2:0-40 9:4-15 @ ./src/components/DeviceTree.vue?vue&type=script&lang=js @ ./src/components/DeviceTree.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/NavigationScreen.vue?vue&type=script&lang=js @ ./src/views/NavigationScreen.vue?vue&type=script&lang=js @ ./src/views/NavigationScreen.vue @ ./src/router/index.js @ ./src/main.js @ multi ./src/main.js

Hard to say what is actually going on. I will try to get the next version out as soon as possible. But I can also look at this issue again during the weekend. Meanwhile how do you import this component ?

import Vue3-tree-vue from 'vue3-tree-vue' or import Vue3-tree-vue from 'vue3-tree-vue/dist/...'

[geekhybrid]

@SciManJD after having a second, sorry third, sorry fourth look. We have 1.0.22. I have added a configuration to transpile the nullable operators. I also inspected the .dist folder to be sure you would not be having that in the build. I think that should solve the issue for you or anyone else.

Please retest.

[SciManJD]

Meanwhile how do you import this component ?

import Vue3TreeVue from 'vue3-tree-vue' or import Vue3-tree-vue from 'vue3-tree-vue/dist/...'

I import it like this: import Vue3-tree-vue from 'vue3-tree-vue'

I will test the new version immediately, but what to install a main-line or a patch? Please, write what to execute to avoid mistakes from my side... And another question, what is better, to uninstall the old version and to install the new one or just to update?

[geekhybrid]

Meanwhile how do you import this component ?

import Vue3TreeVue from 'vue3-tree-vue' or import Vue3-tree-vue from 'vue3-tree-vue/dist/...'

I import it like this:

import Vue3-tree-vue from 'vue3-tree-vue'

I will test the new version immediately, but what to install a main-line or a patch? Please, write what to execute to avoid mistakes from my side... And another question, what is better, to uninstall the old version and to install the new one or just to update?

I usually prefer to uninstall older versions first. But when I am in extreme doubt or when I am experiencing weird behaviours, I will;

• Delete your node modules
• Delete package-lock.json
• Update package.json file manually by upgrading the package version to 1.0.22 and then do a simple npm install.

Choice is yours. 🙂 Mistakes aren't fatal.

[SciManJD]

Great news... Now I can build without any problems and then it works just fine. Thanks for the great job to support me...

[geekhybrid]

Great news... Now I can build without any problems and then it works just fine. Thanks for the great job to support me...

Great! Feel free to create an issue if there are newer feature request you'd like.