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 - - - + /> + + + + + +
+ `, +}); + +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 + + + +
+ `, +}); + +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 {Template.bind({})} + + + + {TemplateSimple.bind({})} + + + + + + {TemplateSlots.bind({})} + + 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 @@
-
-
+
+
-
- -

- {{ title }} -

+
+ +

{{ title }}

{{ subtitle }}
+
-
+ +
-
-
- -
-
+ +
+ + +
- Fechar + {{ buttonTextClose }} + @@ -60,6 +74,10 @@
+
@@ -70,9 +88,11 @@ import { validateColor } from '@pb/utils/validator'; export default { name: 'PbDialog', + components: { PbButton, }, + props: { title: { type: String, @@ -105,84 +125,149 @@ export default { default: '', }, + buttonTextClose: { + type: String, + default: '', + }, + buttonColor: { type: String, - default: 'secondary', + default: 'primary', validator: color => validateColor(color), }, + buttonStyle: { type: String, default: 'background', }, + + fixedWidth: { + type: String, + default: '', + }, + + showHeader: { + type: Boolean, + default: true, + }, + }, + + emits: ['close', 'action', 'close-outside'], + + computed: { + showFooter() { + return this.buttonText || this.buttonTextClose || this.$slots.footer; + }, }, - emits: ['close', 'action'], methods: { close() { this.$emit('close', this.type); }, + action() { this.$emit('action', this.type); }, + + closeOutside() { + this.$emit('close-outside', this.show); + }, }, }; diff --git a/src/components/index.scss b/src/components/index.scss index 720633d..5c9b42f 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -2,8 +2,20 @@ @import './icons.scss'; @import './animations.scss'; @import './widths.scss'; +@import './scss/colors'; :root { + /* Semantic */ + --color-title: #{$color-gray-90}; + --color-text: #{$color-gray-40}; + --border: 1px solid #{$color-gray-10}; + + /** Light colors */ + --color-warning-light: #f8e6d1; + --color-success-light: #d9e4d1; + --color-info-light: #EDF7FF; + --color-gray-40-light: #F0F1F3; + /** default colors */ --color-primary: #3a79cc; --color-secondary: #103972; @@ -52,11 +64,6 @@ --color-overlay: rgba(0, 0, 0, .5); --color-hover: #EBF0F4; - /** Light colors */ - - --color-warning-light: #f8e6d1; - --color-success-light: #d9e4d1; - --color-info-light: #EDF7FF; } /* roboto-300 - latin */