ReportPrintOption Component

A two-panel settings component for configuring report date ranges and print options. Internally uses the Tab component to switch between a Report settings tab and a Print settings tab. Provides date type presets, dual-calendar (AD/BS) date pickers, paper size/orientation selectors, and toggle switches for print visibility options.

Import
Basic Usage
Props
Events
Slots
TypeScript Interfaces
Date Type Presets
Print Settings
Usage Examples
Best Practices
Troubleshooting
Dependencies

Import

import { ReportPrintOption } from "dolphin-components";
import type { ReportPrintOptionProps } from "dolphin-components";

Basic Usage

vue

<template>
  <ReportPrintOption v-model="config" />
</template>

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

const config = ref({
  startDate: "",
  endDate: "",
  dateType: "today",
  isBS: false,
  paperSize: "A4",
  paperOrientation: "Portrait",
  showHeader: true,
  showReport: true,
  showReportOverview: true,
  showPageCount: true,
  showPrintDate: true,
});
</script>

Props

Prop	Type	Default	Description
`modelValue`	`ReportPrintOptionModelValue`	See defaults below	The configuration object containing all report and print settings. Supports `v-model`.

Default `modelValue`

typescript

{
  startDate: "",
  endDate: "",
  dateType: "today",
  isBS: false,
  paperSize: "A4",
  paperOrientation: "Portrait",
  showHeader: true,
  showReport: true,
  showReportOverview: true,
  showPageCount: true,
  showPrintDate: true,
}

Model Value Properties

Property	Type	Default	Description
`startDate`	`string`	`""`	Start date in AD format (`YYYY-MM-DD`).
`endDate`	`string`	`""`	End date in AD format (`YYYY-MM-DD`).
`dateType`	`string`	`"today"`	Active date type preset ID (see Date Type Presets).
`isBS`	`boolean`	`false`	Whether to display dates in Nepali calendar (Bikram Sambat).
`paperSize`	`string`	`"A4"`	Paper size for printing. Options: `"A3"`, `"A4"`, `"A5"`, `"Letter"`.
`paperOrientation`	`string`	`"Portrait"`	Page orientation. Options: `"Portrait"`, `"Landscape"`.
`showHeader`	`boolean`	`true`	Show header section when printing.
`showReport`	`boolean`	`true`	Show report content when printing (legacy alias for `showReportOverview`).
`showReportOverview`	`boolean`	`true`	Show report overview table when printing.
`showPageCount`	`boolean`	`true`	Show page count when printing.
`showPrintDate`	`boolean`	`true`	Show print date when printing.

Events

Event	Payload	Description
`update:modelValue`	`ReportPrintOptionModelValue`	Emitted whenever any setting changes. Supports `v-model`.
`search`	—	Emitted when a search/refresh action is triggered.

Slots

The component provides named slots at strategic insertion points to allow adding custom settings rows in either the Report or Print tab.

Report Tab Slots

Slot Name	Description
`before-date-type`	Insert content before the Date Type selector.
`after-date-type`	Insert content after the Date Type selector.
`after-from-date`	Insert content after the From Date picker.
`after-to-date`	Insert content after the To Date picker.
`report-section`	Insert content at the end of the repport tab panel.

Print Tab Slots

Slot Name	Description
`before-paper-size`	Insert content before the Paper Size selector.
`after-paper-size`	Insert content after the Paper Size selector.
`after-page-orientation`	Insert content after the Page Orientation selector.
`after-show-header`	Insert content after the Show Header toggle.
`after-show-report-overview`	Insert content after the Show Report Overview toggle.
`after-show-page-count`	Insert content after the Show Page Count toggle.
`after-show-print-date`	Insert content after the Show Print Date toggle.
`print-section`	Insert content at the end of the print tab panel.

TypeScript Interfaces

typescript

interface ReportPrintOptionProps {
  modelValue?: {
    startDate: string;
    endDate: string;
    dateType: string;
    isBS: boolean;
    paperSize?: string;
    paperOrientation?: string;
    showHeader?: boolean;
    showReport?: boolean;
    showReportOverview?: boolean;
    showPageCount?: boolean;
    showPrintDate?: boolean;
  };
}

Date Type Presets

The Report tab includes a dropdown of predefined date ranges, all calculated using the Nepali fiscal year system:

ID	Display Name	Description
`year_to_date`	Year to date	From fiscal year start to today
`quarter_to_date`	Quarter to date	From current fiscal quarter start to today
`month_to_date`	Month to date	From current month start to today
`week_to_date`	Week to date	From current week start to today
`today`	Today	Current day only
`last_30_days`	Last 30 days	30 days ago to today
`last_90_days`	Last 90 days	90 days ago to today
`first_quarter`	First quarter (Q1)	Complete first fiscal quarter
`second_quarter`	Second quarter (Q2)	Complete second fiscal quarter
`third_quarter`	Third quarter (Q3)	Complete third fiscal quarter
`fourth_quarter`	Fourth quarter (Q4)	Complete fourth fiscal quarter
`custom`	Custom	Automatically set when dates are manually picked

Print Settings

The Print tab provides the following configurable options:

Setting	Control	Options / Default
Paper Size	Multiselect	A3, A4, A5, Letter
Page Orientation	Multiselect	Landscape, Portrait
Show Header	Switch	On / Off
Show Report Overview	Switch	On / Off
Show Page Count	Switch	On / Off
Show Print Date	Switch	On / Off

Usage Examples

With Custom Report Slot

Add a custom field between the built-in date settings:

vue

<template>
  <ReportPrintOption v-model="config">
    <template #after-to-date>
      <ReportPrintOptionLayout
        header="Department"
        description="Filter data by department."
      >
        <Multiselect
          v-model="selectedDepartment"
          :options="departments"
          label="name"
          trackBy="id"
          placeholder="Select Department"
          class="remove-height w-50 max-w-50"
        />
      </ReportPrintOptionLayout>
    </template>
  </ReportPrintOption>
</template>

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

const config = ref({
  startDate: "",
  endDate: "",
  dateType: "month_to_date",
  isBS: false,
});

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

Watching for Configuration Changes

vue

<template>
  <ReportPrintOption v-model="reportConfig" />

  <div class="mt-4 text-sm text-gray-500">
    Period: {{ reportConfig.startDate }} to {{ reportConfig.endDate }} | Paper:
    {{ reportConfig.paperSize }} {{ reportConfig.paperOrientation }}
  </div>
</template>

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

const reportConfig = ref({
  startDate: "",
  endDate: "",
  dateType: "quarter_to_date",
  isBS: true,
  paperSize: "A4",
  paperOrientation: "Portrait",
  showHeader: true,
  showReport: true,
  showReportOverview: true,
  showPageCount: true,
  showPrintDate: true,
});

watch(
  reportConfig,
  (newConfig) => {
    console.log("Config updated:", newConfig);
  },
  { deep: true },
);
</script>

Best Practices

Always use v-model — The component communicates all changes through update:modelValue. Use v-model for seamless two-way binding.
Dates are always in AD format — Regardless of the BS/AD toggle display, startDate and endDate are always emitted in Gregorian YYYY-MM-DD format.
Use named slots for custom fields — Insert domain-specific controls (department filters, branch selectors, etc.) using the available named slots rather than wrapping the component.
Pair with ReportPrintOptionLayout — When adding custom rows via slots, wrap them in ReportPrintOptionLayout for visual consistency with the built-in settings.

Troubleshooting

Dates not updating

Ensure you are binding with v-model and your ref is reactive.
Verify the dateType value is one of the valid preset IDs. Invalid values default to "today".

Print tab settings not reflected

Both showReport and showReportOverview are synced together for backward compatibility. Setting either one updates the other.

BS/AD toggle not working

The toggle switches the display format only. The model values (startDate, endDate) always remain in AD format.

Dependencies

Tab — Internal tab navigation between Report and Print panels
Toggle — BS/AD calendar system toggle
Switch — Print visibility toggles
Multiselect — Date type, paper size, and orientation selectors
nepali-datepicker-vue — Nepali calendar date picker
vue-datepicker-next — Gregorian calendar date picker
nepali-date-library — Date conversion utilities

ReportPrintOption Component ​

Table of Contents ​

Import ​

Basic Usage ​

Props ​

Default modelValue ​

Model Value Properties ​

Events ​

Slots ​

Report Tab Slots ​

Print Tab Slots ​

TypeScript Interfaces ​

Date Type Presets ​

Print Settings ​

Usage Examples ​

With Custom Report Slot ​

Watching for Configuration Changes ​

Best Practices ​

Troubleshooting ​

Dates not updating ​

Print tab settings not reflected ​

BS/AD toggle not working ​

Dependencies ​