ReportPrintOptionLayout Component

A simple layout wrapper that renders a labeled settings row with a header, description, and a slot for the control element. Used internally by ReportPrintOption and can be used in named slots to add custom configuration rows with a consistent visual style.

---

Table of Contents

• Import
• Basic Usage
• Props
• Slots
• TypeScript Interfaces
• Usage Examples
• Best Practices

---

Import

import { ReportPrintOptionLayout } from "dolphin-components";
import type { ReportPrintOptionLayoutProps } from "dolphin-components";

---

Basic Usage

<template>
  <ReportPrintOptionLayout
    header="Department"
    description="Select the department to filter data."
  >
    <Multiselect
      v-model="department"
      :options="departments"
      label="name"
      trackBy="id"
      placeholder="Select department"
    />
  </ReportPrintOptionLayout>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ReportPrintOptionLayout, Multiselect } from "dolphin-components";

const department = ref(null);
const departments = [
  { id: 1, name: "Engineering" },
  { id: 2, name: "Finance" },
];
</script>

---

Props

Prop	Type	Default	Description
header	string	"Report Configuration Header"	The bold label displayed on the left side.
description	string	"Report Configuration Description"	The italic subtitle displayed below the header.

---

Slots

Slot Name	Description
default	The control element rendered on the right side (e.g., a dropdown, toggle, switch, or input).

---

TypeScript Interfaces

interface ReportPrintOptionLayoutProps {
  header?: string;
  description?: string;
}

---

Usage Examples

With a Switch Control

<ReportPrintOptionLayout
  header="Enable Notifications"
  description="Send email notifications when report is generated."
>
  <Switch v-model="enableNotifications" />
</ReportPrintOptionLayout>

With a Toggle Control

<ReportPrintOptionLayout
  header="Calendar System"
  description="Choose between AD and BS calendar."
>
  <Toggle v-model="isBS" onText="BS" offText="AD" />
</ReportPrintOptionLayout>

With a Text Input

<ReportPrintOptionLayout
  header="Report Title"
  description="Custom title displayed on the printed report."
>
  <input v-model="reportTitle" class="input-text w-60" placeholder="Enter title" />
</ReportPrintOptionLayout>

Inside ReportPrintOption Slot

This is the primary use case — adding custom rows to the ReportPrintOption component:

<ReportPrintOption v-model="config">
  <template #after-to-date>
    <ReportPrintOptionLayout
      header="Branch"
      description="Filter by branch location."
    >
      <Multiselect
        v-model="branch"
        :options="branches"
        label="name"
        trackBy="id"
        class="remove-height w-50 max-w-50"
      />
    </ReportPrintOptionLayout>
  </template>
</ReportPrintOption>

---

Visual Layout

The component renders a flex row with:

• Left side: Header text (16px) and description text (12px italic)
• Right side: Slot content (your control element)
• Bottom border: A subtle separator line between rows

This creates a clean, consistent settings-panel look matching the built-in ReportPrintOption rows.

---

Best Practices

1. Use inside ReportPrintOption slots — This component is designed to match the visual style of the built-in settings rows. Use it when adding custom rows via named slots.
2. Keep descriptions concise — One short sentence explaining what the setting controls.
3. Use consistent control widths — Apply classes like w-50 max-w-50 to Multiselect or w-60 to input fields for visual alignment.