Dialog

1<script setup lang="ts">2import { Button, Dialog, InputText, Label, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const visible = ref(false);6const name = ref('Ana Souza');7const email = ref('ana@example.com');8</script>9 10<template>11    <Button label="Edit profile" icon="pencil" @click="visible = true" />12    <Dialog v-model:visible="visible" header="Edit profile" style="width: 28rem">13        <StackPanel spacing="0.875rem">14            <span style="font-size: 0.875rem; color: var(--vt-text-muted-color)">Update how others see you.</span>15            <StackPanel spacing="0.375rem">16                <Label for="dlg-name">Name</Label>17                <InputText id="dlg-name" v-model="name" fluid />18            </StackPanel>19            <StackPanel spacing="0.375rem">20                <Label for="dlg-email">Email</Label>21                <InputText id="dlg-email" v-model="email" type="email" fluid />22            </StackPanel>23        </StackPanel>24        <template #footer>25            <Button label="Cancel" severity="secondary" @click="visible = false" />26            <Button label="Save" @click="visible = false" />27        </template>28    </Dialog>29</template>

1<script setup lang="ts">2import { Button, Dialog } from '@vitral/vue';3import { ref } from 'vue';4 5type Position = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';6 7const positions: Position[] = ['top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right'];8const visible = ref(false);9const position = ref<Position>('top');10 11function openAt(where: Position) {12    position.value = where;13    visible.value = true;14}15</script>16 17<template>18    <div style="display: grid; grid-template-columns: repeat(3, 8rem); gap: 0.5rem">19        <Button v-for="p in positions" :key="p" :label="p" severity="secondary" size="small" @click="openAt(p)" />20    </div>21    <Dialog v-model:visible="visible" :header="`Position: ${position}`" :position="position" style="width: 22rem" dismissable-mask>22        A press on the mask closes this one (<code>dismissable-mask</code>).23    </Dialog>24</template>

1<script setup lang="ts">2import { Button, Dialog } from '@vitral/vue';3import { ref } from 'vue';4 5const visible = ref(false);6</script>7 8<template>9    <Button label="Terms of service" severity="secondary" @click="visible = true" />10    <Dialog v-model:visible="visible" header="Terms of service" maximizable style="width: 36rem; height: 24rem">11        <p v-for="n in 8" :key="n">12            {{ n }}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus13            auctor fringilla, maecenas faucibus mollis interdum.14        </p>15        <template #footer>16            <Button label="Decline" severity="secondary" @click="visible = false" />17            <Button label="Accept" autofocus @click="visible = false" />18        </template>19    </Dialog>20</template>

1<script setup lang="ts">2import { Button, Dialog, InputText } from '@vitral/vue';3import { ref } from 'vue';4 5const visible = ref(false);6</script>7 8<template>9    <Button label="Open a modeless dialog" severity="secondary" @click="visible = true" />10    <Dialog v-model:visible="visible" header="Find" :modal="false" position="bottom-right" style="width: 20rem">11        <InputText aria-label="Find text" placeholder="Search the page…" fluid />12    </Dialog>13</template>

1<script setup lang="ts">2import { Button, Dialog, Label, Select, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const visible = ref(false);6const role = ref<string | null>(null);7const roles = [{ name: 'Viewer' }, { name: 'Editor' }, { name: 'Owner' }];8</script>9 10<template>11    <Button label="Invite someone" severity="secondary" icon="user" @click="visible = true" />12    <Dialog v-model:visible="visible" header="Invite" style="width: 24rem">13        <StackPanel spacing="0.375rem">14            <Label for="dlg-role">Role</Label>15            <Select id="dlg-role" v-model="role" :options="roles" option-label="name" option-value="name" placeholder="Choose a role" fluid />16        </StackPanel>17        <template #footer>18            <Button label="Send invite" :disabled="!role" @click="visible = false" />19        </template>20    </Dialog>21</template>