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>

Building blocks

Two subcomponents are provided to help build a MeForehead, MeForeheadActionBar and MeForeheadCartArea.

Loading preview...

<template>
  <MeForehead
    banner-variant="text"
    :text-banner="{ label: 'Product', code: 'SKU-12345' }"
  >
    <template #leading>
      <div class="flex justify-center items-center bg-elevated size-full rounded-lg">
        Leading content
      </div>
    </template>

    <template #trailing>
      <MeForeheadCartArea
        :input="{ modelValue: 2 }"
        left-label="BRL"
        left-value="999.00"
        right-label="USD"
        right-value="185.00"
        cart-label="Add to cart"
        cart-button
        @input="onQuantityInput"
        @cart-click="onCartClick"
      />

      <MeForeheadActionBar
        see-more
        :actions="actions"
        :dropdown-items="dropdownItems"
        class="mt-4"
        @see-more="onSeeMore"
      />
    </template>
  </MeForehead>
</template>

<script setup lang="ts">
const actions = [
  { icon: 'i-lucide-heart', onClick: () => {} },
  { icon: 'i-lucide-wand-sparkles', onClick: () => {} }
]

const dropdownItems = [
  { label: 'Duplicate', icon: 'i-lucide-copy', onSelect: () => {} },
  { label: 'Delete', icon: 'i-lucide-trash', onSelect: () => {} }
]

function onQuantityInput(value) {
  console.log(`Quantity input: ${value}`)
}

function onCartClick(value) {
  console.log(`Cart clicked with quantity: ${value}`)
}

function onSeeMore() {
  console.log('See more clicked')
}
</script>

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"

MeForeheadActionBar Props

Prop	Default	Type
`actions`	`[]`	`{ icon: string, onClick: function }[]` Button actions
`dropdownItems`	`[]`	`DropdownMenuItems[]` Dropdown actions, see DropdownMenu
`seeMore`	`false`	`Boolean` Adds see more button

MeForeheadCartArea Props

Prop	Default	Type
`leftLabel`		`String` Top left text content
`leftValue`		`String` Bottom left text content
`rightLabel`		`String` Top right text content
`rightValue`		`String` Bottom right text content
`input`		`Omit<InputNumberProps, 'defaultValue' \| 'color' \| 'size'>` Renders the input. Accepts all InputNumber props, except `color`, `size` and `defaultValue`, which are predefined
`cartLabel`		`String` Label for the cart area
`cartButton`	`false`	`Boolean` Renders cart button