v3.8.3

VueUiDag

• Slightly trim the edge path when arrows are present, to avoid seeing the edge tip when the arrow is highlighted
• Expose the graph orientation ('TB' | 'RL' | 'BT' | 'LR') in scoped slots
• Add the #free-node-label scoped slot, to customize labels inside an exposed svg G element:

   <VueUiDag :dataset="dataset" :config="config">
        <template #free-node-label="{ node, orientation }">
            <!-- Content will be injected inside a svg G element -->
            <!-- Use this to place the label below the node, for example -->
            <text :x="node.x" :y="node.y + node.height" fill="black" text-anchor="middle">
                {{ node.label }}
            </text>
        </template>
    </VueUiDag>

Docs are up to date

v3.8.1

VueUiDag

• Add optional chart dimensions and responsive mode:

const config = ref({
  responsive: false, // new
  style: {
    chart: {
      width: null, // new
      height: null, // new
    }
  }
})

Docs are up to date

v3.8.0

VueUiDag new component ! 🎉

Enregistrement.de.l.ecran.2025-12-07.a.17.58.38.mov

Create easily a performant DAG graph

• Simple dataset:

 const dataset = ref({
        nodes: [
            { id: "A", label: "A",},
            { id: "B", label: "B",},
            { id: "C", label: "C", backgroundColor: '#FF0000', color: '#FFFFFF'},
            { id: "D", label: "D" },
        ],
        edges: [
            { from: "A", to: "B",},
            { from: "B", to: "A" },
            { from: "B", to: "A" },
            { from: "C", to: "A", color: '#FF0000'},
            { from: "B", to: "D" },
            { from: "C", to: "D", color: '#FF0000' },
            { from: "D", to: "A" },
        ]
    });

• Customize everything through the config object (node size, tooltips, arrows, etc)
• Customize content through comprehensive slots (node content, tooltips, labels)
• Pan zoom feature

Documentation is up to date
View examples

A chart maker is also available.

v3.7.16

VueUiCursor

• Fix crosshair issue when centerCircleRadius is updated dynamically
• Manage error gracefully when a provided config.parentId is not (yet) available in the DOM

VueUiDigits

• Add a config attribute to control digit thickness:

const config = ref({
  digits: {
    thickness: 1, // new
  },
});

VueUiSmiley

• Refactor component to a leaner version. No change in functionality.

VueUiIcon

• Add new icons: 'triangleInformation', 'triangleExclamation'

Docs are up to date

v3.7.15

VueUiFlow

• Add config option to show curved links:

• Config update:

const config = ref({
  style:{
    chart: {
      links:  {
        smooth: true, // new
      },
      nodes: {
        labels: {
          showValue: true, // new
        }
      }
    }
  }
})

Docs are up to date

v3.7.14

VueUiWordCloud

• 3x performance improvement on the word placement algorithm
• Fix word size issues on small datasets

Docs are up to date

v3.7.13

VueUiDonutEvolution #282

• Add missing themes for donut in dialog

Docs are up to date

v3.7.12

VueUiDonutEvolution #279

• Fix scale offsetX not applied from config

BaseDraggableDialog built-in component #278

• Change css class to avoid conflicts with UI libraries - by @ujaved931 🚀
• Improve accessibility features

VueUiStackline

• Treat null values as zero in area computation to fix discontinuous area fills when null values are present in a series.

v3.7.11

VueUiSparkStackbar

• Fix legend value & percentage not showing when animation is disabled

Dev deps

• Bump vue from 3.5.24 to 3.5.25

v3.7.10

VueUiParallelCoordinatePlot

• Pass series shapes to the legend (fix legend only showing circle markers when custom shapes are defined)

VueUiWordCloud, VueUiMolecule

• Add button in user options menu to lock / unlock the pan zoom feature
• Expose the toggleZoom method to programmatically toggle from the parent
• New config attributes:

const config = ref({
  userOptions: {
    buttons: {
      zoom: true, // new
    },
    buttonTitles: {
      zoom: "Toggle zoom lock", // new
    },
    callbacks: {
      zoom: null, // new
    },
  },
});

• Add the #optionZoom scoped slot to customize the button content in the user menu:

<VueUiWordCloud :dataset="dataset" :config="config">
  <template #optionZoom="{ isZoomLocked }">
    <div>LOCKED: {{ isZoomLocked }}</div>
  </template>
</VueUiWordCloud>

VueUiMolecule

• Fix annotator drawing feature not working
• Fix links disappearing when config changes dynamically

VueUiIcon

Add new icons:

• zoomLock
• zoomUnlock
• lock
• unlock

Docs website is up to date