BaseDraggableDialog - modal css class can conflict with UI libraries

[graphieros]

Discussed in #277

^{Originally posted by kudr9 November 25, 2025}

<script setup lang="ts">
	import { ref } from 'vue';
	import { VueDataUi, type VueUiDonutEvolutionDatasetItem, type VueUiDonutEvolutionConfig } from 'vue-data-ui';
	import 'vue-data-ui/style.css';

	const dataset = ref<VueUiDonutEvolutionDatasetItem[]>([
		{
			name: 'Serie 1',
			values: [55, 34, 21, 13, 8, 5, 8, 13, 21, 34, 55],
		},
		{
			name: 'Serie 2',
			values: [1, 12, 24, 32, 5, 8, 13, 21, 34, 55, 89],
		},
		{
			name: 'Serie 3',
			values: [16, 2, 3, 5, 28, 13, 21, 34, 55, 89, 134],
		},
		{
			name: 'Serie 4',
			values: [5, null, 5, 5, 5, 5],
		},
	]);
	const config = ref<VueUiDonutEvolutionConfig>();
</script>

<template>
	<VueDataUi
		component="VueUiDonutEvolution"
		:dataset="dataset"
		:config="config"
	/>
</template>

Hello! Thanks for the vue-data-ui. Its very beautiful and useful tool!
This code is from the app.vue. Why doesn't a modal window open when I click on a specific donut?

[graphieros]

.modal css class on BaseDraggableDialog possibly conflicts with UI libraries.

Solution: use a vue-data-ui scpecific css class

[ujaved931]

@graphieros

Hi, can I work on this if no one else has picked it up yet?

[graphieros]

@ujaved931 Of course!

[graphieros]

@ujaved931

I'm planning to roll-out a patch by the end of the week.
Let me know if I can expect your contribution by then, I would love to include it, since it touches all dialogs of the library, and it's a key fix :)

Cheers

[ujaved931]

@ujaved931

I'm planning to roll-out a patch by the end of the week. Let me know if I can expect your contribution by then, I would love to include it, since it touches all dialogs of the library, and it's a key fix :)

Cheers

Hey, I will start working on this tomorrow and hopefully have a merge request by early friday if not end of day tomorrow.

A quick question:

Is there a way to see the dialog when I run the project locally? Clicking on elements does not seem to be working, is there any option in config knobs perhaps?

[graphieros]

@ujaved931

Perfect.

In the project, open App.vue, which is the hub to manually test components.
Change the component line 133 to VueUiDonutEvolution
Then npm run dev will let you checkout the result (see CONTRIBUTING.md for setup steps)

Don't hesitate if you have other questions:)

PS. What do you mean by "Clicking on elements does not seem to be working" ?

[ujaved931]

@graphieros I was just thinking of a way to open the dialog mentioned in this defect. I tried clicking on the dataset in the charts but that was not initializing the dialog so was just wondering if there is an option in the config knobs listed under the charts.

I will give this a go.

[graphieros]

@ujaved931

Ok, let me know if you have any difficulty running the testing arena locally. It's not the most friendly setup to be honest, I need to make it more inviting.

Did you manage to run the testing arena ?
You should see this content:

And when clicking on a donut:

[ujaved931]

@ujaved931

Ok, let me know if you have any difficulty running the testing arena locally. It's not the most friendly setup to be honest, I need to make it more inviting.

Did you manage to run the testing arena ? You should see this content:

And when clicking on a donut:

Yes I was able to run this, thank you for the help. Working on it now.

[graphieros]

@ujaved931
I'm working on a nicer manual testing environment.
Contributors are rare for now, but it should be more welcoming ^^