Messages

SVAR provides an extended messaging system for interaction between a user and an application. There are two main types of messages: Notices and Modal boxes. Depending on the type of a message, you can either display some short notifications or show modal boxes that require some user's activity.

Notice boxes

A notice message box appears on a button click in the top right corner of the window. It can be colored according to the type of a notice and contain a text message.

Notice

Exploring types of notices

All in all, there are 5 types of notice messages available:

default (white background)
"info" (blue background)
"warning" (orange background)
"success" (green background)
"danger" (red background)

Type	Image
default (type:"")
info (type:"info")
warning (type:"warning")
success (type:"success")
danger (type:"danger")

Creating a Notice

To create a notice, make use of the showNotice() helper function. To get access to the helper, you should include it on a page via the getContext() Svelte function as in:

<script>
    import { getContext } from "svelte";

    // getting the helper
    const { showNotice } = getContext("wx-helpers");
</script>

Then you can use the showNotice() function in your code. It takes the following parameters:

text - (string) obligatory, the text to show in a notice. In case of a very long text, a word wrap is applied
type - (string) optional, the type of a notice: an empty value for the default notice box, "info", "warning", "success", "danger" (see details). You can skip this property during initialization. Then a notice message will simply have a white background.
expire - (number) optional, the expire interval for a message in milliseconds, 5000 by default, -1 for not hiding the message

<script>
    import { Button } from "wx-svelte-core";
    import { getContext } from "svelte";

    // getting the helper
    const { showNotice } = getContext("wx-helpers");
</script>

// showing a notice on a button click
<Button click={() => showNotice({   
    type: "info",  
    expire: 6000,  
    text: "Some info" })}>
    Show Info
</Button>

Related sample: Messages

Hiding a notice

By default, a notice disappears under the following conditions:

on clicking the Close button
in 5000 milliseconds after appearing

You can adjust the expire interval with the help of the expire parameter:

<script>
    import { Button } from "wx-svelte-core";
    import { getContext } from "svelte";

    // getting the helper
    const { showNotice } = getContext("wx-helpers");
</script>

<Button click={() => showNotice({   
    type: "success",  
    expire: 10000,  
    text: "Your data is correct" })}>
    OK
</Button>

You can also cancel the expire period by setting the expire:-1 property. In this case a notice will disappear only on a Close button click.

Related sample: Messages

Modal boxes have a more complex structure than notices. They may have a title, contain some text and several buttons, depending to the box's type. Modal boxes add a grey overlay over the user interface, which disappears only when a user clicks a button in the box or the box is hidden by a call of a function.

There are 4 types of modal boxes:

alert - an alert box with one button, used to draw a user's attention
confirm - a confirmation box with two buttons to accept or to decline a further action
prompt - a modal message box with two buttons (submit and cancel) and an input to get some info from a user before proceeding
dialog - a modal message box with any number of buttons and a textarea to enter a user's text

Related sample: Messages

Creating Alert and Confirm boxes

To create an alert or a confirm box, you should use the showModal() helper function. To get access to the helper, you should include it on a page via the getContext() Svelte function as in:

<script>
    import { getContext } from "svelte";

    // getting the helper
    const { showModal } = getContext("wx-helpers");
</script>

Then you can use the showModal() function in your code. It takes the following parameters:

title - the text of the header
message - the text of the modal box body
buttons - an array of buttons for a modal box
ok - a function which is called on click of the OK button
cancel - a function which is called on click of the Cancel button (for a confirm box)

The showModal() method returns a promise:

for a Confirm box the promise resolves if a user clicks OK. The promise rejects if a user clicks Cancel

Confirm.svelte
<script>
    import { Button } from "wx-svelte-core";
    import { getContext } from "svelte";

    // getting the helper
    const { showModal } = getContext("wx-helpers");
</script>

function confirm() {
    showModal({
        title: "Confirm",
        message: "Will we do it ?"
    });
}

<Button click={confirm}>Show Confirm</Button>

Confirm box

for an Alert box the promise resolves when a user clicks the button

Alert.svelte
<script>
    import { Button } from "wx-svelte-core";
    import { getContext } from "svelte";

    // getting the helper
    const { showModal } = getContext("wx-helpers");
</script>

function alert() {
    showModal({
        message: "Something happens",
        buttons: ["ok"],
    });
}

<Button click={alert}>Show Alert</Button>

Alert box

Related sample: Messages

Creating Prompt and Dialog boxes

To create a prompt or a dialog modal box, you should use the <Modal> component wrapped into the Portal component. The Modal component includes several logical parts: for the header, for the body and for the buttons. Portal allows taking a widget outside the strict structure of the Svelte application and put it wherever you need in the application.

Prompt

To initialize a Prompt modal box, you should wrap the <Modal> component into the Portal one and specify the following properties:

title - the text of the header
ok - a function which is called on click of the OK button
cancel - a function which is called on click of the Cancel button

The body of the Prompt box should contain an input implemented with the help of the Text control.

<script>
    import { Modal, Text, Portal } from "wx-svelte-core";

    function click() {
        // your logic
    }
</script>

<div>
    <Portal>
        <Modal title="Subscribe" ok={click} cancel={click}>
            <Text select={true} focus={true} value="Enter your email" />
        </Modal>
    </Portal>
</div>

Prompt box

Related sample: Messages

Dialog

To initialize a Dialog modal box, you should:

wrap the <Modal> component into the Portal one
use the Textarea control to implement a textarea in the body part
specify the "buttons" slot, where you can place your buttons presented by the Button control

<script>
    import { Modal, Textarea, Button, Portal} from "wx-svelte-core";

    function click() {
        // your logic
    }
</script>

<div>
    <Portal>
        <Modal>
            Your feedback
            <Textarea placeholder="Leave your comment" />
            <div slot="buttons" style="margin-top: 20px;">
                <Button {click}>Yes</Button>
                <Button {click}>No</Button>
                <Button {click}>Maybe</Button>
            </div>
        </Modal>
    </Portal>
</div>

Dialog box

Related sample: Messages

All modal boxes are closed on a button click.

To hide a prompt, you can specify a function and set its name as a value of either the ok or the cancel property.

To hide a dialog you can specify a hiding function and set its name as a value of the click property of the corresponding Button control.

<script>
    import { Modal, Text, Textarea, Button } from "wx-svelte-core";

    let custom1, custom2;
    function hideAll() {
        custom1 = custom2 = false;
    }
</script>

<div class="demo-box">
    <Button type="primary" click={}>
        Show Prompt
    </Button>
    {#if custom1}
        <Modal title="Custom Prompt" ok={hideAll} cancel={hideAll}>
            <Text select={true} focus={true} value="Some" />
        </Modal>
    {/if}

    <Button click={() => (custom2 = !custom2)}>
        Show Dialog
    </Button>
    {#if custom2}           
        <Modal>
            Some text here
            <Textarea placeholder="Some text" />
            <div slot="buttons" style="margin-top: 20px;">
                <Button click={hideAll}>Yes</Button>
                <Button click={hideAll}>No</Button>
                <Button click={hideAll}>Maybe</Button>
            </div>
        </Modal>
    {/if}
</div>

Related sample: Messages

Modal boxes block keyboard events of a page. Only the following keys are available:

"Enter" for accepting an action and for moving to the next line in the textarea of a Dialog box
"Escape" for rejecting an action

You can localize the text of the OK and Cancel buttons of a modal box. For this you need to:

include the Locale component on a page with a modal box and import the necessary locale package on a page.

<script>
    import { Modal, Locale } from "wx-svelte-core";
    import { de } from "wx-core-locales";
</script>

wrap the modal box you want to localize in the <Locale> tag and use the words property to set the necessary locale:

<Locale words={de}>
    <Modal title="Custom Prompt" ok={hideAll} cancel={hideAll}>
        <Text select={true} focus={true} value="Some" />
    </Modal>
</Locale>

Prompt buttons in German

Messages

Notice boxes​

Exploring types of notices​

Creating a Notice​

Hiding a notice​

Modal boxes​

Exploring types of modal boxes​

Creating Alert and Confirm boxes​

Creating Prompt and Dialog boxes​

Prompt​

Dialog​

Hiding modal boxes​

Keyboard navigation in modal boxes​

Localizing modal boxes​

Notice boxes

Exploring types of notices

Creating a Notice

Hiding a notice

Modal boxes

Exploring types of modal boxes

Creating Alert and Confirm boxes

Creating Prompt and Dialog boxes

Prompt

Dialog

Hiding modal boxes

Keyboard navigation in modal boxes

Localizing modal boxes