@quoreadmin/ui 1.5.0 → 1.6.0

package/dist/src/components/calendar/calendar.d.ts

@@ -18,9 +18,12 @@ export interface CalendarMonth {
     year: number;
     dates: CalendarDate[];
 }
+export interface PrimaryMonth {
+    month: number;
+    year: number;
+}
 export interface ContinuousCalendarData {
     dates: CalendarDate[];
-    primaryMonths: number[];
 }
 export type CalendarView = 'days' | 'months' | 'years';
 declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -34,10 +37,31 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Number of months to display (for multi-view) */
-    numberOfMonths: {
-        type: NumberConstructor;
-        default: number;
+    /**
+     * Start date of the calendar view.
+     * When provided with endDate, enables multi-month display.
+     * The calendar will show all weeks from startDate to endDate.
+     */
+    startDate: {
+        type: PropType<Date | null>;
+        default: null;
+    };
+    /**
+     * End date of the calendar view.
+     * When provided with startDate, enables multi-month display.
+     */
+    endDate: {
+        type: PropType<Date | null>;
+        default: null;
+    };
+    /**
+     * Which months to consider as "primary" (not greyed out).
+     * Array of {month, year} objects where month is 0-11.
+     * If not provided, derives from startDate/endDate range.
+     */
+    primaryMonths: {
+        type: PropType<PrimaryMonth[]>;
+        default: null;
     };
     /** Grey out dates that are not in the primary displayed month(s) */
     greyOutNonCurrentMonth: {
@@ -69,7 +93,7 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
         type: PropType<(date: Date) => boolean>;
         default: () => boolean;
     };
-    /** Dates that should show an indicator dot */
+    /** Dates that should show an event indicator (green background) */
     indicatorDates: {
         type: PropType<Date[]>;
         default: () => never[];
@@ -95,27 +119,19 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
         default: string;
     };
     /**
-     * Display multiple months in a single continuous vertical grid
-     * instead of side-by-side. Works with numberOfMonths > 1.
+     * When true and startDate/endDate are provided, displays all months
+     * in a single continuous vertical grid instead of side-by-side.
      */
     continuous: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /**
-     * Number of months to consider as "primary" (not greyed out) in continuous mode.
-     * Defaults to 1, meaning only the first month is highlighted.
-     * Set to same as numberOfMonths to highlight all visible months.
-     */
-    primaryMonthCount: {
-        type: NumberConstructor;
-        default: number;
-    };
 }>, {
     currentView: import('vue').Ref<CalendarView, CalendarView>;
     viewDate: import('vue').Ref<Date, Date>;
     hoverDate: import('vue').Ref<Date | null, Date | null>;
     yearRangeStart: import('vue').Ref<number, number>;
+    isMultiMonth: import('vue').ComputedRef<boolean>;
     daysOfWeek: import('vue').ComputedRef<string[]>;
     monthNames: import('vue').ComputedRef<string[]>;
     monthNamesShort: import('vue').ComputedRef<string[]>;
@@ -123,7 +139,7 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
     headerTitle: import('vue').ComputedRef<string>;
     yearsInRange: import('vue').ComputedRef<number[]>;
     selectedDates: import('vue').ComputedRef<Date[]>;
-    primaryMonths: import('vue').ComputedRef<Set<string>>;
+    primaryMonthsSet: import('vue').ComputedRef<Set<string>>;
     continuousCalendarData: import('vue').ComputedRef<ContinuousCalendarData>;
     isSameDay: (date1: Date, date2: Date) => boolean;
     isToday: (date: Date) => boolean;
@@ -135,7 +151,6 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
     hasIndicator: (date: Date) => boolean;
     generateMonthData: (monthDate: Date) => CalendarMonth;
     createDateObject: (date: Date, isCurrentMonth: boolean) => CalendarDate;
-    createDateObjectForContinuous: (date: Date, isPrimaryMonth: boolean) => CalendarDate;
     prevMonth: () => void;
     nextMonth: () => void;
     prevYearRange: () => void;
@@ -158,10 +173,31 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Number of months to display (for multi-view) */
-    numberOfMonths: {
-        type: NumberConstructor;
-        default: number;
+    /**
+     * Start date of the calendar view.
+     * When provided with endDate, enables multi-month display.
+     * The calendar will show all weeks from startDate to endDate.
+     */
+    startDate: {
+        type: PropType<Date | null>;
+        default: null;
+    };
+    /**
+     * End date of the calendar view.
+     * When provided with startDate, enables multi-month display.
+     */
+    endDate: {
+        type: PropType<Date | null>;
+        default: null;
+    };
+    /**
+     * Which months to consider as "primary" (not greyed out).
+     * Array of {month, year} objects where month is 0-11.
+     * If not provided, derives from startDate/endDate range.
+     */
+    primaryMonths: {
+        type: PropType<PrimaryMonth[]>;
+        default: null;
     };
     /** Grey out dates that are not in the primary displayed month(s) */
     greyOutNonCurrentMonth: {
@@ -193,7 +229,7 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
         type: PropType<(date: Date) => boolean>;
         default: () => boolean;
     };
-    /** Dates that should show an indicator dot */
+    /** Dates that should show an event indicator (green background) */
     indicatorDates: {
         type: PropType<Date[]>;
         default: () => never[];
@@ -219,22 +255,13 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
         default: string;
     };
     /**
-     * Display multiple months in a single continuous vertical grid
-     * instead of side-by-side. Works with numberOfMonths > 1.
+     * When true and startDate/endDate are provided, displays all months
+     * in a single continuous vertical grid instead of side-by-side.
      */
     continuous: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /**
-     * Number of months to consider as "primary" (not greyed out) in continuous mode.
-     * Defaults to 1, meaning only the first month is highlighted.
-     * Set to same as numberOfMonths to highlight all visible months.
-     */
-    primaryMonthCount: {
-        type: NumberConstructor;
-        default: number;
-    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onDate-click"?: ((...args: any[]) => any) | undefined;
@@ -243,7 +270,9 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
 }>, {
     modelValue: Date | Date[] | null;
     range: boolean;
-    numberOfMonths: number;
+    startDate: Date | null;
+    endDate: Date | null;
+    primaryMonths: PrimaryMonth[];
     greyOutNonCurrentMonth: boolean;
     showNavigation: boolean;
     showHeader: boolean;
@@ -256,7 +285,6 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
     firstDayOfWeek: number;
     locale: string;
     continuous: boolean;
-    primaryMonthCount: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export type QCalendarType = typeof QCalendar;
 export default QCalendar;

package/dist/src/components/calendar/calendar.stories.d.ts

@@ -3,6 +3,11 @@ import { default as QCalendar } from './calendar.vue';
 /**
  * The Calendar component provides a flexible date selection interface.
  * It supports single date selection, date range selection, and multi-month views.
+ *
+ * ## Multi-month Display
+ * To display multiple months, provide `startDate` and `endDate` props.
+ * - `continuous: false` (default) - Months displayed side-by-side
+ * - `continuous: true` - Months displayed in one vertical grid
  */
 declare const meta: Meta<typeof QCalendar>;
 export default meta;
@@ -11,20 +16,22 @@ export declare const Default: Story;
 export declare const WithSelectedDate: Story;
 export declare const RangeSelection: Story;
 export declare const WithSelectedRange: Story;
-export declare const TwoMonthView: Story;
-export declare const ThreeMonthView: Story;
-export declare const WithIndicators: Story;
+export declare const TwoMonthsSideBySide: Story;
+export declare const ThreeMonthsSideBySide: Story;
+export declare const WithEventIndicators: Story;
+export declare const TodayIndicator: Story;
 export declare const WithDisabledDates: Story;
 export declare const WithMinMaxDates: Story;
 export declare const WithoutNavigation: Story;
 export declare const WithoutHeader: Story;
 export declare const SundayFirst: Story;
 export declare const WithCustomDaySlot: Story;
+export declare const AllIndicatorTypes: Story;
 export declare const WithFooter: Story;
 export declare const Compact: Story;
-export declare const FullMultiView: Story;
 export declare const ContinuousTwoMonths: Story;
 export declare const ContinuousThreeMonths: Story;
-export declare const ContinuousWithRange: Story;
-export declare const ContinuousNoGreyOut: Story;
+export declare const ContinuousWithEvents: Story;
 export declare const ContinuousBothMonthsPrimary: Story;
+export declare const BackendDrivenExample: Story;
+export declare const PartialMonthRange: Story;

package/dist/src/components/event/event.d.ts

@@ -0,0 +1,356 @@
+import { PropType } from 'vue';
+export interface EventData {
+    id: number | string;
+    name: string;
+    startDate: string;
+    startTime?: string;
+    endDate: string;
+    endTime?: string;
+    allDay?: boolean;
+    eventType?: string;
+    typeName?: string;
+    typeColor?: string;
+    propertyName?: string;
+    postByName?: string;
+    timeZone?: string;
+    url?: string;
+}
+export type EventTypeName = 'Event' | 'Vendor' | 'Holiday' | 'Birthday' | 'Inspection' | 'Other';
+export interface EventTypeConfig {
+    icon: string;
+    iconType: string;
+    color: string;
+}
+declare const QEvent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Event data object */
+    event: {
+        type: PropType<EventData>;
+        required: true;
+    };
+    /**
+     * Override the event type for icon/color.
+     * If not provided, derives from event.typeName or event.eventType
+     */
+    type: {
+        type: PropType<string>;
+        default: string;
+    };
+    /** Use long date format (e.g., "January 25" instead of "Jan 25") */
+    longDateFormat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Show year in the date */
+    showYear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Use 24-hour time format */
+    use24HourFormat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Hide the time, show only the date */
+    hideTime: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Custom date format function - overrides built-in formatting */
+    dateFormatter: {
+        type: PropType<(startDate: Date, endDate: Date, event: EventData) => string>;
+        default: null;
+    };
+    /** Show the event as compact (icon only, no text) */
+    compact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Position of the tooltip */
+    tooltipPosition: {
+        type: PropType<"top" | "bottom" | "left" | "right">;
+        default: string;
+    };
+}>, {
+    eventTypeKey: import('vue').ComputedRef<string>;
+    eventTypeConfig: import('vue').ComputedRef<EventTypeConfig>;
+    eventTypeName: import('vue').ComputedRef<string>;
+    startDate: import('vue').ComputedRef<Date>;
+    endDate: import('vue').ComputedRef<Date>;
+    isSameDay: import('vue').ComputedRef<boolean>;
+    formattedDateTime: import('vue').ComputedRef<string>;
+    formatDate: (date: Date, includeYear?: boolean) => string;
+    formatTime: (date: Date) => string;
+    handleClick: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "click"[], "click", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** Event data object */
+    event: {
+        type: PropType<EventData>;
+        required: true;
+    };
+    /**
+     * Override the event type for icon/color.
+     * If not provided, derives from event.typeName or event.eventType
+     */
+    type: {
+        type: PropType<string>;
+        default: string;
+    };
+    /** Use long date format (e.g., "January 25" instead of "Jan 25") */
+    longDateFormat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Show year in the date */
+    showYear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Use 24-hour time format */
+    use24HourFormat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Hide the time, show only the date */
+    hideTime: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Custom date format function - overrides built-in formatting */
+    dateFormatter: {
+        type: PropType<(startDate: Date, endDate: Date, event: EventData) => string>;
+        default: null;
+    };
+    /** Show the event as compact (icon only, no text) */
+    compact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Position of the tooltip */
+    tooltipPosition: {
+        type: PropType<"top" | "bottom" | "left" | "right">;
+        default: string;
+    };
+}>> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    type: string;
+    compact: boolean;
+    longDateFormat: boolean;
+    showYear: boolean;
+    use24HourFormat: boolean;
+    hideTime: boolean;
+    dateFormatter: (startDate: Date, endDate: Date, event: EventData) => string;
+    tooltipPosition: "bottom" | "left" | "right" | "top";
+}, {}, {
+    QIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        icon: {
+            type: StringConstructor;
+            required: true;
+        };
+        type: {
+            type: StringConstructor;
+            default: string;
+        };
+        width: {
+            type: NumberConstructor;
+            default: number;
+            required: false;
+        };
+        height: {
+            type: NumberConstructor;
+            default: number;
+            required: false;
+        };
+        size: {
+            type: StringConstructor;
+            default: string;
+        };
+        color: {
+            type: StringConstructor;
+            default: string;
+        };
+        inline: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        customClass: {
+            type: StringConstructor;
+            default: string;
+        };
+        customSize: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, {
+        iconPath: import('vue').ComputedRef<string>;
+        customizedSize: import('vue').ComputedRef<boolean>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        icon: {
+            type: StringConstructor;
+            required: true;
+        };
+        type: {
+            type: StringConstructor;
+            default: string;
+        };
+        width: {
+            type: NumberConstructor;
+            default: number;
+            required: false;
+        };
+        height: {
+            type: NumberConstructor;
+            default: number;
+            required: false;
+        };
+        size: {
+            type: StringConstructor;
+            default: string;
+        };
+        color: {
+            type: StringConstructor;
+            default: string;
+        };
+        inline: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        customClass: {
+            type: StringConstructor;
+            default: string;
+        };
+        customSize: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {
+        type: string;
+        color: string;
+        size: string;
+        height: number;
+        width: number;
+        inline: boolean;
+        customClass: string;
+        customSize: boolean;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    QTooltip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        id: {
+            type: StringConstructor;
+            default: string;
+        };
+        color: {
+            type: StringConstructor;
+            default: string;
+        };
+        controlled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        noWrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        position: {
+            type: StringConstructor;
+            default: string;
+        };
+        relative: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        teleport: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        teleportTo: {
+            type: StringConstructor;
+            default: string;
+        };
+        tooltipClasses: {
+            type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+            default: string;
+        };
+        visible: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, {
+        tooltipStyle: import('vue').Ref<{
+            top: string;
+            left: string;
+        }, {
+            top: string;
+            left: string;
+        } | {
+            top: string;
+            left: string;
+        }>;
+        tooltipTarget: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        isVisible: import('vue').ComputedRef<boolean>;
+        hideTooltip: () => void;
+        showTooltip: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        id: {
+            type: StringConstructor;
+            default: string;
+        };
+        color: {
+            type: StringConstructor;
+            default: string;
+        };
+        controlled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        noWrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        position: {
+            type: StringConstructor;
+            default: string;
+        };
+        relative: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        teleport: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        teleportTo: {
+            type: StringConstructor;
+            default: string;
+        };
+        tooltipClasses: {
+            type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+            default: string;
+        };
+        visible: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {
+        color: string;
+        position: string;
+        visible: boolean;
+        relative: boolean;
+        disabled: boolean;
+        id: string;
+        controlled: boolean;
+        noWrap: boolean;
+        teleport: boolean;
+        teleportTo: string;
+        tooltipClasses: string | Record<string, any> | unknown[];
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export type QEventType = typeof QEvent;
+export default QEvent;

package/dist/src/components/event/event.stories.d.ts

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as QEvent } from './event.vue';
+/**
+ * The Event component displays calendar events with type-specific icons and colors.
+ *
+ * ## Event Types
+ * - **Event/Calendar**: Purple calendar icon
+ * - **Vendor**: Maroon shop icon
+ * - **Holiday**: Teal star icon
+ * - **Birthday**: Blue cake icon
+ * - **Inspection**: Orange tasks icon
+ * - **Other**: Gray announcement icon
+ */
+declare const meta: Meta<typeof QEvent>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AllEventTypes: Story;
+export declare const BirthdayEvent: Story;
+export declare const InspectionEvent: Story;
+export declare const HolidayEvent: Story;
+export declare const VendorEvent: Story;
+export declare const MultiDayEvent: Story;
+export declare const LongDateFormat: Story;
+export declare const WithYear: Story;
+export declare const TwentyFourHourFormat: Story;
+export declare const HideTime: Story;
+export declare const CompactMode: Story;
+export declare const WithExtraSlot: Story;
+export declare const CustomDateTimeSlot: Story;
+export declare const CustomDateFormatter: Story;
+export declare const EventList: Story;
+export declare const APIResponseExample: Story;

package/dist/src/components/event/event.vue.d.ts

@@ -0,0 +1,2 @@
+export * from './event.js';
+export { default } from './event.js';

package/dist/src/components/room-details-popover/room-details-popover.d.ts

@@ -310,7 +310,7 @@ declare const QRoomDetailsPopover: import('vue').DefineComponent<import('vue').E
     getRoomNotices: () => Promise<void>;
     getSharedData: () => Promise<void>;
     getStayDetails: () => Promise<void>;
-    getTicketColor: (ticketType: any) => "red-30" | "green-20" | "maroon-30" | "teal-10" | "orange-20" | undefined;
+    getTicketColor: (ticketType: any) => "red-30" | "maroon-30" | "green-20" | "teal-10" | "orange-20" | undefined;
     getTicketIcon: (ticketType: any) => "check" | "hammer" | "phone" | "face-frown" | "concierge-bell" | undefined;
     getTickets: () => Promise<void>;
     handleFailedResponse: (response: any) => Promise<any>;

package/dist/src/index.d.ts

@@ -19,6 +19,7 @@ export { default as QDataTableHead } from './components/data-table-head/data-tab
 export { default as QDatePicker } from './components/date-picker/date-picker.vue';
 export { default as QDivider } from './components/divider/divider.vue';
 export { default as QErrorModal } from './components/modal/variants/error-modal/error-modal.vue';
+export { default as QEvent } from './components/event/event.vue';
 export { default as QFileUpload } from './components/file-upload/file-upload.vue';
 export { default as QFooterActions } from './components/footer-actions/footer-actions.vue';
 export { default as QFormGroup } from './components/form-group/form-group.vue';
@@ -48,7 +49,8 @@ export { default as QTooltip } from './components/tooltip/tooltip.vue';
 export { default as QTour } from './components/tour/tour.vue';
 export { default as QWarningModal } from './components/modal/variants/warning-modal/warning-modal.vue';
 export { default as QWysiwyg } from './components/wysiwyg/wysiwyg.vue';
-export type { CalendarDate, CalendarMonth, CalendarView, ContinuousCalendarData } from './components/calendar/calendar';
+export type { CalendarDate, CalendarMonth, CalendarView, ContinuousCalendarData, PrimaryMonth } from './components/calendar/calendar';
+export type { EventData, EventTypeName, EventTypeConfig } from './components/event/event';
 export type { MenuItem } from './components/menu/menu';
 export type { IconActionOption } from './components/icon-action-group/icon-action-group';
 export type { QTourStep } from './components/tour/tour';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@quoreadmin/ui",
     "private": false,
-    "version": "1.5.0",
+    "version": "1.6.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",