VueUiMolecule allowed selection of datapoints located below dataLabels

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.74",
+  "version": "2.0.75",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -3325,7 +3325,7 @@ function treemapSelect(data) {
         </template>
       </Box>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_molecule)">
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_molecule)">
         <template #title>
           <BaseIcon name="chartCluster"/>
           VueUiMolecule
@@ -4019,7 +4019,7 @@ function treemapSelect(data) {
         </template>
       </Box>
 
-      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_quadrant)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_quadrant)">
         <template #title>
           <BaseIcon name="chartQuadrant" />
           VueUiQuadrant

src/App.vue

@@ -8,7 +8,7 @@
                     :fill="color"
                     :font-size="node.circleRadius"
                     text-anchor="middle"
-                    style="opacity:0.8"
+                    style="opacity:0.8; pointer-events: none;"
                 >
                     {{ node.name }}
                 </text>

src/atoms/RecursiveLabels.vue

@@ -605,10 +605,10 @@ defineExpose({
             :isCustom="moleculeConfig.style.chart.tooltip.customFormat && typeof moleculeConfig.style.chart.tooltip.customFormat === 'function'"
         >
             <template #tooltip-before>
-                <slot name="tooltip-before" v-bind="{...dataTooltipSlot}"></slot>
+                <slot name="tooltip-before" v-bind="{ ...dataTooltipSlot }"></slot>
             </template>
             <template #tooltip-after>
-                <slot name="tooltip-after" v-bind="{...dataTooltipSlot}"></slot>
+                <slot name="tooltip-after" v-bind="{ ...dataTooltipSlot }"></slot>
             </template>
         </Tooltip>
 
@@ -620,10 +620,10 @@ defineExpose({
                 :config="dataTable.config"
                 :title="`${moleculeConfig.style.chart.title.text}${moleculeConfig.style.chart.title.subtitle.text ? ` : ${moleculeConfig.style.chart.title.subtitle.text}` : ''}`"
             >
-                <template #th="{th}">
+                <template #th="{ th }">
                     <div v-html="th" style="display:flex;align-items:center"></div>
                 </template>
-                <template #td="{td}">
+                <template #td="{ td }">
                     {{ td.name || td }}
                 </template>
             </DataTable>