Skip to content

Shared Components

Vue reusable components

InstanceName

Component that displays the Panoramax title and instance name.

Examples

<InstanceName />

Source: InstanceName.vue

LangSwitcher

Dropdown that lets users switch between activated locales.

Props

Name Type Default Required
userName String No

Examples

<LangSwitcher
  user-name=""
/>

Source: LangSwitcher.vue

SharedButton

Generic button component with optional icon, tooltip, and loading states.

Props

Name Type Default Required
icon String null No
disabled Boolean false No
isLoading Boolean false No
text String No
tooltip String No
tooltipPositionClass String 'tooltip-button' No
look String No
size String No
type String 'button' No

Examples

<Button
  text="Click me"
  icon="bi bi-plus"
  look="button button--blue-full"
  :disabled="false"
  :is-loading="false"
  tooltip="This is a tooltip"
  @trigger="handleClick"
/>
<Button
  look="button button--red"
  icon="bi bi-trash"
  :disabled="false"
  @trigger="handleDelete"
/>

Source: Button.vue

SharedFooter

Site-wide footer displaying instance-specific links and accessibility references.

Examples

<Footer>
  <template #links>
    <li>
      <Link text="Custom Link" :route="{ name: 'custom' }" />
    </li>
  </template>
</Footer>

Source: Footer.vue

SharedHeader

Basic layout header exposing a slot for consumer-specific content.

Examples

<Header>
  <template #content>
    <nav>
      <Link text="Home" :route="{ name: 'home' }" />
    </nav>
  </template>
</Header>

Source: Header.vue

Versatile link component supporting router navigation, external URLs, and icons.

Props

Name Type Default Required
text String null No

Emits

Event Value Type
trigger void

Examples

<Link
  text="Home"
  :route="{ name: 'home' }"
  look="link--blue-dark"
  icon="bi bi-house"
  @trigger="handleClick"
/>
<Link
  text="External Site"
  path-external="https://example.com"
  type="external"
  target="_blank"
  look="link--grey"
/>
<Link
  :image="{ url: 'logo.jpeg', alt: 'Logo' }"
  :route="{ name: 'home' }"
>
  <template #content>
    <span>Custom content</span>
  </template>
</Link>

Source: Link.vue

Toast

Toast notification component for displaying success, error, or info messages.

Props

Name Type Default Required
text String No
look String No

Emits

Event Value Type
trigger void

Examples

<Toast
  text="Operation successful"
  look="success"
  @trigger="handleClose"
/>
<Toast
  text="An error occurred"
  look="error"
  @trigger="handleClose"
/>

Source: Toast.vue