Popover

1<script setup lang="ts">2import { Button, InputText, Popover } from '@vitral/vue';3import { ref } from 'vue';4 5const share = ref<InstanceType<typeof Popover> | null>(null);6const copied = ref(false);7const link = 'https://vitral.dev/s/7f3a9c';8 9function copy() {10    navigator.clipboard?.writeText(link).catch(() => {});11    copied.value = true;12    setTimeout(() => (copied.value = false), 1500);13}14</script>15 16<template>17    <Button18        label="Share"19        icon="externalLink"20        aria-haspopup="dialog"21        :aria-expanded="share?.visible ? 'true' : 'false'"22        :aria-controls="share?.visible ? share?.id : undefined"23        @click="share?.toggle($event)"24    />25    <Popover ref="share" aria-labelledby="share-title">26        <div style="display: flex; flex-direction: column; gap: 0.75rem; width: 20rem">27            <strong id="share-title">Share this document</strong>28            <div style="display: flex; gap: 0.5rem">29                <InputText :model-value="link" readonly aria-label="Link" fluid />30                <Button :label="copied ? 'Copied' : 'Copy'" :icon="copied ? 'check' : 'copy'" severity="secondary" @click="copy" />31            </div>32            <small style="color: var(--vt-text-muted-color)">Anyone with the link can view.</small>33        </div>34    </Popover>35</template>

1<script setup lang="ts">2import { Button, Popover } from '@vitral/vue';3import { ref } from 'vue';4 5const members = ref<InstanceType<typeof Popover> | null>(null);6const people = [7    { name: 'Ana Souza', role: 'Owner' },8    { name: 'Bruno Lima', role: 'Editor' },9    { name: 'Carla Dias', role: 'Viewer' }10];11</script>12 13<template>14    <Button15        label="Team members"16        icon="user"17        severity="secondary"18        aria-haspopup="dialog"19        :aria-expanded="members?.visible ? 'true' : 'false'"20        @click="members?.toggle($event)"21    />22    <Popover ref="members" placement="right-start" aria-label="Team members">23        <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; min-width: 14rem">24            <li v-for="p in people" :key="p.name" style="display: flex; justify-content: space-between; gap: 1rem">25                <span>{{ p.name }}</span>26                <small style="color: var(--vt-text-muted-color)">{{ p.role }}</small>27            </li>28        </ul>29        <Button label="Manage" variant="link" size="small" style="margin-top: 0.5rem" @click="members?.hide()" />30    </Popover>31</template>