-3

I have a Vue TreeSelect component in my nuxt application.

The problem is that I want to customize the folding icons in the Treeselect component:

enter image description here

How can I do this ? I tried to modify the css classes, to replace the svg dom child by a custom created with javascript, but I have the impression that this is not the right way to do it...

Edit:

here is the dom structure for the first icon :

enter image description here

As you can see, I can't just change the css class. I need to change the entire svg node.

SkydersZ
  • 133
  • 1
  • 2
  • 9
  • How is it not working with CSS? Are you properly targeting it? Is it deeply nested maybe? – kissu Aug 01 '22 at 14:22
  • The problem is that the folding icons are svg icons which are represented as dom node elements with a path child node. I cannot change the icon with just targeting the css class and adding a `content: url(path/to/my/svg)`. – SkydersZ Aug 01 '22 at 14:28
  • Pretty sure you can hack this one with some display/width and add a pseudo selector to prepend/append anything. Otherwise, you can maybe target a specific DOM node starting from the library's component and replace it with some vanilla JS brand new DOM element. – kissu Aug 01 '22 at 14:37
  • I did change the svg node by a custom svg node that I created in javascript. The only problem that I have is when I click on the unfolding icon '+' (my custom icon) , the css class add a rotated state (--rotate), so my '+' icon rotate. But in my case I want to change my icon '+' to a '-' icon (the folding icon) – SkydersZ Aug 01 '22 at 14:56
  • Again, something that could be solved with CSS (using an `!important`) IMO. – kissu Aug 01 '22 at 16:27
  • It would have been great, but unfortunately no. I've changed my node (created with javascript) to and added an id on it but it seems that the state --rotated is not applied anymore on elements even if the base class is the same. – SkydersZ Aug 01 '22 at 18:19
  • I think adding an 'onclick' attribute on elements might be the way to go, I could forcefully trigger the class change from base class to --rotated. – SkydersZ Aug 01 '22 at 18:26

1 Answers1

0

To solve my problem partially, I needed to replace the <svg></svg> node by a <span></span> node :

// Creation of the new span node 
const plusIcon = document.createElement("span");
plusIcon.setAttribute("class", "vue-treeselect__option-arrow");

After that, I needed to retrieve all the differents nodes having the class vue-treeselect__option-arrow :

const treeOptions = treeMenu.getElementsByClassName("vue-treeselect__option-arrow--rotated");

// Replace all the svg elements by span elements
Array.from(treeOptions).forEach((treeOption) => {
  if (!treeOption.getAttribute("class").includes("--rotate")) {
    treeOptions.parentElement.replaceChild(
      plusIcon.cloneNode(true), treeOptions
    );
  }
});

And in the css part, I have replaced the vue-treeselect__option-arrow class :

.vue-treeselect__option-arrow {
  content: url(path/to/my/svg);
}
SkydersZ
  • 133
  • 1
  • 2
  • 9