UIPreview

UIPreview

A component that provides a preview of content within a customizable device frame, useful for displaying responsive designs or content previews.

<template>
  <UIPreview
    :href="previewUrl"
    :deviceClasses="'device-mobile'"
    :pageClasses="'bg-white'"
    :html="previewContent"
  >
    <template #loading>
      <UISkeleton :rows="5" />
    </template>

    <template #error>
      <div class="text-error-600">
        Failed to load preview
      </div>
    </template>
  </UIPreview>
</template>

<script setup lang="ts">
const previewUrl = ref('https://example.com')
const previewContent = ref('<div>Preview content</div>')
</script>

Props

• href (string): URL to preview
• deviceClasses (string): Custom classes for device frame
• pageClasses (string): Custom classes for content
• html (string): HTML content to preview
• loading (boolean): Show loading state
• error (boolean): Show error state
• scale (number): Preview scale factor
• width (number | string): Preview width
• height (number | string): Preview height
• scrollable (boolean): Enable content scrolling

Events

• load: Emitted when preview loads
• error: Emitted on preview error
• resize: Emitted when preview resizes

Slots

• default: Custom preview content
• loading: Custom loading state
• error: Custom error state
• toolbar: Custom toolbar content
• footer: Custom footer content

Usage Examples

1. Basic URL Preview:

<template>
  <UIPreview href="https://example.com" />
</template>

2. Custom HTML Content:

<template>
  <UIPreview
    :html="htmlContent"
    :deviceClasses="'device-tablet'"
  >
    <template #toolbar>
      <div class="flex justify-between p-2">
        <span>Preview</span>
        <UIButton @click="refreshPreview">
          Refresh
        </UIButton>
      </div>
    </template>
  </UIPreview>
</template>

<script setup>
const htmlContent = ref(`
  <div class="p-4">
    <h1>Preview Title</h1>
    <p>Preview content...</p>
  </div>
`)
</script>

3. Responsive Preview:

<template>
  <div class="space-y-4">
    <UIPreview
      :href="url"
      deviceClasses="device-mobile"
      width="375px"
    />

    <UIPreview
      :href="url"
      deviceClasses="device-tablet"
      width="768px"
    />

    <UIPreview
      :href="url"
      deviceClasses="device-desktop"
      width="1024px"
    />
  </div>
</template>

4. Interactive Preview:

<template>
  <UIPreview
    :html="emailTemplate"
    :scrollable="true"
    class="h-[500px]"
  >
    <template #toolbar>
      <div class="flex gap-2">
        <UISelect
          v-model:value="selectedDevice"
          :options="deviceOptions"
        />
        <UIButton @click="sendTestEmail">
          Send Test
        </UIButton>
      </div>
    </template>
  </UIPreview>
</template>

Best Practices

1. Device Frames:

   • Use appropriate device frames
   • Maintain aspect ratios
   • Support responsive scaling
   • Include device chrome

2. Content Handling:

   • Sanitize HTML content
   • Handle loading states
   • Manage error cases
   • Support dynamic updates

3. Performance:

   • Optimize preview rendering
   • Cache preview content
   • Lazy load resources
   • Handle large content

4. Accessibility:

   • Provide keyboard navigation
   • Include ARIA labels
   • Support screen readers
   • Maintain focus management

Common Use Cases

1. Email Template Preview:

<template>
  <UIPreview
    :html="emailHTML"
    deviceClasses="device-email"
  >
    <template #toolbar>
      <EmailPreviewToolbar
        @send-test="sendTestEmail"
        @edit="editTemplate"
      />
    </template>
  </UIPreview>
</template>

2. Website Responsive Preview:

<template>
  <UIPreview
    :href="websiteUrl"
    :deviceClasses="deviceClass"
    :width="deviceWidth"
  >
    <template #toolbar>
      <ResponsiveControls
        v-model:device="selectedDevice"
        @rotate="rotateDevice"
      />
    </template>
  </UIPreview>
</template>

3. Design System Preview:

<template>
  <UIPreview
    :html="componentPreview"
    deviceClasses="device-component"
  >
    <template #toolbar>
      <div class="flex gap-2">
        <UISelect
          v-model:value="theme"
          :options="themeOptions"
        />
        <UIButton @click="copyCode">
          Copy Code
        </UIButton>
      </div>
    </template>
  </UIPreview>
</template>

Device Frame Classes

Available device frame classes:

• device-mobile: Mobile phone frame
• device-tablet: Tablet device frame
• device-desktop: Desktop monitor frame
• device-laptop: Laptop device frame
• device-browser: Browser window frame
• device-email: Email client frame
• device-component: Minimal component frame