Components

Forehead

A document header component used to structure and emphasize important information.

Usage

Use the slots and badge properties to arrange the information on your forehead. The visibility of the drawer slot is controlled by openDrawer prop.

Loading preview...

<template>
  <MeForehead
    banner-variant="text"
    :text-banner="{ label: 'Label', code: '01234'}"
    :open-drawer="isDrawerOpen"
    @copy="onCopy"
  >
    <template #leading>
      <p class="bg-elevated w-full h-full p-2">Leading Content</p>
    </template>
    <template #trailing>
      <div class="bg-elevated w-full h-full p-2 flex flex-col justify-between">
        <p>Trailing Content</p>
        <p
          class="text-primary"
          @click="isDrawerOpen = !isDrawerOpen"
        >
          {{ isDrawerOpen ? 'Close drawer' : 'Open drawer' }}
        </p>
      </div>
    </template>
    <template #drawer>
      <p class="bg-elevated w-full h-full p-2">Drawer Content</p>
    </template>
  </MeForehead>
</template>

<script setup lang="ts">
const isDrawerOpen = ref(true)
const toast = useToast()

function onCopy() {
  toast.add({
    title: 'Copied to clipboard',
    icon: 'i-lucide-check-circle',
    color: 'success'
  })
}
</script>

Badge

The badge only appears when you set the bannerVariant prop to one of the following options: "text", "image", "user" and "icon". Each of them can be configured with its specific prop as below.

Text Badge

With bannerVariant "text" use textBanner prop as an object

type textBanner = {
  label: string,
  code: string,
  icon: string // change the icon on the top, default 'i-lucide-file-pen'
}

Label

01234

Label

012345678901234567890123

<template>
  <MeForeheadBadge
    bannerVariant="text" 
    :textBanner="{ label: 'Label', code: '01234' }"
  />
  <MeForeheadBadge
    bannerVariant="text" 
    :textBanner="{ label: 'Label', code: '012345678901234567890123', icon: 'i-lucide-award' }"
  />
</template>

Image Badge

With bannerVariant "image" use imageBanner prop with an object or an array of objects, when it has more than one image it will display as a carousel.

type imageBanner = {
  image: string, // image address
  alt: string // used as alt text for the image
}

<template>
  <MeForeheadBadge
    bannerVariant="image" 
    :imageBanner="{ image: 'product-exemple.png', alt: 'Product Image' }"
  />
  <MeForeheadBadge
    bannerVariant="image" 
    :imageBanner="[
      { image: 'product-exemple.png', alt: 'Product Image' }, 
      { image: 'product-exemple.png', alt: 'Product Image' }
    ]"
  />
  <MeForeheadBadge
    bannerVariant="image"
  />
</template>

User Badge

With bannerVariant "user" use userBanner prop with an object to set an image.

type userBanner = {
  image: string, // image address
  alt: string // used as alt text for the image
}

<template>
  <MeForeheadBadge
    bannerVariant="user" 
    :userBanner="{ image: 'user-exemple.png', alt: 'User Image' }"
  />
  <MeForeheadBadge
    bannerVariant="user"
  />
</template>

Icon Badge

With bannerVariant "icon" use iconBanner prop with an object to choose the icon.

type iconBanner = {
  fileType: string // choose between preconfigured icons "word", "excel", "audio", "pdf" OR
  icon: string, // use a lucide icon string
}

<template>
  <MeForeheadBadge
    bannerVariant="icon"
  />
  <MeForeheadBadge
    bannerVariant="icon" 
    :iconBanner="{ filetype: 'pdf' }"
  />
    <MeForeheadBadge
    bannerVariant="icon" 
    :iconBanner="{ icon: 'i-lucide-file-code' }"
  />
</template>

To add a dropdown menu to the badge use dropdownItems prop. The options for this prop can be seen in NuxtUI

<template>
  <MeForeheadBadge
    :bannerVariant="image" 
    :dropdownItems="
    [
      { label: 'Option 1', icon: "i-lucide-user" }
    ],
    [
      { label: 'Option 2' },
      { label: 'Option 3' }
    ]"
  />
</template>

API

Props

Prop	Default	Type
`bannerVariant`	-	`"text" \| "image" \| "user" \| "icon"` Define the type of the badge.
`dropdownItems`	-	`DropdownMenuItem[]` Configure the options displayed in the dropdown menu
`iconBanner`	-	`TextBanner{}` Use to choose the icon displayed on the badge when bannerVariant is "icon"
`imageBanner`	-	`ImageBanner{}` Use to display an image, or a carousel, on the badge when bannerVariant is "image"
`textBanner`	-	`TextBanner{}` Use to configure the badge when bannerVariant is "text"
`userBanner`	-	`UserBanner{}` Use to display an image on the badge when bannerVariant is "user"

Slots

Slot	Type
`drawer`	`{}`
`leading`	`{}`
`trailing`	`{}`

Events

Event	Type
`copy`	`[value: string]`

CriterionInput

A component used to compose and edit filters.

LoginForm

A complete login form component with email/password fields, locale select, remember me, reCAPTCHA slot, and footer links.