Blocks

Preview

A block to preview the selected content.

Usage

Please note that for MePreview to render correctly, its parent container must have an explicitly defined height. Its default slot is used to compose the list.

Loading preview...

<template>
  <div class="w-full h-[570px]">
    <MePreview
      ref="previewRef"
      :preview-config="previewConfig"
      class="w-full"
    >   
      <div
        v-for="i in 5"
       :class="[
          'h-[114px] w-full border border-accented py-4 px-2 cursor-pointer',
          { 'border-b-0': i !== 5 }
        ]"
        @click="previewConfig.src = '/'"
      >
        {{ `Item ${i}` }}
      </div>
    </MePreview>
  </div>
</template>

<script setup lang="ts">
const previewConfig = ref({})
</script>

Preview

By default, the component uses an iframe for content preview via the previewConfig prop. The preview slot allows you to override the iframe and customize the visualization.

type previewConfig = {
  allow?: string,
  loading?: 'eager' | 'lazy',
  referrerpolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url',
  name?: string,
  src: string
}

Card 1

Card 2

Card 3

<template>
  <div class="w-full h-[342px]">
    <MePreview
      :preview-config="previewConfig"
      class="w-full"
    >
      <div
        v-for="i in 3"
        :class="[
          'h-[114px] w-full border border-accented py-4 px-2 cursor-pointer',
          { 'border-b-0': i !== 3 }
        ]"
      >
        {{ `Card ${i}` }}
      </div>
    </MePreview>
  </div>
</template>

<script setup lang="ts">
const previewConfig = { src: '#' }
</script>

Loading

When the loading prop is true, the component enters its default loading state. You can use the loading slot to customize this state.

Card 1

Card 2

Card 3

<template>
  <div class="w-full h-[342px]">
    <MePreview
      class="w-full"
      loading
    >
      <div
        v-for="i in 3"
        :class="[
          'h-[114px] w-full border border-accented py-4 px-2 cursor-pointer',
          { 'border-b-0': i !== 3 }
        ]"
      >
        {{ `Card ${i}` }}
      </div>
    </MePreview>
  </div>
</template>

Empty

If no content preview is provided by the previewConfig prop or the preview slot, the component enters its default empty state. Use the empty slot to customize this state.

Card 1

Card 2

Card 3

Select an item to read

Nothing was selected

<template>
  <div class="w-full h-[342px]">
    <MePreview class="w-full">
      <div
        v-for="i in 3"
        :class="[
          'h-[114px] w-full border border-accented py-4 px-2 cursor-pointer',
          { 'border-b-0': i !== 3 }
        ]"
      >
        {{ `Card ${i}` }}
      </div>
    </MePreview>
  </div>
</template>

API

Props

Prop	Default	Type
`previewConfig`		`{ allow, loading, name, referrerpolicy, src }` Preview configuration options
`loading`		`Boolean` Loading state

Slots

Slot	Type
`default`	`{}`
`loading`	`{}`
`empty`	`{}`

A login block with split layout (image + form) and MeLoginForm.

Subheader

A toolbar block with variant-driven layout for actions, search, and navigation controls.