@quoreadmin/ui 1.5.1 → 1.6.0

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';
@@ -49,6 +50,7 @@ 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, 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.1",
+    "version": "1.6.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",

package/dist/index154.js

@@ -1,210 +0,0 @@
-import { defineComponent as q, ref as o, computed as c, watch as k, onBeforeUnmount as M, onMounted as z, onUnmounted as K, nextTick as Q } from "vue";
-import { useBreakpoints as W, onClickOutside as b, breakpointsTailwind as _ } from "./index158.js";
-import { EditorContent as $, useEditor as D } from "./index192.js";
-import G from "./index193.js";
-import I from "./index194.js";
-import { Underline as J } from "./index195.js";
-import { TextStyle as N, Color as X } from "./index196.js";
-import { Link as Y } from "./index197.js";
-import { Placeholder as Z } from "./index198.js";
-import ee from "./index23.js";
-import te from "./index157.js";
-const ve = q({
-  components: {
-    EditorContent: $,
-    EmojiPicker: G,
-    QFileUpload: ee
-  },
-  props: {
-    modelValue: {
-      type: String,
-      default: ""
-    },
-    attachments: {
-      type: Object,
-      default: () => []
-    },
-    allowEmojis: {
-      type: Boolean,
-      default: !1
-    },
-    // If the wysiwyg should allow users to upload files/images
-    allowAttachments: {
-      type: Boolean,
-      default: !1
-    },
-    allowFormatting: {
-      type: Boolean,
-      default: !1
-    },
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /** Specify file types allowed */
-    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
-    filesAllowed: {
-      type: String,
-      default: "image/*,.pdf"
-    },
-    // If NOT isStacked we can expand it to be stacked when focused or files are attached
-    expands: {
-      type: Boolean,
-      default: !1
-    },
-    isStacked: {
-      type: Boolean,
-      default: !0
-    },
-    isStandalone: {
-      type: Boolean,
-      default: !1
-    },
-    placeholder: {
-      type: String,
-      default: ""
-    },
-    processing: {
-      type: Boolean,
-      default: !1
-    }
-    // If we have attachments, the wysiwyg should show the image preview as thumbnails (circle back)
-    // showThumbnails: {
-    //     type: Boolean,
-    //     default: true,
-    // },
-    // circle back to this
-    // mentions: {
-    //     // Refine type as we get further
-    //     type: Array as PropType<any>,
-    //     default: () => [],
-    // },
-  },
-  emits: ["update:model-value", "update:attachments", "keyboard-open"],
-  setup(a, { emit: i }) {
-    const d = o(), u = o(!1), C = o(""), f = o(), x = o(), s = o(!1), m = o(!1), n = o(!1), r = o([]), v = o(), E = o(), p = o(), l = o(!1), S = o(window.innerHeight), B = c(() => t.value.getAttributes("textStyle").color || "#121517"), h = c(() => a.attachments), V = c(() => a.isStacked || a.expands && (h.value.length > 0 || n.value || !t.value.isEmpty) || m.value), U = W(_).greaterOrEqual("md"), j = () => {
-      const e = window.prompt("URL");
-      t.value.chain().focus().extendMarkRange("link").setLink({ href: e || "" }).run();
-    }, L = (e) => {
-      t.value.chain().focus().setColor(e).run(), g();
-    }, F = () => {
-      s.value = !s.value;
-    }, g = () => {
-      s.value = !1;
-    }, O = () => {
-      v.value?.fileUpload?.choose();
-    }, P = (e) => {
-      t.value.chain().focus().insertContent(e).run(), f.value.$el.click();
-    }, w = async () => {
-      if (await Q(), n.value) {
-        const e = l.value, T = visualViewport?.height || window.innerHeight;
-        l.value = S.value - T > 0, e !== l.value && (n.value = l.value, i("keyboard-open", l.value));
-      }
-    }, R = () => {
-      n.value && a.expands && (l.value = !1, i("keyboard-open", l.value)), n.value = !1;
-    }, A = (e) => {
-      t.value.chain().focus().insertContent(e.i).run(), u.value = !1;
-    }, H = (e) => {
-      r.value = e, y();
-    }, y = () => {
-      let e = "";
-      t.value.isEmpty || (e = a.allowFormatting ? t.value.getHTML() : t.value.getText()), r.value !== a.attachments && i("update:attachments", r.value), i("update:model-value", e);
-    }, t = o(
-      D({
-        extensions: [
-          I.configure({
-            // Disable an included extension
-            // Command + z = undo
-            // TODO: Add an undo button if this is needed
-            // history: false,
-            // Configure an included extension
-            heading: {
-              levels: [1, 2]
-            }
-          }),
-          J,
-          N,
-          X,
-          Y.configure({
-            openOnClick: !1
-          }),
-          Z.configure({
-            placeholder: a.placeholder
-          })
-        ],
-        content: a.modelValue,
-        // Set this to the initial value coming in.
-        onUpdate: y,
-        editable: !a.disabled
-        // make the text editable or not - default is editable
-      })
-    );
-    return k(() => a.modelValue, (e) => {
-      t.value && !e && t.value.commands.clearContent();
-    }), k(() => a.disabled, (e) => {
-      t.value && (t.value.options.editable = !e, t.value.view.update(t.value.view.props));
-    }), M(() => {
-      t.value?.destroy();
-    }), z(() => {
-      visualViewport && a.expands && visualViewport.addEventListener("resize", w);
-    }), K(() => {
-      visualViewport && a.expands && visualViewport.removeEventListener("resize", w);
-    }), b(d, () => {
-      u.value = !1;
-    }), b(p, () => {
-      n.value && a.expands && (l.value = !1, i("keyboard-open", l.value)), n.value = !1;
-    }), {
-      colors: te.theme.colors,
-      colorExclusions: [
-        "success",
-        "success-light",
-        "error",
-        "error-light",
-        "warning",
-        "warning-light",
-        "info",
-        "info-light",
-        "transparent",
-        "current",
-        "green-quore",
-        "blue-sky",
-        "blue-quore",
-        "complaint",
-        "recurring",
-        "workorder"
-      ],
-      editor: t,
-      editorRef: E,
-      // refs
-      emojiPickerElement: d,
-      showEmojiPicker: u,
-      emojiSearch: C,
-      invoker: f,
-      isExpanded: V,
-      multiUploader: x,
-      showColorMenu: s,
-      focused: n,
-      files: h,
-      showFormatOptions: m,
-      uploadedfiles: r,
-      fileUploadRef: v,
-      wysiwygRef: p,
-      // computed
-      setColor: B,
-      // methods
-      mdAndLarger: U,
-      setLink: j,
-      selectColor: L,
-      showColors: F,
-      onClickAction: R,
-      onClickOutColors: g,
-      attachFiles: O,
-      appendEmoji: P,
-      onSelectEmoji: A,
-      onSelectFiles: H
-    };
-  }
-});
-export {
-  ve as default
-};