@frollo/frollo-web-ui 5.0.5 → 6.0.0

package/icons/ellipsis.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.5 10C13.5 9.17188 14.1719 8.5 15 8.5C15.8281 8.5 16.5 9.17188 16.5 10C16.5 10.8281 15.8281 11.5 15 11.5C14.1719 11.5 13.5 10.8281 13.5 10ZM8.5 10C8.5 9.17188 9.17188 8.5 10 8.5C10.8281 8.5 11.5 9.17188 11.5 10C11.5 10.8281 10.8281 11.5 10 11.5C9.17188 11.5 8.5 10.8281 8.5 10ZM6.5 10C6.5 10.8281 5.82844 11.5 5 11.5C4.17156 11.5 3.5 10.8281 3.5 10C3.5 9.17188 4.17156 8.5 5 8.5C5.82844 8.5 6.5 9.17188 6.5 10Z" />
+</svg>

package/icons/index.ts

@@ -37,6 +37,7 @@ import XMarkSvg from './xmark.svg';
 import PenSvg from './pen.svg';
 import CalendarSvg from './calendar.svg';
 import CalendarDaySvg from './calendar-day.svg';
+import EllipsisSvg from './ellipsis.svg';
 
 export {
   ViewSvg,
@@ -77,5 +78,6 @@ export {
   XMarkSvg,
   PenSvg,
   CalendarSvg,
-  CalendarDaySvg
+  CalendarDaySvg,
+  EllipsisSvg
 };

package/index.d.ts

@@ -1265,7 +1265,19 @@ declare interface FwDatePickerProps {
     rounded?: boolean;
 }
 
-declare const __default__$5: vue.DefineComponent<{
+interface FwPopoverProps {
+    title: string;
+    placement: 'top' | 'right' | 'bottom' | 'left' | 'auto' | 'auto-start' | 'auto-end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
+    trigger: 'click' | 'hover' | 'focus';
+    position: 'fixed' | 'absolute';
+    closeOnClick?: boolean;
+    closeOnClickOutside?: boolean;
+    showOnTop?: boolean;
+    showArrow?: boolean;
+    textAlign?: 'center' | 'left' | 'right';
+}
+
+declare const __default__$6: vue.DefineComponent<{
     /**
      * The size of the tag. Accepts: 'xs', 'sm' & 'md'
      */
@@ -1333,7 +1345,7 @@ declare const __default__$5: vue.DefineComponent<{
     dismissable: boolean;
 }>;
 
-declare const __default__$4: vue.DefineComponent<{
+declare const __default__$5: vue.DefineComponent<{
     items: {
         type: PropType<FwTableItem[]>;
         required: true;
@@ -1405,7 +1417,7 @@ declare const _default$c: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentO
 
 declare const _default$b: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
 
-declare const __default__$3: vue.DefineComponent<{
+declare const __default__$4: vue.DefineComponent<{
     /**
      * The header title of the accordion
      */
@@ -2140,7 +2152,7 @@ declare const _default$1: vue.DefineComponent<{
     tableHeaderName: string;
 }>;
 
-declare const __default__$2: vue.DefineComponent<{
+declare const __default__$3: vue.DefineComponent<{
     /**
      * The date-picker v-model
      */
@@ -2315,6 +2327,162 @@ declare const __default__$2: vue.DefineComponent<{
     rounded: boolean;
 }>;
 
+declare const __default__$2: vue.DefineComponent<{
+    /**
+     * The title of the popover
+     */
+    title: StringConstructor;
+    /**
+     * The side of the target element the popover should be placed against. Accepts 'top', 'right', 'bottom' and 'left'
+     */
+    placement: {
+        type: PropType<"top" | "right" | "bottom" | "left" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Whether to use `fixed` or `absolute` positioning.
+     * Absolute is more performant if you have a lot of popovers; fixed is more robust
+     */
+    position: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The input event which causes the popover to show. Accepts 'click' and 'hover'
+     */
+    trigger: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Whether to show component on top of all components by setting the highest z-index
+     */
+    showOnTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Close the popover automatically when the user clicks inside of the popover
+     */
+    closeOnClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Close the popover automatically when the user clicks outside of the popover
+     */
+    closeOnClickOutside: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The text alignment of the popover content should be placed against. Accepts 'center', 'right' and 'left'
+     */
+    textAlign: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Whether to show the arrow
+     **/
+    showArrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    targetElement: vue.Ref<HTMLElement | undefined>;
+    contentElement: vue.Ref<HTMLElement | undefined>;
+    contentElementId: string;
+    computedVisible: vue.ComputedRef<string | false | vue.Slot | undefined>;
+    onHover: () => void;
+    onClick: () => void;
+    onLeave: () => void;
+    autoCloseContent: (e: Event) => void;
+    visible: vue.Ref<boolean>;
+    spacingSize: vue.ComputedRef<"12px" | "2px">;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "closed"[], "closed", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The title of the popover
+     */
+    title: StringConstructor;
+    /**
+     * The side of the target element the popover should be placed against. Accepts 'top', 'right', 'bottom' and 'left'
+     */
+    placement: {
+        type: PropType<"top" | "right" | "bottom" | "left" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Whether to use `fixed` or `absolute` positioning.
+     * Absolute is more performant if you have a lot of popovers; fixed is more robust
+     */
+    position: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The input event which causes the popover to show. Accepts 'click' and 'hover'
+     */
+    trigger: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Whether to show component on top of all components by setting the highest z-index
+     */
+    showOnTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Close the popover automatically when the user clicks inside of the popover
+     */
+    closeOnClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Close the popover automatically when the user clicks outside of the popover
+     */
+    closeOnClickOutside: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The text alignment of the popover content should be placed against. Accepts 'center', 'right' and 'left'
+     */
+    textAlign: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Whether to show the arrow
+     **/
+    showArrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClosed?: ((...args: any[]) => any) | undefined;
+}, {
+    placement: "top" | "right" | "bottom" | "left" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+    position: string;
+    trigger: string;
+    showOnTop: boolean;
+    closeOnClick: boolean;
+    closeOnClickOutside: boolean;
+    textAlign: string;
+    showArrow: boolean;
+}>;
+
 declare const __default__$1: vue.DefineComponent<{
     /**
      * The animation-iteration-count CSS property of the pulse animation.
@@ -2387,4 +2555,4 @@ declare const install: Exclude<Plugin['install'], undefined>;
 
 declare module '@frollo/frollo-web-ui/icons' { }
 
-export { ButtonAnimation, ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, __default__$3 as FwAccordion, FwAccordionProps, _default$4 as FwBarChart, FwBarChartProps, FwBarGraphData, _default$i as FwButton, FwButtonProps, _default$j as FwCard, FwCardProps, _default$l as FwCheckbox, FwCheckboxProps, __default__$2 as FwDatePicker, FwDatePickerProps, _default$2 as FwDrawer, FwDrawerProps, _default$k as FwDropdown, FwDropdownOption, FwDropdownProps, __default__$1 as FwEmailPulse, _default$a as FwImage, FwImageProps, _default$m as FwInput, FwInputProps, FwInputType, _default$9 as FwLoadingBar, _default$8 as FwLoadingCard, _default as FwLoadingSpinner, _default$7 as FwLoadingTable, _default$e as FwModal, FwModalProps, _default$h as FwNavigationMenu, _default$d as FwProgressBar, _default$1 as FwProviderList, FwProviderListProps, _default$3 as FwSidebarMenu, FwSidebarMenuItem, __default__ as FwSuccessPulse, _default$f as FwTab, __default__$4 as FwTable, FwTableFormatFunction, _default$c as FwTableHead, FwTableItem, FwTableItemOptions, FwTableProps, _default$b as FwTableRow, FwTableSort, _default$g as FwTabs, __default__$5 as FwTag, FwTagProps, _default$6 as FwToast, FwToastProps, _default$5 as FwTransactionsCard, FwTransactionsCardProps, ModalServiceProps, NavMenuItem, ProgressBarStep, TagDefinition, TagDefinitionList, TagSize, TagSizes, TagVariantName, ToastPosition, ToastServiceProps, ToastType, ToastTypes, install as default, modalService, toastService };
+export { ButtonAnimation, ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, __default__$4 as FwAccordion, FwAccordionProps, _default$4 as FwBarChart, FwBarChartProps, FwBarGraphData, _default$i as FwButton, FwButtonProps, _default$j as FwCard, FwCardProps, _default$l as FwCheckbox, FwCheckboxProps, __default__$3 as FwDatePicker, FwDatePickerProps, _default$2 as FwDrawer, FwDrawerProps, _default$k as FwDropdown, FwDropdownOption, FwDropdownProps, __default__$1 as FwEmailPulse, _default$a as FwImage, FwImageProps, _default$m as FwInput, FwInputProps, FwInputType, _default$9 as FwLoadingBar, _default$8 as FwLoadingCard, _default as FwLoadingSpinner, _default$7 as FwLoadingTable, _default$e as FwModal, FwModalProps, _default$h as FwNavigationMenu, __default__$2 as FwPopover, FwPopoverProps, _default$d as FwProgressBar, _default$1 as FwProviderList, FwProviderListProps, _default$3 as FwSidebarMenu, FwSidebarMenuItem, __default__ as FwSuccessPulse, _default$f as FwTab, __default__$5 as FwTable, FwTableFormatFunction, _default$c as FwTableHead, FwTableItem, FwTableItemOptions, FwTableProps, _default$b as FwTableRow, FwTableSort, _default$g as FwTabs, __default__$6 as FwTag, FwTagProps, _default$6 as FwToast, FwToastProps, _default$5 as FwTransactionsCard, FwTransactionsCardProps, ModalServiceProps, NavMenuItem, ProgressBarStep, TagDefinition, TagDefinitionList, TagSize, TagSizes, TagVariantName, ToastPosition, ToastServiceProps, ToastType, ToastTypes, install as default, modalService, toastService };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "5.0.5",
+  "version": "6.0.0",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",

package/types/components/fw-popover/fw-popover.vue.d.ts

@@ -0,0 +1,157 @@
+import { PropType } from 'vue';
+declare const __default__: import("vue").DefineComponent<{
+    /**
+     * The title of the popover
+     */
+    title: StringConstructor;
+    /**
+     * The side of the target element the popover should be placed against. Accepts 'top', 'right', 'bottom' and 'left'
+     */
+    placement: {
+        type: PropType<"top" | "right" | "bottom" | "left" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Whether to use `fixed` or `absolute` positioning.
+     * Absolute is more performant if you have a lot of popovers; fixed is more robust
+     */
+    position: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The input event which causes the popover to show. Accepts 'click' and 'hover'
+     */
+    trigger: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Whether to show component on top of all components by setting the highest z-index
+     */
+    showOnTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Close the popover automatically when the user clicks inside of the popover
+     */
+    closeOnClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Close the popover automatically when the user clicks outside of the popover
+     */
+    closeOnClickOutside: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The text alignment of the popover content should be placed against. Accepts 'center', 'right' and 'left'
+     */
+    textAlign: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Whether to show the arrow
+     **/
+    showArrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    targetElement: import("vue").Ref<HTMLElement | undefined>;
+    contentElement: import("vue").Ref<HTMLElement | undefined>;
+    contentElementId: string;
+    computedVisible: import("vue").ComputedRef<string | false | import("vue").Slot | undefined>;
+    onHover: () => void;
+    onClick: () => void;
+    onLeave: () => void;
+    autoCloseContent: (e: Event) => void;
+    visible: import("vue").Ref<boolean>;
+    spacingSize: import("vue").ComputedRef<"12px" | "2px">;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "closed"[], "closed", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The title of the popover
+     */
+    title: StringConstructor;
+    /**
+     * The side of the target element the popover should be placed against. Accepts 'top', 'right', 'bottom' and 'left'
+     */
+    placement: {
+        type: PropType<"top" | "right" | "bottom" | "left" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Whether to use `fixed` or `absolute` positioning.
+     * Absolute is more performant if you have a lot of popovers; fixed is more robust
+     */
+    position: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The input event which causes the popover to show. Accepts 'click' and 'hover'
+     */
+    trigger: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Whether to show component on top of all components by setting the highest z-index
+     */
+    showOnTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Close the popover automatically when the user clicks inside of the popover
+     */
+    closeOnClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Close the popover automatically when the user clicks outside of the popover
+     */
+    closeOnClickOutside: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The text alignment of the popover content should be placed against. Accepts 'center', 'right' and 'left'
+     */
+    textAlign: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Whether to show the arrow
+     **/
+    showArrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClosed?: ((...args: any[]) => any) | undefined;
+}, {
+    placement: "top" | "right" | "bottom" | "left" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+    position: string;
+    trigger: string;
+    showOnTop: boolean;
+    closeOnClick: boolean;
+    closeOnClickOutside: boolean;
+    textAlign: string;
+    showArrow: boolean;
+}>;
+export default __default__;

package/types/components/fw-popover/index.d.ts

@@ -0,0 +1,2 @@
+import FwPopover from './fw-popover.vue';
+export { FwPopover };

package/types/components/fw-popover/index.types.d.ts

@@ -0,0 +1,11 @@
+export interface FwPopoverProps {
+    title: string;
+    placement: 'top' | 'right' | 'bottom' | 'left' | 'auto' | 'auto-start' | 'auto-end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
+    trigger: 'click' | 'hover' | 'focus';
+    position: 'fixed' | 'absolute';
+    closeOnClick?: boolean;
+    closeOnClickOutside?: boolean;
+    showOnTop?: boolean;
+    showArrow?: boolean;
+    textAlign?: 'center' | 'left' | 'right';
+}

package/types/components/index.d.ts

@@ -20,4 +20,5 @@ export * from './fw-sidebar-menu';
 export * from './fw-drawer';
 export * from './fw-provider-list';
 export * from './fw-date-picker';
+export * from './fw-popover';
 export * from './fw-animations';

package/types/components/index.types.d.ts

@@ -17,3 +17,4 @@ export * from '../components/fw-sidebar-menu/index.types';
 export * from '../components/fw-drawer/index.types';
 export * from '../components/fw-provider-list/index.types';
 export * from '../components/fw-date-picker/index.types';
+export * from '../components/fw-popover/index.types';

package/types/icons/index.d.ts

@@ -37,4 +37,5 @@ import XMarkSvg from './xmark.svg';
 import PenSvg from './pen.svg';
 import CalendarSvg from './calendar.svg';
 import CalendarDaySvg from './calendar-day.svg';
-export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg, EyeSvg, EyeCrossedSvg, DownloadSvg, IdCardSvg, InfoCircleSvg, FileExclamationSvg, HourglassClockSvg, EnvelopeSvg, CheckSvg, ChevronUpSvg, ChevronDownSvg, ChevronRightSvg, ChevronLeftSvg, ErrorFilledSvg, LightBulbSvg, LandmarkSvg, CoinsSvg, CaretDownSvg, SortLightSvg, PlusSvg, UserSvg, LoadingSvg, BullseyeSvg, SolidCheckSvg, SolidXMarkSvg, ArrowSortSvg, ArrowDownSvg, SearchSvg, XMarkSvg, PenSvg, CalendarSvg, CalendarDaySvg };
+import EllipsisSvg from './ellipsis.svg';
+export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg, EyeSvg, EyeCrossedSvg, DownloadSvg, IdCardSvg, InfoCircleSvg, FileExclamationSvg, HourglassClockSvg, EnvelopeSvg, CheckSvg, ChevronUpSvg, ChevronDownSvg, ChevronRightSvg, ChevronLeftSvg, ErrorFilledSvg, LightBulbSvg, LandmarkSvg, CoinsSvg, CaretDownSvg, SortLightSvg, PlusSvg, UserSvg, LoadingSvg, BullseyeSvg, SolidCheckSvg, SolidXMarkSvg, ArrowSortSvg, ArrowDownSvg, SearchSvg, XMarkSvg, PenSvg, CalendarSvg, CalendarDaySvg, EllipsisSvg };