Vitral 0.2
Messages

BlockUI

A veil over a region, or the whole page, while it is busy, making what is under it inert and saying why.

WAI-ARIA tested

Import

main.ts
import { BlockUI } from '@vitral/vue';

A region

<script setup lang="ts">import { BlockUI, Button, InputText, ProgressSpinner } from '@vitral/vue';import { ref } from 'vue'; const blocked = ref(false);</script> <template>    <Button :label="blocked ? 'Unblock' : 'Block'" style="align-self: flex-start" @click="blocked = !blocked" />    <BlockUI :blocked="blocked" label="Saving the form">        <div style="display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border: 1px solid var(--vt-content-border-color); border-radius: 8px">            <label for="block-name">Name</label>            <InputText id="block-name" />            <Button label="Save" style="align-self: flex-start" />        </div>        <template #mask><ProgressSpinner aria-hidden="true" /></template>    </BlockUI></template>

The whole page

<script setup lang="ts">import { BlockUI, Button, ProgressSpinner } from '@vitral/vue';import { ref } from 'vue'; const page = ref(false); function blockPage() {    page.value = true;    setTimeout(() => (page.value = false), 2000);}</script> <template>    <Button label="Block for two seconds" @click="blockPage" />    <BlockUI :blocked="page" full-screen label="Please wait">        <template #mask><ProgressSpinner aria-hidden="true" /></template>    </BlockUI></template>

API

Read from packages/vue/src/components/BlockUI/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
blockedbooleanBlock the region: it is veiled, busy, and out of reach of pointer and keyboard.
fullScreenbooleanBlock the whole page instead of the wrapped region.
labelstringWhat the veil says to assistive technology while blocked. Defaults to the locale's "Loading…".

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
block——
unblock——

Slots

NameSlot propsDescription
default—The region that can be blocked.
mask—Shown on the veil: a spinner, a message.