Support Customisable expander #11

geekhybrid · 2023-06-23T07:24:11Z

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>

…ekhybrid/vue3-tree-vue into feature/customisable-expander

SciManJD · 2023-06-25T19:14:14Z

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 · 2023-06-25T20:22:47Z

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 · 2023-06-26T05:02:35Z

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 · 2023-06-26T22:15:25Z

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 · 2023-06-27T07:15:31Z

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 · 2023-06-27T07:38:29Z

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

SciManJD · 2023-06-27T08:52:54Z

No, I don't.

geekhybrid · 2023-06-27T09:06:34Z

No, I don't.

Having a look...

SciManJD · 2023-07-04T07:25:01Z

Hi! Did you find something concerning my problem?

geekhybrid · 2023-07-04T10:28:07Z

Hi! Did you find something concerning my problem?

Hi @SciManJD ,
Yeah, I think so.
Can you try this workaround in your project? PaulLeCam/react-leaflet#883 (comment). 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 · 2023-07-04T19:34:04Z

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 · 2023-07-04T20:25:31Z

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 · 2023-07-05T05:16:15Z

_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 · 2023-07-05T05:30:47Z

_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 · 2023-07-05T05:40:03Z

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

geekhybrid · 2023-07-06T06:34:45Z

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 · 2023-07-06T08:34:51Z

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 · 2023-07-06T16:59:13Z

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 · 2023-07-06T17:37:42Z

@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 · 2023-07-06T19:32:37Z

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 · 2023-07-06T21:28:24Z

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 · 2023-07-07T06:20:08Z

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

geekhybrid · 2023-07-07T07:33:18Z

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.

geekhybrid and others added 4 commits June 23, 2023 08:23

Support Customisable expander

17e7ee6

Support Customisable expander

dc9a62d

Merge branch 'feature/customisable-expander' of https://github.com/ge…

cbe7062

…ekhybrid/vue3-tree-vue into feature/customisable-expander

Update README.md

5d20a89

geekhybrid merged commit 7e5a9c8 into main Jun 23, 2023

geekhybrid deleted the feature/customisable-expander branch June 23, 2023 13:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support Customisable expander #11

Support Customisable expander #11

geekhybrid commented Jun 23, 2023 •

edited

Loading

SciManJD commented Jun 25, 2023

geekhybrid commented Jun 25, 2023

SciManJD commented Jun 26, 2023

geekhybrid commented Jun 26, 2023

SciManJD commented Jun 27, 2023

geekhybrid commented Jun 27, 2023

SciManJD commented Jun 27, 2023

geekhybrid commented Jun 27, 2023

SciManJD commented Jul 4, 2023

geekhybrid commented Jul 4, 2023

SciManJD commented Jul 4, 2023

geekhybrid commented Jul 4, 2023

SciManJD commented Jul 5, 2023 •

edited

Loading

geekhybrid commented Jul 5, 2023

SciManJD commented Jul 5, 2023

geekhybrid commented Jul 6, 2023

SciManJD commented Jul 6, 2023

geekhybrid commented Jul 6, 2023

geekhybrid commented Jul 6, 2023

SciManJD commented Jul 6, 2023 •

edited

Loading

geekhybrid commented Jul 6, 2023 •

edited

Loading

SciManJD commented Jul 7, 2023

geekhybrid commented Jul 7, 2023

Support Customisable expander #11

Support Customisable expander #11

Conversation

geekhybrid commented Jun 23, 2023 • edited Loading

SciManJD commented Jun 25, 2023

geekhybrid commented Jun 25, 2023

SciManJD commented Jun 26, 2023

geekhybrid commented Jun 26, 2023

SciManJD commented Jun 27, 2023

geekhybrid commented Jun 27, 2023

SciManJD commented Jun 27, 2023

geekhybrid commented Jun 27, 2023

SciManJD commented Jul 4, 2023

geekhybrid commented Jul 4, 2023

SciManJD commented Jul 4, 2023

geekhybrid commented Jul 4, 2023

SciManJD commented Jul 5, 2023 • edited Loading

geekhybrid commented Jul 5, 2023

SciManJD commented Jul 5, 2023

geekhybrid commented Jul 6, 2023

SciManJD commented Jul 6, 2023

geekhybrid commented Jul 6, 2023

geekhybrid commented Jul 6, 2023

SciManJD commented Jul 6, 2023 • edited Loading

geekhybrid commented Jul 6, 2023 • edited Loading

SciManJD commented Jul 7, 2023

geekhybrid commented Jul 7, 2023

geekhybrid commented Jun 23, 2023 •

edited

Loading

SciManJD commented Jul 5, 2023 •

edited

Loading

SciManJD commented Jul 6, 2023 •

edited

Loading

geekhybrid commented Jul 6, 2023 •

edited

Loading