PopupDraft
<template>
<div class="n-stack n-stack-horizontal">
<BaseButton aria-controls="popout" aria-haspopup="true"> Text </BaseButton>
<BasePopout id="popout">Just a popout with plain content</BasePopout>
<BaseButton aria-controls="read-only" aria-haspopup="true">
Read only
</BaseButton>
<BasePopout id="read-only">
<ReadOnlyField label="Label" value="Input data" />
</BasePopout>
<BaseButton aria-controls="field-placeholder" aria-haspopup="true">
Field placeholder
</BaseButton>
<BasePopout id="field-placeholder">
<FieldPlaceholder
label="Label"
button-text="Add label"
inline-edit
@show-content="console.log('show content')"
/>
</BasePopout>
<BaseButton aria-controls="edit-info" aria-haspopup="true">
Edit info
</BaseButton>
<BasePopout id="edit-info">
<EditableStack label="Edit" @edit="console.log('Edit button clicked')">
<ReadOnlyField label="Label" value="Input data" />
</EditableStack>
</BasePopout>
</div>
</template>
<template>
<div class="n-stack n-stack-horizontal">
<BaseButton
aria-controls="payment-summary"
aria-haspopup="true"
variant="plain"
size="s"
>
<span class="n-font-weight-active n-font-size-m n-color-text-danger">
$126.00
</span>
<provet-icon
slot="end"
name="interface-dropdown-small"
class="n-color-text"
></provet-icon>
</BaseButton>
<BasePopout id="payment-summary">
<DividedStack>
<div class="n-stack n-gap-xs">
<PaymentSummaryRow label="Unpaid invoices" value="$178.00" is-total />
<PaymentSummaryRow label="Finalized invoices" value="$138.00" />
<PaymentSummaryRow label="Draft invoices" value="$40.00" />
</div>
<div class="n-stack n-gap-xs">
<PaymentSummaryRow
label="Available credit"
value="-$52.00"
is-total
negative-value
/>
<PaymentSummaryRow label="Prepayments" value="-$20.00" />
<PaymentSummaryRow label="Credit notes" value="-$30.00" />
<PaymentSummaryRow label="Finalized credit notes" value="-$20.00" />
</div>
</DividedStack>
</BasePopout>
<BaseButton
aria-controls="payment-summary-icon"
aria-haspopup="true"
variant="plain"
size="s"
square
>
<provet-icon
label="Show payment details"
name="file-invoice"
size="m"
class="n-color-text-danger"
></provet-icon>
</BaseButton>
<BasePopout id="payment-summary-icon">
<template #header>
<PaymentSummaryRow
label="Client balance"
value="$126.00"
is-total
is-header
/>
</template>
<DividedStack>
<div class="n-stack n-gap-xs">
<PaymentSummaryRow label="Unpaid invoices" value="$178.00" is-total />
<PaymentSummaryRow label="Finalized invoices" value="$138.00" />
<PaymentSummaryRow label="Draft invoices" value="$40.00" />
</div>
<div class="n-stack n-gap-xs">
<PaymentSummaryRow
label="Available credit"
value="-$52.00"
is-total
negative-value
/>
<PaymentSummaryRow label="Prepayments" value="-$20.00" />
<PaymentSummaryRow label="Credit notes" value="-$30.00" />
<PaymentSummaryRow label="Finalized credit notes" value="-$20.00" />
</div>
</DividedStack>
</BasePopout>
<BaseButton
aria-controls="all-info"
aria-haspopup="true"
variant="plain"
size="s"
square
>
<provet-icon
label="Show all info"
name="interface-menu-small"
size="m"
></provet-icon>
</BaseButton>
<BasePopout id="all-info">
<div class="n-stack n-gap-s">
<div class="n-stack n-stack-horizontal n-gap-s">
<provet-icon
name="generic-telephone"
size="s"
class="n-color-icon"
></provet-icon>
314 159 2653
</div>
<div class="n-stack n-stack-horizontal n-gap-s">
<provet-icon
name="file-invoice"
size="s"
class="n-color-icon"
></provet-icon>
<span class="n-font-weight-active n-color-text-danger">
$126.00
</span>
</div>
</div>
</BasePopout>
</div>
</template>
<script setup lang="ts">
const comboboxOptions = ref([
{ value: 'batman', label: 'Batman' },
{ value: 'robin', label: 'Robin' },
{ value: 'joker', label: 'Joker' },
{ value: 'batman2', label: 'Batman 2' },
{ value: 'robin2', label: 'Robin 2' },
{ value: 'joker2', label: 'Joker 2' },
{ value: 'batman3', label: 'Batman 3' },
{ value: 'robin3', label: 'Robin 3' },
{ value: 'joker3', label: 'Joker 3' },
])
</script>
<template>
<div class="n-stack n-stack-horizontal">
<BaseButton aria-controls="popout" aria-haspopup="true">
View patient location #1000
</BaseButton>
<BasePopout id="popout" heading="Patient location #1000">
<DividedStack class="n-container-m">
<div class="n-stack n-gap-m">
<ReadOnlyField label="Status">
<provet-badge>Occupied</provet-badge>
</ReadOnlyField>
<ReadOnlyField label="Patients">
<a>Florian (1000)</a>, Dog, American Bullnese
</ReadOnlyField>
<ReadOnlyField label="Capacity" />
</div>
<ReadOnlyField
label="Remarks"
value="Lorem ipsum dolor sit amet consectetur adipiscing elit"
/>
</DividedStack>
</BasePopout>
<BaseButton aria-controls="form" aria-haspopup="true">Form</BaseButton>
<BasePopout id="form">
<form class="n-stack n-gap-l">
<FormProvetField name="text" label="Text input" inline-edit />
<FormDatePicker name="date" label="Date" inline-edit />
<FormComboboxMultiple
name="tags"
label="Tags"
:options="comboboxOptions"
placeholder="Select tags"
inline-edit
/>
</form>
<template #footer>
<BaseButton size="s">Update</BaseButton>
</template>
</BasePopout>
<BaseButton
aria-controls="information-type-simple-value"
aria-haspopup="true"
>
Readonly
</BaseButton>
<BasePopout id="information-type-simple-value">
<DividedStack>
<ReadOnlyField label="Label" value="Value" />
<EditableStack label="Edit" @edit="console.log('Edit button clicked')">
<ReadOnlyField label="Label" value="Input data" />
</EditableStack>
<ReadOnlyField
label="Notes"
value="Long value: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
/>
<ReadOnlyField
label="Tags"
:value="['Aggresive', 'Diabetic']"
display-as="tags"
/>
<EditableStack label="Edit" @edit="console.log('Edit button clicked')">
<ReadOnlyField
label="Editable tags"
:value="[
'Aggresive',
'Diabetic',
'Oxygen',
'Soft walls (padded)',
'With windows',
]"
display-as="tags"
/>
</EditableStack>
</DividedStack>
</BasePopout>
</div>
</template>
<template>
<div class="n-stack n-stack-horizontal">
<BaseButton aria-controls="popout" aria-haspopup="true">
Simple
</BaseButton>
<BasePopout id="popout">
<template #header>The header</template>
This text is intentionally long so we can see how it wraps and the popout
doesn't grow larger than the <b>max-inline-size</b> value.
<template #footer>
<BaseButton size="s">Close</BaseButton>
</template>
</BasePopout>
<BaseButton aria-controls="cards-with-header" aria-haspopup="true">
Read only
</BaseButton>
<BasePopout id="cards-with-header" expand>
<template #header>
<div class="n-stack n-stack-horizontal n-gap-s">
<provet-avatar>JD</provet-avatar>
<h2 class="n-font-size-m n-font-weight-active">John Dorian (2468)</h2>
</div>
</template>
<DividedStack>
<CardInnerSection>
<ReadOnlyField label="Phone" value="123 45 6789" />
<ReadOnlyField label="Enail" value="john.dorian@gmail.com" />
<ReadOnlyField label="Address">
<FormattedAddress
country="NO"
zip-code="11 0154"
city="Oslo"
street-address="Karl Johans gate"
/>
</ReadOnlyField>
</CardInnerSection>
<CardInnerSection>
<ReadOnlyField
label="Tags"
:value="['Aggresive', 'Diabetic']"
display-as="tags"
/>
<ReadOnlyField
label="General remarks"
value="Lorem ipsum dolor sit amet."
/>
</CardInnerSection>
</DividedStack>
<template #footer>
<provet-button size="s">Pin to side</provet-button>
<provet-button size="s">Open client page</provet-button>
</template>
</BasePopout>
<BaseButton aria-controls="cards-with-header-2" aria-haspopup="true">
Long content
</BaseButton>
<BasePopout id="cards-with-header-2" max-width>
<template #header>
<div class="n-stack n-stack-horizontal n-gap-s">
<provet-avatar
src="https://i.giphy.com/KL5rlX6dGjwJO.webp"
name="Garfield"
></provet-avatar>
<h2 class="n-font-size-m n-font-weight-active">Garfield (1357)</h2>
</div>
</template>
<DividedStack>
<CardInnerSection>
<ReadOnlyField
label="Species, breed"
value="Cat (Feline - Domestic), Orange tabby"
/>
<ReadOnlyField label="Sex" value="Male, neutered" />
<ReadOnlyField label="Age" value="5 years 3 months" />
<EditableStack
label="Edit"
@edit="console.log('Edit button clicked')"
>
<ReadOnlyField label="Weight" value="5,24 kg" />
</EditableStack>
</CardInnerSection>
<CardInnerSection>
<ReadOnlyField
label="Tags"
:value="['Aggresive', 'Diabetic']"
display-as="tags"
/>
<ReadOnlyField
label="Critical remarks"
value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation. exercitation."
/>
</CardInnerSection>
</DividedStack>
<template #footer>
<provet-button size="s">Pin to side</provet-button>
<provet-button size="s">Open client page</provet-button>
</template>
</BasePopout>
<BaseButton aria-controls="pin-to-side" aria-haspopup="true">
Pin to side
</BaseButton>
<BasePopout id="pin-to-side" heading="Consultation 2468">
<DividedStack>
<CardInnerSection>
<ReadOnlyField label="Label 1" value="Lorem ipsum" />
<ReadOnlyField label="Label 2" value="Nostrud exercitation" />
</CardInnerSection>
</DividedStack>
<template #footer>
<provet-button size="s">Pin to side</provet-button>
</template>
</BasePopout>
<BaseButton aria-controls="go-to-page" aria-haspopup="true">
Go to page
</BaseButton>
<BasePopout id="go-to-page" expand heading="Consultation 2468">
<DividedStack>
<CardInnerSection>
<ReadOnlyField
label="Reason type"
value="Lorem ipsum dolor"
display-as="tags"
/>
<ReadOnlyField
label="Reason"
value="Excepteur sint occaecat cupidatat"
/>
</CardInnerSection>
<CardInnerSection>
<ReadOnlyField label="Veterinarian" value="Elliot Reid" />
<ReadOnlyField label="Department" value="Sunt culpa - Qui officia" />
</CardInnerSection>
</DividedStack>
<template #footer>
<provet-button size="s">Open consultation</provet-button>
</template>
</BasePopout>
<BaseButton aria-controls="pin-go-to-page" aria-haspopup="true">
Pin + Go to page
</BaseButton>
<BasePopout id="pin-go-to-page" expand>
<template #header>
<div class="n-stack n-stack-horizontal n-gap-s">
<provet-avatar>JD</provet-avatar>
<h2 class="n-font-size-m n-font-weight-active">John Dorian (2468)</h2>
</div>
</template>
<DividedStack>
<CardInnerSection>
<ReadOnlyField label="Reason type" value="Lorem ipsum" />
<ReadOnlyField
label="Reason"
value="Excepteur sint occaecat cupidatat"
/>
</CardInnerSection>
<CardInnerSection>
<ReadOnlyField label="Tags" value="English only" display-as="tags" />
<ReadOnlyField
label="General remarks"
value="Lorem ipsum dolor sit amet."
/>
</CardInnerSection>
</DividedStack>
<template #footer>
<provet-button size="s">Pin to side</provet-button>
<provet-button size="s">Open client page</provet-button>
</template>
</BasePopout>
</div>
</template>
<template>
<div>
<BaseButton aria-controls="popout" aria-haspopup="true">
Toggle popout
</BaseButton>
<BasePopout id="popout" heading="The heading">
Popout with heading and content
</BasePopout>
</div>
</template>
<template>
<div>
<BaseButton aria-controls="popout" aria-haspopup="true">
Toggle popout
</BaseButton>
<BasePopout id="popout">
<template #header>The header</template>
<template #header-end>
<provet-button size="s" square>
<provet-icon name="interface-edit"></provet-icon>
</provet-button>
<provet-button size="s" square>
<provet-icon name="interface-delete"></provet-icon>
</provet-button>
</template>
This text is intentionally long so we can see how it wraps and the popout
doesn't grow larger than the <b>max-inline-size</b> value.
<template #footer>
<BaseButton size="s">Close</BaseButton>
</template>
</BasePopout>
</div>
</template>
Integration
This product pattern is currently only available to use in the New Frontend for Provet Cloud (using Vue & Nuxt).
Troubleshooting
If you experience any issues while using this pattern, please ask for support in the #vet-frontend Slack channel.