Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(NcDialog): Allow to make the dialog a form #5932

Merged
merged 2 commits into from
Aug 8, 2024

Conversation

susnux
Copy link
Contributor

@susnux susnux commented Aug 6, 2024

☑️ Resolves

This allows us to make simple small dialogs like asking for a password, asking for a filename or similar while having proper HTML semantics and native form validation.

🖼️ Screenshots

Bildschirmaufnahme_20240806_195309.webm

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable
  • 3️⃣ Backport to next requested with a Vue 3 upgrade

@susnux susnux added enhancement New feature or request 3. to review Waiting for reviews feature: dialog Related to the dialog component labels Aug 6, 2024
@susnux susnux added this to the 8.17.0 milestone Aug 6, 2024
Copy link
Contributor

@skjnldsv skjnldsv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love it!!!

@susnux
Copy link
Contributor Author

susnux commented Aug 6, 2024

/backport to next

Copy link
Contributor

@ShGKme ShGKme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.

src/components/NcDialog/NcDialog.vue Outdated Show resolved Hide resolved
src/components/NcDialog/NcDialog.vue Outdated Show resolved Hide resolved
Comment on lines 448 to 457
const handleButtonClose = () => {
// Skip close if invalid dialog
if (dialogTagName.value === 'form' && !dialogElement.value.reportValidity()) {
return
}
handleClosing()
window.setTimeout(() => handleClosed(), 300)
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note for future - it's more common case when a dialog button should not close it. This behavior forces to use custom buttons instead of dialog buttons.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe allow returning false from the callback to prevent close?

@ShGKme
Copy link
Contributor

ShGKme commented Aug 7, 2024

Hacked 😈

dialog

This allows us to make simple small dialogs like asking for a password,
asking for a filename or similar while having proper HTML semantics
and native form validation.

Co-authored-by: Grigorii K. Shartsev <me@shgk.me>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux
Copy link
Contributor Author

susnux commented Aug 7, 2024

Hacked 😈

That is default and expected native validation: Only user input is validated not default values.
But I adjusted the example :)

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux susnux merged commit cafa799 into master Aug 8, 2024
19 checks passed
@susnux susnux deleted the feat/allow-dialog-form branch August 8, 2024 13:35
@susnux susnux mentioned this pull request Aug 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews enhancement New feature or request feature: dialog Related to the dialog component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants