svelma-pro

Alert and Dialog

Use Dialog.alert() and Dialog.confirm() to create these kinds of dialogs. The methods return a promise that is resolved when the user cancels or confirms the alert. If the use closes/cancels the value will be false. If the user clicks the confirm button the value will be true. The first argument can either be an object of options or a string to use as the message.

<script>
  import { Button, Dialog, Toast } from 'svelma-pro'

  function alert() {
    Dialog.alert('Alles ist gut')
  }

  const thenHandler = result => Toast.create(`You ${result ? 'confirmed' : 'canceled'}`)

  function confirm(type) {
    switch(type) {
      case 'custom':
        return Dialog.confirm({
          message: 'This is a custom confirmation message',
          title: "I'm a title!",
          type: 'is-danger',
          icon: 'times-circle'
        })
        .then(thenHandler)
      default:
        Dialog.confirm('Shall we dance?')
        .then(thenHandler)
    }
  }
</script>

<Button type="is-primary" on:click={() => alert()}>Dialog</Button>
<Button type="is-info" on:click={() => confirm()}>Confirm</Button>
<Button type="is-danger" on:click={() => confirm('custom')}>Confirm (custom)</Button>

Prompt

Use Dialog.prompt() to programmatically create prompts for user input. By default the dialog will be created with a required text input. You can control the props (attributes) on the prompt with the inputProps prop. prompt() returns a promise that will be resolved with the prompt input value if the user confirms, or null if they cancel/close.

<script>
  import { Button, Dialog, Toast } from 'svelma-pro'

  function prompt(opts) {
    Dialog.prompt({
      message: "What is your quest?",
      ...opts
    })
    .then(prompt => Toast.create(`Your answer was: '${prompt}'`))
  }
</script>

<Button type="is-primary" on:click={() => prompt()}>Prompt</Button>
<Button type="is-link" on:click={() => prompt({ message: 'Which date?', inputProps: { type: 'date' }})}>Date Prompt</Button>

API

Name	Description	Type	Values	Default
`title`	Show a header on the dialog with this text, optional	String	—	—
`message`	Text or html message for this dialog	String	—	—
`confirmText`	Text to show on the confirmation button, optional	String	—	`OK`
`cancelText`	Text to show on the cancel button, optional	String	—	`Cancel`
`focusOn`	Focus on confirm or cancel button when dialog opens, optional	String	`confirm`, `cancel`	`confirm`
`icon`	Show this icon on left-side of dialog. It will use the color from `type`, optional	String	—	—
`iconPack`	Fontawesome icon pack to use. By default the `Icon` component uses `fas`, optional	String	`fas`, `fab`, `etc...`	—
`hasInput`	Show an input field, optional	Boolean	—	`false`
`showCancel`	Show the cancel button. True for `confirm()`, optional	Boolean	—	`false`
`size`	Dialog's size, optional	String	`is-small`, `is-medium`, `is-large`	—
`type`	Type (color) to use on confirm button and icon, optional	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger`	`is-primary`
`animation`	Animation to use when showing dialog, optional	String, function	`Any transition name that ships with Svelte`, `or a custom function`	`scale`
`animProps`	Props to pass to animation function, optional	Object	—	`{ start: 1.2 }`
`inputProps`	Props (attributes) to use to on prompt input element, optional	Object	—	—