From 0fabc85e05472b2840b76f8c83600a3c7c5ac1a3 Mon Sep 17 00:00:00 2001
From: Bruna <53488109+brunaboeger@users.noreply.github.com>
Date: Tue, 14 May 2024 16:32:07 -0300
Subject: [PATCH] Novas props para o PbDialog (#417)
* feat: added new props and adjusted some styles
* feat: adjusted the version of the library
* chore: removed some infos on storybook documentation
* chore: adjusted storybook doc
---
package.json | 2 +-
.../Dialog/Dialog.stories.mdx | 264 +++++++++++++++---
.../NotificationsAndModals/Dialog/Dialog.vue | 191 +++++++++----
src/components/index.scss | 17 +-
4 files changed, 369 insertions(+), 105 deletions(-)
diff --git a/package.json b/package.json
index 4ceae9e..c3722af 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-polar-bear",
- "version": "4.3.4",
+ "version": "4.3.5",
"author": "adapcon",
"scripts": {
"storybook": "start-storybook --quiet -p 6006 -s ./src/static",
diff --git a/src/components/NotificationsAndModals/Dialog/Dialog.stories.mdx b/src/components/NotificationsAndModals/Dialog/Dialog.stories.mdx
index d9d8427..9d037d5 100644
--- a/src/components/NotificationsAndModals/Dialog/Dialog.stories.mdx
+++ b/src/components/NotificationsAndModals/Dialog/Dialog.stories.mdx
@@ -4,8 +4,16 @@ import PbButton from '@pb/Buttons/Button/Button.vue';
@@ -41,54 +57,161 @@ export const Template = (args, { argTypes}) => ({
props: Object.keys(argTypes),
components: { PbDialog, PbButton },
data() {
- return {
- state: {
- show: false,
- }
- }
- },
- methods: {
- openAlert() {
- this.state.show = true;
+ return {
+ state: {
+ show: false,
}
+ }
+ },
+ methods: {
+ openDialog() {
+ this.state.show = true;
},
+ closeDialog() {
+ this.state.show = false;
+ }
+ },
template: `
-
Open Dialog
+
Open Dialog
state.show = false"
- @action="() => state.show = false"
+ @close-outside="closeDialog"
+ @close="closeDialog"
+ @action="closeDialog"
>
-
-
+
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed.
-
-
-
-
- Voltar
-
-
-
+ />
+
+
+
+ Lorem ipsum dolor sit amet
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed.
+
+
+
+
+
+
+ `,
+});
+
+export const TemplateSimple = (args, { argTypes}) => ({
+ props: Object.keys(argTypes),
+ components: { PbDialog, PbButton },
+ data() {
+ return {
+ state: {
+ show: false,
+ }
+ }
+ },
+ methods: {
+ openDialog() {
+ this.state.show = true;
+ },
+ closeDialog() {
+ this.state.show = false;
+ }
+ },
+ template: `
+
+
Open Simple Dialog
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed.
+
+
+
+ `,
+});
+
+export const TemplateSlots = (args, { argTypes}) => ({
+ props: Object.keys(argTypes),
+ components: { PbDialog, PbButton },
+ data() {
+ return {
+ state: {
+ show: false,
+ }
+ }
+ },
+ methods: {
+ openDialog() {
+ this.state.show = true;
+ },
+ closeDialog() {
+ this.state.show = false;
+ }
+ },
+ template: `
+
+
Open Dialog with Slots
+
+
+
+
+
+
+
+
+
+
+
+
+
`,
@@ -99,20 +222,69 @@ export const Template = (args, { argTypes}) => ({
### Purpose and Use Case
-This component can be used when you need to view simply and quickly Information.
-Currently, it has many styles, and accepts a another components to complement the content.
+The PbDialog component is a simple, customizable dialog box that can be used to display content.
+It has several properties that can be adjusted to fit the needs of the user, including:
-Have 3 slots to use:
-- `icon-header` to add a icon in the header
-- `main` to add the main content
-- `footer` to add a footer content in left side
+| Property | Type | Default | Description |
+|:----------------------------|:------------|:------------|:------------------------------------------------------------------------------------------------|
+| show* | boolean | false | determines whether the dialog box is visible or not |
+| showHeader | boolean | true | determines whether the header is displayed |
+| fixedWidth | string | ' ' | fixed width of the dialog box (if it is not set, the dialog box will adjust to the content) |
+| title | string | ' ' | title of the dialog box |
+| subtitle | string | ' ' | subtitle of the dialog box |
+| buttonText | string | ' ' | text displayed on the action button |
+| buttonTextClose | string | ' ' | text displayed on the close button |
+| buttonStyle | string | background | style of the action button |
+| buttonColor | string | primary | color of the action button |
+| buttonLoading | boolean | false | determines whether the action button is loading |
+| buttonDisabled | boolean | false | determines whether the action button is disabled |
-## Examples
+**Required*
-### Default
+### Slots
+
+The component also provides four slots for customization:
+
+| Slot name | Description |
+|:----------------------------|:--------------------------------------|
+| header-icon | add a space beside the header title |
+| header | add the header content |
+| main | add the main content |
+| footer | add a footer content |
+
+
+### Events
+
+The PbDialog component emits the following events:
+
+| Event name | Description |
+|:----------------------------|:------------------------------------------------------------------------|
+| close | emitted when the close button is clicked (either on header or footer) |
+| close-outside | emitted when the user clicks outside the dialog box |
+| action | emitted when the action button is clicked |
+
+### Good to know
+
+- The PbDialog component has the minimum width of `200px`. If you need to adjust the width, you can use the `fixedWidth` property.
+
+
+
+## Examples
+
+
+
+
diff --git a/src/components/NotificationsAndModals/Dialog/Dialog.vue b/src/components/NotificationsAndModals/Dialog/Dialog.vue
index d2de792..d8dd1e6 100644
--- a/src/components/NotificationsAndModals/Dialog/Dialog.vue
+++ b/src/components/NotificationsAndModals/Dialog/Dialog.vue
@@ -3,55 +3,69 @@