@mamba/dialog

O módulo `Dialog` é composto por 3 componentes: `Dialog`, `ConfirmationDialog` e `PromisedDialog`. Cada um deles cria um modal próprio de tela cheia com suas especificações. O `PromisedDialog` é exibido durante a execução de uma `Promise` e após sua concl

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@mamba/dialog
3.5.102 months ago4 years agoMinified + gzip package size for @mamba/dialog in KB

Readme

Dialog
O módulo Dialog é composto por 3 componentes: Dialog, ConfirmationDialog e PromisedDialog. Cada um deles cria um modal próprio de tela cheia com suas especificações. O PromisedDialog é exibido durante a execução de uma Promise e após sua conclusão fecha o modal. Já o ConfirmationDialog exibe uma tela com dois botões que controlam o fluxo da aplicação. Para casos de apenas uma exibição de mensagem durante um período de tempo, o uso do Dialog é aconselhável.
<Dialog ...props />
| Parâmetros | Descrição | Tipo | Padrão | | ---------- | -------------------------------------------------- | --------- | ----------- | | align | Alinhamento vertical do conteúdo (top, center) | string | center | | bgColor | Define a cor de fundo do modal | string | '#e3e3e3' | | textColor | Define a cor do texto do modal | boolean | '#4a4a4a' | | isOpen | Define se o modal vai estar aberto por padrão | boolean | 'false' | | title | Título do modal | string | undefined | | fullscreen | Define se o modal ocupará a tela inteira | boolean | false | | className | Classe a ser adicionado ao elemento pai do componente | string | `` |
<ConfirmationDialog ...props />
| Parâmetros | Descrição | Tipo | Padrão | | ------------- | --------------------------------------------- | --------- | ------------- | | negativeLabel | Texto no Botão de Confirmação Negativa | string | 'Cancelar' | | positiveLabel | Texto no Botão de Confirmação Positiva | string | 'Confirmar' | | isOpen | Define se o modal vai estar aberto por padrão | boolean | 'false' | | title | Título do modal | string | undefined | | className | Classe a ser adicionado ao elemento pai do componente | string | `` |
<PromisedDialog ...props />
| Parâmetros | Descrição | Tipo | Padrão | | --------- | ---------------------------------------------- | --------- | ----------- | | delay | Tempo de espera depois de executar a Promise | string | 'right' | | promise | A Promise a ser executada | boolean | false | | isOpen | Define se o modal vai estar aberto por padrão | boolean | 'false' | | title | Título do modal | string | undefined | | className | Classe a ser adicionado ao elemento pai do componente | string | `` |
<Popup ...props />
| Parâmetros | Descrição | Tipo | Padrão | | --------- | ---------------------------------------------- | --------- | --------- | | isOpen | Define se o pop-up vai estar aberto por padrão | boolean | 'false' |

Eventos

<Dialog ... on:event="..." />
| Eventos | Disparado quando ... | Tipo | | ------ | --------------------- | ------------ | | open | O diálogo for exibido | function() | | close | O diálogo fechar | function() |

Exemplos:

Chama myMethod() quando o diálogo for exibido.
<Dialog on:open="myMethod()" />

Chama o console.log quando o diálogo fechar.
<Dialog on:close="console.log('Dialog fechou')" />

<PromisedDialog ... on:event="..." />
| Eventos | Descrição | Tipo | | ------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------------- | | success | Especifique uma função que será chamada quando a Promise do diálogo for de sucesso(.then). Recebe o valor da Promise.resolve | function(event) | | failure | Especifique uma função que será chamada quando a Promise do diálogo for de falha(.catch). Recebe o valor da Promise.reject | function(event) |

Exemplos:

Chama console.log quando a Promise for de sucesso.
<PromisedDialog on:success="console.log('promise success', event)" />

Chama o método promiseFailed quando o Promise falhar.
<PromisedDialog on:failure="promiseFailed(event)" />

... methods: { promiseFailed(event) { console.log(event) }, } ...

<ConfirmationDialog ... on:event="..." />
| Eventos | Descrição | Tipo | | -------- | ---------------------------------------------------------------------------------------------------------------- | ------------ | | negative | Especifique uma função que será chamada quando o diálogo receber a ação negativa ou do botão vermelho do teclado | function() | | positive | Especifique uma função que será chamada quando o diálogo receber a ação positiva ou do botão verde do teclado | function() |

Exemplos:

Chama myMethod() quando o diálogo receber ação positiva.
<ConfirmationDialog on:positive="myMethod()" />

Chama o console.log quando o diálogo receber ação negativa.
<ConfirmationDialog on:negative="console.log('on:negative')" />

<Popup ... on:event="..." />
| Eventos | Disparado quando ... | Tipo | | ------ | -------------------- | ------------ | | open | O pop-up for exibido | function() | | close | O pop-up fechar | function() |

Exemplos:

Chama myMethod() quando o diálogo for exibido.
<Popup on:open="myMethod()" />

Chama o console.log quando o diálogo fechar.
<Popup on:close="console.log('Dialog fechou')" />

Métodos

Dialog.open(duration)

Abre o Dialog e o mantém aberto pelo tempo (duration em milissegundos) especificado.

Dialog.close(delay)

Fecha o Dialog após o tempo (delay em milissegundos) especificado.

ConfirmationDialog.open(duration)

Abre o ConfirmationDialog e o mantém aberto pelo tempo (duration em milissegundos) especificado.

ConfirmationDialog.close()

Fecha o ConfirmationDialog.

Popup.open()

Abre o Popup.

Popup.close()

Fecha o Popup.

Slots

<Dialog ... />
| Slot | Descrição | | ----- | ------------------------------------------------------------------------------------------- | | extra | O slot extra pode ser usado para adicionar conteúdo adicional após a mensagem do diálogo. |


Exemplo:
<Dialog>
  Minha mensagem
  <div slot="extra">Conteúdo extra</div>
</Dialog>

<ConfirmationDialog ... />
| Slot | Descrição | | ------ | ----------------------------------------------------------------------------------------------- | | footer | O slot footer pode ser usado para adicionar conteúdo no final do diálogo, ou terceiro botão. |


Exemplo:
<ConfirmationDialog>
  <div slot="footer">Conteúdo final</div>
</ConfirmationDialog>

<Popup ... />
| Slot | Descrição | | ---- | --------------------------------------------------------------- | | Html | O slot pode ser usado para adicionar conteúdo dentro do pop-up. |


Exemplo:
<Popup>
  <h1>Component Pop-up<h1>
  <p>Texto de descrição</p>
</Popup>