feat(vue): support for showModal

[tiagogviegas]

💡 What is the current behavior?

Showing an Modal on Vue differs from other frameworks and has no support for the showModal method.

GitHub Issue: Fixes #1771

🆕 What is the new behavior?

• Added support for showModal to Vue
• Changed to Vite (current recommend way) to build the vue lib (needed because of custom SFC vue components)

🏁 Checklist

A pull request can only be merged if all of these conditions are met (where applicable):

• 🦮 Accessibility (a11y) features were implemented
• 🗺️ Internationalization (i18n) - no hard coded strings
• 📲 Responsiveness - components handle viewport changes and content overflow gracefully
• 📄 Documentation was reviewed/updated (pnpm run docs)
• 🧪 Unit tests were added/updated and pass (pnpm test)
• 📸 Visual regression tests were added/updated and pass (Guide)
• 🧐 Static code analysis passes (pnpm lint)
• 🏗️ Successful compilation (pnpm build, changes pushed)

👨‍💻 Help & support

[changeset-bot]

🦋 Changeset detected

Latest commit: d8b3ad1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@siemens/ix-vue	Minor
@siemens/ix	Minor
@siemens/ix-angular	Minor
@siemens/ix-react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[danielleroux]

@tiagogviegas Thank for contribution great work there 👍! We are doing the review asap, we have to sync the recent activities regarding vue with your PR.

[danielleroux]

@tiagogviegas With PR #1883 we moving our documentation to https://github.com/siemens/ix-docs.

The PR contains some documentation changes, we have two options.

Option 1: You rise a PR regarding the docu changes inside the new repo
Option 2: I will add the changes directly to the documentation after your pr is reviewed/merged?

I would suggest Option 2, less work for you to keep the PRs up 2 date. Just give me a short answer

[tiagogviegas]

@tiagogviegas With PR #1883 we moving our documentation to https://github.com/siemens/ix-docs.

The PR contains some documentation changes, we have two options.

Option 1: You rise a PR regarding the docu changes inside the new repo Option 2: I will add the changes directly to the documentation after your pr is reviewed/merged?

I would suggest Option 2, less work for you to keep the PRs up 2 date. Just give me a short answer

@danielleroux Sure let's go with option 2. Thanks for review it 😄

[danielleroux]

@tiagogviegas With PR #1883 we moving our documentation to https://github.com/siemens/ix-docs.
The PR contains some documentation changes, we have two options.
Option 1: You rise a PR regarding the docu changes inside the new repo Option 2: I will add the changes directly to the documentation after your pr is reviewed/merged?
I would suggest Option 2, less work for you to keep the PRs up 2 date. Just give me a short answer

@danielleroux Sure let's go with option 2. Thanks for review it 😄

Your changes are added to the new PR here: siemens/ix-docs#7

After the #1883 is merged you will get merge conflicts regarding packages/documentation you can just take the incoming main. Thank you!

[danielleroux]

I have tested it with the vue-test-app. I found that the vue test app behave different to the other test apps.
e.g react-test-app
https://github.com/user-attachments/assets/89f6225a-7958-4ba2-aace-de148518df26
(sorry you have to download mov for some reason github preview function of screensharing is not working)

by default:

• backdrop is visible
• animation is shown
• ... other default properties

It looks like the properties of the modal element are not being applied correctly.

[tiagogviegas]

I have tested it with the vue-test-app. I found that the vue test app behave different to the other test apps. e.g react-test-app https://github.com/user-attachments/assets/89f6225a-7958-4ba2-aace-de148518df26 (sorry you have to download mov for some reason github preview function of screensharing is not working)

by default:

• backdrop is visible
• animation is shown
• ... other default properties

It looks like the properties of the modal element are not being applied correctly.

@danielleroux Fixed! Totally missed that.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud