# svelma-pro
用户警报，提示和确认对话框

# Dialog

## 用户警报，提示和确认对话框

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.

Codesandbox

    <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.

Codesandbox

    <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 | — | —