@hotelinking/ui 9.41.24 → 9.41.27

package/dist/types/types/index.d.ts

@@ -6,11 +6,13 @@ export declare const AllColors: readonly ["primary", "secondary", "light", "gree
 export declare const Sizes: readonly ["small", "medium", "big"];
 export declare const BiggerSizes: readonly ["bigger", "huge", "massive"];
 export declare const AllSizes: readonly ["small", "medium", "big", "bigger", "huge", "massive"];
+export declare const Types: string[];
 type Colors = typeof Colors[number];
 type AllColors = typeof AllColors[number];
 type InputTypes = typeof UiInputTypes[number];
 type Sizes = typeof Sizes[number];
 type AllSizes = typeof AllSizes[number];
+type Types = typeof Types[number];
 export interface UiButtonInterface {
     /** Defines if button as block class applied or not */
     block?: boolean;
@@ -19,7 +21,7 @@ export interface UiButtonInterface {
     /** Button is enabled or disabled */
     disabled?: boolean;
     /** Defines an icon in button´s left side. As you need to import the icon directly from icons library, you must use '@heroicons/vue/24/outline' icon type */
-    icon?: any;
+    icon?: FunctionalComponent;
     /** Is in skeleton mode or not */
     loading: boolean;
     /** Size options (see type Sizes) */
@@ -38,7 +40,7 @@ export interface UiCheckboxInterface {
     text?: string;
 }
 export interface UiCheckboxEventsInterface {
-    /** On checkbox changed state */
+    /** Emitted when click over checkbox */
     (e: 'checkboxChanged', checkbox: UiCheckboxType): void;
 }
 export type UiCheckboxType = {
@@ -267,6 +269,15 @@ export interface UiToggleInterface {
     /** Is loading or not */
     loading: boolean;
 }
+export interface UiToggleEventsInterface {
+    /** emitted when toggle is changed */
+    (e: 'toggleChanged', T: {
+        item: UiToggleInterface["item"];
+        active: boolean;
+    }): void;
+    /** emitted when right action is clicked */
+    (e: 'actionClicked', item: UiToggleInterface["item"]): void;
+}
 export interface UiAlertInterface {
     /** List of possible actions that are at the bottom of the notification */
     actions?: {
@@ -281,78 +292,160 @@ export interface UiAlertInterface {
     loading?: boolean;
 }
 export interface UiAlertEventsInterface {
-    /** When an alert action is clicked */
+    /** When an alert action is clicked emits UiAlertInterface["actions"]["event"] */
     (e: 'alertEvent', T: string): void;
 }
 export interface UiBreadcrumbsInterface {
+    /** pages array */
     pages: {
+        /** string literal */
         name: string;
+        /** route link */
         routeName: string;
+        /** it´s current route or not */
         current?: boolean;
     }[];
+    /** shows skeletons */
     loading?: boolean;
 }
+export interface UiBreadcrumbsEventInterface {
+    /** emits UiBreadcrumbsInterface["pages"]["routeName"] when a breadcrumb is clicked */
+    (e: 'breadCrumbClicked', T: string): void;
+}
 export interface UiCardInterface {
+    /** card id */
     id: string;
+    /** card title */
     name: string;
+    /** card subtitle */
     type: string;
+    /** array of tags */
     tags?: UiTagInterface[];
+    /** logo url string */
     logo: string;
+    /** show skeleton */
     loading: boolean;
 }
+export interface UiCardEventsInterface {
+    /** Emits when card is clicked */
+    (e: 'cardSelected', T: {
+        id: UiCardInterface["id"];
+        name: UiCardInterface["name"];
+        type: UiCardInterface["type"];
+        tags: UiCardInterface["tags"];
+    }): void;
+}
 export interface UiDeviceStatusInterface {
+    /** device id */
     id: string;
+    /** device name */
     name: string;
+    /** icon component from Heroicons */
     icon: any;
+    /** icon background color */
     color: AllColors;
+    /** device quantity */
     qty: number;
+    /** tags array */
     tags?: UiTagInterface[];
+    /** show skeleton */
     loading: boolean;
 }
+export interface UiDeviceStatusEventsInterface {
+    /** emitted when a tag is clicked*/
+    (e: 'deviceStatusTagClicked', T: UiTagInterface["event"]): void;
+    /** emitted when the link in the device status is clicked */
+    (e: 'deviceStatusQtyClicked', T: UiDeviceStatusInterface["id"]): void;
+}
 export interface UiFilterInterface {
-    type?: string;
+    /** items array */
     items: {
+        /** literal string */
         name: string;
+        /** internal value */
         value: string;
+        /** is active or not */
         active?: boolean;
     }[];
+    /** float position of dropdown */
     position?: "left" | "right";
+    /** label literal above filter */
     label?: string;
+    /** show skeleton */
     loading?: boolean;
 }
+export interface UiFilterEventsInterface {
+    /** emits UiFilterInterface["items"]["value"] when filter is selected */
+    (e: 'filterSelected', T: string): void;
+}
 export interface UiModalInterface {
+    /** modal title */
     title: string;
+    /** actions array */
     actions: {
+        /** value of the action */
         value: string;
+        /** action literal */
         name: string;
     }[];
+    /** modal name */
     modalName: string;
+    /** show modal or not */
     open: boolean;
-    type?: string;
+    /** modal type */
+    type?: Types;
+    /** show skeleton */
     loading?: boolean;
 }
+export interface UiModalEventsInterface {
+    /** emitted when a modal action is clicked, action emits: UiModalInterface["actions"]["value"] */
+    (e: 'modalAction', T: {
+        modal: UiModalInterface["modalName"];
+        action: string;
+    }): void;
+}
 export interface UiNotificationInterface {
-    type?: string;
+    /** notification type */
+    type?: Types;
+    /** notification title */
     title: string;
+    /** notification message */
     message?: string;
+    /** not in use, only for DS purposes */
     fixed: boolean;
+    /** show or not */
     show: boolean;
 }
+export interface UiNotificationEventsInterface {
+    /** emitted when X icon is clicked */
+    (e: 'closeNotification'): void;
+}
 export interface UiSectionTitleInterface {
+    /** section title */
     title: string;
+    /** section description */
     description?: string;
 }
 export type TaskType = {
+    /** internal id of task*/
     id: number;
+    /** name of task */
     name: string;
+    /** task action string */
     action: string;
+    /** task action href */
     href: string;
-    status: string;
+    /** task action status */
+    status: "Complete" | "In progress" | "Incomplete";
+    /** task status literal string */
     statusLiteral: string;
+    /** task description */
     description: string;
 };
 export interface UiTaskList {
+    /** list of tasks */
     tasks: TaskType[];
+    /** show skeleton */
     loading?: boolean;
 }
 export type chartOptionsType = {
@@ -415,20 +508,29 @@ export type chartOptionsType = {
     };
 };
 export interface UiChartInterface {
+    /** uiCircleChart sections labels */
+    labels?: string[];
+    /** chart title */
     title: string;
+    /** chart is Net promoter score */
     isNps?: boolean;
+    /** nps string literals */
     npsLiterals?: {
         unhappy: string;
         neutral: string;
         happy: string;
     };
+    /** chart id */
     id: string;
+    /** chart type (NOT USED in uiCircleChart && uiFunnelChartV2) */
     type?: "area" | "line" | "bar" | "scatter";
+    /** chart series and if different type, type */
     series: {
         name: string;
         type?: "area" | "line" | "bar" | "scatter";
         data: number[];
     }[];
+    /** chart options (NOT USED in uiCircleChart) */
     options?: {
         xaxis: {
             type: string;
@@ -436,242 +538,479 @@ export interface UiChartInterface {
             categories: string[];
         };
     };
+    /** show skeleton */
     loading?: boolean;
+    /** if chart has no data */
     empty?: boolean;
+    /** show data in this range */
     range?: "24h" | "7d" | "1m" | "3m" | "all";
+    /** horizontal or vertical (for columns) (NOT USED in uiCircleChart && uiFunnelChartV2) */
     horizontal?: boolean;
+    /** columns are stacked (NOT USED in uiCircleChart && uiFunnelChartV2) */
     stacked?: boolean;
+    /** if charts needs a custom height */
     height?: number;
+    /** draw a line (check score objetive) (NOT USED in uiCircleChart && uiFunnelChartV2) */
     annotations?: {
         text: string;
         high: number;
     };
 }
+export interface UiChartEventsInterface {
+    /** emitted when user clicks on range buttons */
+    (e: "selectedRange", T: {
+        range?: "24h" | "7d" | "1m" | "3m" | "all";
+        chartId: UiChartInterface["id"];
+    }): void;
+    /** emitted when chart updated */
+    (e: "chartUpdated"): void;
+    /** emitted when a point inside chart is clicked */
+    (e: "dataPointSelection", T: any): void;
+}
 export interface UiDateRangeInterface {
+    /** unique identifier */
     id: string;
+    /** show skeleton */
     loading?: boolean;
+    /** date range literal strings */
     literals: {
         from: string;
         to: string;
         search: string;
     };
+    /** date range dates */
     values?: {
-        from?: Date;
-        to?: Date;
+        from?: string;
+        to?: string;
     };
+    /** date range field colors */
     color?: AllColors;
+    /** show error message below field */
     error?: string;
+    /** is date range disabled */
     disabled?: boolean;
+    /** show label above date range */
     label?: string;
+    /** fields placeholder */
     placeholder?: string;
 }
+export interface UiDateRangeEventsInterface {
+    /** emitted when date range button is clicked */
+    (e: 'uiDateRangeButtonClicked', t: UiDateRangeInterface["values"]): void;
+}
 export interface UiDragAndDropInterface {
+    /** drag and drop array of elements */
     elements: {
         id: number;
         name: string;
         description: string;
     }[];
+    /** show skeleton */
     loading?: boolean;
 }
+export interface UiDragAndDropEventsInterface {
+    /** emitted when drag and drop elements are updated (dragged)*/
+    (e: "dragAndDropUpdated", T: any): void;
+}
 export interface UiGalleryInterface {
+    /** unique id gallery */
     galleryId: string;
+    /** images gallery array */
     gallery: {
+        /** image title or file name */
         title: string;
+        /** image size reference */
         size: string;
+        /** image url */
         source: string;
     }[];
+    /** show skeleton */
     loading?: boolean;
+    /** image gallery string literals */
     literals: {
+        /** delete button string literal */
         deleteAllImages: string;
+        /** doble opt in modal title */
         modalTitle: string;
+        /** doble opt in modal text */
         modalText: string;
+        /** close action string literal */
         closeAction: string;
+        /** delete action string literal */
         deleteAction: string;
     };
 }
+export interface UiGalleryEventsInterface {
+    /** emitted when a modal action is clicked, emits modal action */
+    (e: "modalAction", T: any): void;
+    /** emitted when delete image bin icon is clicked, emits image */
+    (e: "deleteImage", T: any): void;
+    /** emitted when an image is clicked, emits image */
+    (e: "imgClicked", T: any): void;
+}
 export interface UiLoadScreenInterface {
+    /** title string */
     title?: string;
+    /** message string */
     message?: string;
+    /** not in use, only for DS purposes */
     fixed?: boolean;
 }
 export interface UiNoResultsInterface {
+    /** title string literal */
     title: string;
+    /** message string literal */
     message: string;
+    /** uiButtons array */
     actions: {
+        /** action to emit when clicked */
         action: string;
+        /** string literal */
         text: string;
     }[];
+    /** want to add more options, add items */
     items: UiDropdownItemType[];
+    /** default selected item */
     select: UiDropdownItemType;
 }
+export interface UiNoResultsEventsInterface {
+    /** action button clicked */
+    (e: "action", T: string): void;
+    /** dropdown option selected */
+    (e: "noResultsOptionSelected", T: UiDropdownItemType): void;
+}
 export interface UiPaginationInterface {
+    /** current page number */
     current: number;
+    /** total number of pages */
     total: number;
+    /** show skeleton */
     loading?: boolean;
 }
+export interface UiPaginationEventsInterface {
+    /** emits when a button is clicked, emits a page number */
+    (e: "changePage", T: number): void;
+}
 export interface UiRightSidebarInterface {
+    /** Sidebar title */
     title?: string;
+    /** sidebar description or secondary text */
     description?: string;
+    /** is sidebar open? */
     open: boolean;
 }
+export interface UiRightSidebarEventsInterface {
+    /** emits when click outside bar or X icon */
+    (e: "closeRightBar"): void;
+}
 export interface UiSidebarInterface {
+    /** navigation array */
     navigation?: {
+        /** name string literal */
         name: string;
+        /** icon component from Heroicons */
         icon?: any;
+        /** is current sidebar item */
         current?: boolean;
-        id?: string;
+        /** unique id */
+        id: string;
+        /** If item is parent, has children items */
         children?: {
+            /** name string literal */
             name: string;
+            /** unique id */
             id: string;
+            /** is current sidebar item */
             current?: boolean;
         }[];
-    }[];
+    };
+    /** instead, can be a filters sidebar */
     filterNavigation?: {
+        /** has search input on top */
         hasSearch?: boolean;
+        /** search props */
         search?: UiInputInterface;
+        /** check groups */
         items?: {
+            /** check groups title */
             label: string;
+            /** checkbox array */
             filters: UiCheckboxInterface[];
         }[];
     };
+    /** is filter sidebar or navigation sidebar */
     isFilterNavigation?: boolean;
+    /** show skeleton */
     loading?: boolean;
+    /** sidebar brand logo */
     logo?: string;
 }
+export interface UiSidebarEventsInterface {
+    /** emitted when a link is clicked, emits item id */
+    (e: 'sideBarClick', t: string): any;
+}
 export interface UiSidebarV2Interface {
+    /** navigation array */
     navigation?: {
+        /** name string literal */
         name: string;
+        /** icon component from Heroicons */
         icon?: any;
+        /** is current sidebar item */
         current?: boolean;
-        id?: string;
+        /** unique id */
+        id: string;
+        /** If item is parent, has children items */
         children?: {
+            /** name string literal */
             name: string;
+            /** unique id */
             id: string;
+            /** is current sidebar item */
             current?: boolean;
         }[];
-    }[];
+    };
+    /** instead, can be a filters sidebar */
     filterNavigation?: {
+        /** has search input on top */
         hasSearch?: boolean;
+        /** search props */
         search?: UiInputInterface;
+        /** check groups */
         items?: {
+            /** check groups title */
             label: string;
+            /** checkbox array */
             filters: UiCheckboxInterface[];
         }[];
     };
+    /** is filter sidebar or navigation sidebar */
     isFilterNavigation?: boolean;
+    /** show skeleton */
     loading?: boolean;
+    /** sidebar brand logo */
     logo?: string;
+    /** left sidebar with product logos */
     productsSidebar: {
         name: string;
         icon: any;
         active?: boolean;
     }[];
 }
+export interface uiSidebarV2EventsInterface {
+    /** emits product name when clicked */
+    (e: 'productBarClick', t: string): void;
+    /** emitted when a link is clicked, emits item id */
+    (e: 'sideBarClick', t: string): any;
+}
 export interface UiStatsInterface {
     item: {
+        /** stat icon */
         icon: any;
+        /** increase o decrease value ej: 122% */
         change?: string;
-        changeType?: string;
+        /** change direction */
+        changeType?: "increase" | "decrease" | "neutral";
+        /** footer action link */
         actionText?: string;
+        /** unique id */
         id: string;
+        /** stats name */
         name: string;
+        /** stat value */
         stat: string | number;
+        /** helper text */
         explanation?: string;
+        /** icon background color */
         color?: AllColors;
+        /** show footer with action */
         showFooter?: boolean;
     };
+    /** show skeleton */
     loading?: boolean;
 }
+export interface UiStatsEventsInterface {
+    /** emits when actionText is clicked, emits item.id */
+    (e: "statClick", T: string): void;
+}
 export interface UiStripedCardInterface {
+    /** card title */
     title: string;
+    /** card subtitle */
     subtitle: string;
+    /** array of card rows */
     items: {
-        color: AllColors;
+        /** row title */
         title: string;
+        /** row text */
         text: string;
+        /** if link, when click, emits: */
         emits: string;
-        type?: "link" | "tags" | "tag";
+        /** row content, if undefined, the content is text */
+        type?: "link" | "tags";
+        /** if type tags, tags array */
         tags?: UiTagInterface[];
     }[];
+    /** show skeleton */
     loading?: boolean;
 }
+export interface UiStripedCardEventsInterface {
+    /** emits when link is clicked, emits item emits */
+    (e: "itemClicked", T: string): void;
+}
 export type TableItemType = {
+    /** co unique id */
     id: string | number;
+    /** when a row is emitted, if additional info is needed, can be put here */
     emitWith?: any;
+    /** content, can be string, link, tag */
     row: Array<string | {
+        /** string literal */
         content: string;
+        /** if tag, backgroun color of tag */
         color: AllColors;
-        type: string;
+        /** tag, link that emits, or href link */
+        type?: 'tag' | 'link' | 'href';
+        /** content emitted if clicked on link type */
         emits?: any;
+        /** target url of href type */
         href?: string;
     }>;
 };
 export interface UiTableInterface {
+    /** if you send this prop to the table with true it will reset all checked rows */
+    resetSelected: boolean;
+    /** header value the table is ordered */
     orderedBy: string;
+    /** order direction */
     orderDirection?: "asc" | "desc";
+    /** show skeleton */
     loading?: boolean;
+    /** table header */
     header: {
+        /** table column header name */
         name: string;
+        /** table column header value, used for orders */
         value: string;
+        /** tooltip string literal if needed */
         tooltip?: string;
     }[];
+    /** rows */
     items: TableItemType[] | [];
+    /** when row is checked, available actions shows */
     actions: {
+        /** action string literal */
         name: string;
+        /** action id */
         id: string;
     }[];
 }
+export interface UiTableEventsInterface {
+    /** if table action is clicked, emits selected rows ids */
+    (e: "tableAction", T: {
+        action: string;
+        items: Array<string | number>;
+    }): void;
+    /** emits header value and asc desc */
+    (e: "orderBy", T: {
+        value: string;
+        orderDirection: "desc" | "asc";
+    }): void;
+    /** if colum is link and has custom info */
+    (e: "customEmit", T: {
+        data: {
+            content: string;
+            type: string;
+            emits: any;
+        };
+    }): void;
+    /** emitted when resetSelected prop is sent with true, use it to rollback resetSelected to false */
+    (e: "selectedItemsDeleted"): void;
+}
 export interface UiTabInterface {
+    /** tabs array */
     tabs: {
+        /** tab string literal */
         name: string;
+        /** tab unique id */
         id: string;
+        /** tab count tag */
         count?: number;
+        /** is current tag */
         current?: boolean;
     }[];
 }
+export interface UiTabEventsInterface {
+    /** emits when a tab is clicked, emits tab id */
+    (e: "tabClicked", T: string): void;
+}
 export interface UiTimelineInterface {
+    /** timeline title */
     name: string;
+    /** items */
     timeline: {
+        /** timeline unique id */
         id: string;
+        /** timeline footer literal */
         footerText: string;
+        /** items array */
         items: {
+            /** row id */
             id: number | string;
+            /** link id */
             linkId: number | string;
+            /** row text */
             content: string;
+            /** item name, reference.. */
             target: string;
+            /** target link */
             href: string;
+            /** event date */
             date: string;
+            /** event formatted date */
             datetime: string;
+            /** event icon */
             icon: any;
+            /** event icon background color */
             iconBackground: string;
         }[];
     };
+    /** if custom height in px */
     height?: number;
+    /** is timeline empty */
     empty?: boolean;
+    /** show skeleton */
     loading?: boolean;
 }
+export interface UiTimelineEventsInterface {
+    /** when a timeline event is clicked, emits item id */
+    (e: 'timelineEventClicked', t: string | number): void;
+    /** emits when footer link is clicked */
+    (e: 'timelineFooterClicked', t: string): void;
+}
 export interface UiTopbarInterface {
+    /** brand logo */
     logo: string;
+    /** show alert icon */
     alerted: boolean;
+    /** sub brand logo */
     accountLogo: string;
+    /** profile menu of sub brand */
     profileMenu?: {
         name: string;
         id: string;
     }[];
+    /** brand name and description */
     brand?: {
         title: string;
         subtitle: string;
     };
-    navigation?: {
-        id: string;
-        name: string;
-        icon: string;
-        current: boolean;
-        children?: {
-            name: string;
-            id: string;
-        }[];
-    }[];
+    /** when mobile, this is the sidebar navigation menu */
+    navigation?: UiSidebarV2Interface["navigation"];
+}
+export interface UiTopbarEventsInterface {
+    /** when clicked in any menu item */
+    (e: "topBarClick", T: string): void;
 }
 export interface UiWrapperInterface {
     topbar: {
@@ -689,18 +1028,88 @@ export interface UiWrapperInterface {
     sidebar: UiSidebarV2Interface;
 }
 export interface UiDynamicStatsInterface {
-    dynamicStats: {
-        icon: any;
-        change?: string;
-        changeType?: string;
-        actionText?: string;
-        id: string;
+    /** uiStat Array */
+    dynamicStats: UiStatsInterface["item"][];
+    /** show skeleton */
+    loading: boolean;
+}
+export interface UiPriceCalendarInterface {
+    /** show skeleton */
+    loading: boolean;
+    /** Is a prices table or a discounts table */
+    type: "prices" | "discounts";
+    /** currency information */
+    currency: {
+        /** currency name: ej "EUR" */
         name: string;
-        stat: string | number;
-        explanation?: string;
-        color?: AllColors;
-        showFooter?: boolean;
+        /** currency symbol: ej "€" */
+        symbol: string;
+    };
+    /** listed default selection prices and upgrade prices for this category */
+    category: {
+        /** category name */
+        name: string;
+        /** array of selection prices based on date */
+        selectionPrices: {
+            date: Date;
+            price: number;
+        }[];
+        /** array of upgrade prices based on date */
+        upgradePrices: {
+            date: Date;
+            price: number;
+        }[];
+    };
+    /** listed rooms for this category with selection prices by date */
+    rooms: UiPriceCalendarRoomType[];
+    /** table actions based on row selections */
+    actions: {
+        /** action string literal */
+        name: string;
+        /** actino id */
+        id: string;
     }[];
-    loading: boolean;
+    /** table literals check storybook */
+    literals: {
+        category: string;
+        changeInBulk: string;
+        pricesSelection: string;
+        pricesUpgrade: string;
+        room: string;
+        building: string;
+        floor: string;
+        pricesDiscount: string;
+    };
+}
+export type UiPriceCalendarRoomType = {
+    /** room id */
+    id: string;
+    /** room name */
+    name: string;
+    /** building the room is in */
+    building: string;
+    /** the floor the room is in */
+    floor: string;
+    /** selection prices for this room based on dates */
+    selectionPrices: UiRoomTypeSelectionPriceType[];
+};
+/** selection prices for this room based on dates */
+export type UiRoomTypeSelectionPriceType = {
+    date: Date;
+    price: number;
+};
+export interface UiPricesCalendarEventsInterface {
+    /** when a date button is clicked */
+    (e: 'dateChanged', t: Date): void;
+    /** click change category prices in bulk button */
+    (e: 'changeCategoryBulkPrices'): void;
+    /** click on category price */
+    (e: 'changeCategorySelectionPrice', t: UiRoomTypeSelectionPriceType): void;
+    /** click on category upgrade price */
+    (e: 'changeCategoryUpgradePrice', t: UiRoomTypeSelectionPriceType): void;
+    /** click on room price */
+    (e: 'changeRoomPrice', t: UiRoomTypeSelectionPriceType): void;
+    /** click on table action */
+    (e: 'tableAction', t: any): void;
 }
 export {};