@frollo/frollo-web-ui 1.2.6 → 1.2.8

package/icons/index.ts

@@ -24,6 +24,7 @@ import CaretDownSvg from './caret-down.svg';
 import SortLightSvg from './sort-light.svg';
 import PlusSvg from './plus.svg';
 import UserSvg from './user.svg';
+import LoadingSvg from './loading.svg';
 
 export {
   ViewSvg,
@@ -51,5 +52,6 @@ export {
   CaretDownSvg,
   SortLightSvg,
   PlusSvg,
-  UserSvg
+  UserSvg,
+  LoadingSvg
 };

package/icons/loading.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 44 44" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M26.6585 4.61339C17.0561 2.04043 7.186 7.73892 4.61304 17.3413C2.04009 26.9437 7.73858 36.8138 17.341 39.3867L16.3057 43.2504C4.56943 40.1057 -2.39538 28.0423 0.74934 16.306C3.89406 4.56978 15.9575 -2.39504 27.6937 0.749683C39.43 3.8944 46.3948 15.9578 43.2501 27.6941L39.3864 26.6588C41.9593 17.0564 36.2608 7.18634 26.6585 4.61339Z" />
+</svg>
+

package/index.d.ts

@@ -18,7 +18,7 @@ declare interface FwInputProps {
     tabindex?: string;
 }
 
-declare const _default$i: vue.DefineComponent<{
+declare const _default$j: vue.DefineComponent<{
     /**
      * The input v-model
      */
@@ -169,7 +169,7 @@ declare const _default$i: vue.DefineComponent<{
     tabindex: string;
 }>;
 
-declare const _default$h: vue.DefineComponent<{
+declare const _default$i: vue.DefineComponent<{
     /**
      * The name of the input field. Must be unique per form.
      */
@@ -236,7 +236,7 @@ declare interface FwDropdownProps {
     placeholder?: string;
 }
 
-declare const _default$g: vue.DefineComponent<{
+declare const _default$h: vue.DefineComponent<{
     /**
      * The select v-model
      */
@@ -347,7 +347,7 @@ declare const _default$g: vue.DefineComponent<{
     placeholder: string;
 }>;
 
-declare const _default$f: vue.DefineComponent<{
+declare const _default$g: vue.DefineComponent<{
     /**
      * The header title of the card
      */
@@ -452,9 +452,10 @@ declare interface FwButtonProps {
     buttonType?: ButtonTypeAttribute;
     animation?: ButtonAnimation;
     rounded?: boolean;
+    loading?: boolean;
 }
 
-declare const _default$e: vue.DefineComponent<{
+declare const _default$f: vue.DefineComponent<{
     /**
      * A `router-link` path or object
      */
@@ -506,18 +507,41 @@ declare const _default$e: vue.DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Whether the loading animation is shown or not
+     */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     baseClass: vue.Ref<string>;
     textColorClass: vue.ComputedRef<string>;
     bgColorClass: vue.ComputedRef<string>;
     sizeClass: vue.ComputedRef<string>;
     borderClass: vue.ComputedRef<string>;
-    onClick: (this: GlobalEventHandlers, ev: MouseEvent) => any;
-    onMouseover: (this: GlobalEventHandlers, ev: MouseEvent) => any;
-    onMouseout: (this: GlobalEventHandlers, ev: MouseEvent) => any;
-    onFocusin: (this: GlobalEventHandlers, ev: FocusEvent) => any;
-    onFocusout: (this: GlobalEventHandlers, ev: FocusEvent) => any;
+    onClick: (e: MouseEvent | KeyboardEvent) => void;
+    onMouseover: (e: MouseEvent) => void;
+    onMouseout: (e: MouseEvent) => void;
+    onFocusin: (e: FocusEvent) => void;
+    onFocusout: (e: FocusEvent) => void;
     tagName: vue.ComputedRef<"button" | "router-link" | "a">;
+    loadingSize: vue.ComputedRef<{
+        spacing: string;
+        size: string;
+    } | {
+        spacing: string;
+        size: string;
+    } | {
+        spacing: string;
+        size: string;
+    } | {
+        spacing: string;
+        size: string;
+    } | {
+        spacing: string;
+        size: string;
+    }>;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "mouseover" | "mouseout" | "focusin" | "focusout")[], "click" | "mouseover" | "mouseout" | "focusin" | "focusout", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     /**
      * A `router-link` path or object
@@ -570,6 +594,13 @@ declare const _default$e: vue.DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Whether the loading animation is shown or not
+     */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onMouseover?: ((...args: any[]) => any) | undefined;
@@ -582,6 +613,7 @@ declare const _default$e: vue.DefineComponent<{
     buttonType: ButtonTypeAttribute;
     animation: ButtonAnimation;
     rounded: boolean;
+    loading: boolean;
 }>;
 
 declare interface NavMenuItem {
@@ -590,7 +622,7 @@ declare interface NavMenuItem {
     label: string;
 }
 
-declare const _default$d: vue.DefineComponent<{
+declare const _default$e: vue.DefineComponent<{
     /**
      * An array of menu items
      * `{ to?: string | object; href?: string; label: string; }`
@@ -645,7 +677,7 @@ declare const _default$d: vue.DefineComponent<{
     containerClass: string;
 }>;
 
-declare const _default$c: vue.DefineComponent<{
+declare const _default$d: vue.DefineComponent<{
     /**
      * The active tab v-model
      */
@@ -669,7 +701,7 @@ declare const _default$c: vue.DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}>;
 
-declare const _default$b: vue.DefineComponent<{
+declare const _default$c: vue.DefineComponent<{
     /**
      * The label of the tab component used as the button panel label
      */
@@ -701,7 +733,7 @@ declare const _default$b: vue.DefineComponent<{
     };
 }>>, {}>;
 
-declare const _default$a: vue.DefineComponent<{
+declare const _default$b: vue.DefineComponent<{
     /**
      * The header title of the modal
      */
@@ -850,7 +882,7 @@ declare interface ProgressBarStep {
     subSteps: number;
 }
 
-declare const _default$9: vue.DefineComponent<{
+declare const _default$a: vue.DefineComponent<{
     /**
      * An array of menu progress steps.
      * `{ label: string; position: number; subSteps: number; }`
@@ -917,7 +949,7 @@ declare interface FwTagProps {
     variant?: TagVariantName;
 }
 
-declare const _default$8: vue.DefineComponent<{
+declare const _default$9: vue.DefineComponent<{
     /**
      * The size of the tag. Accepts: 'xs' & 'sm'
      */
@@ -977,7 +1009,7 @@ declare interface FwTableProps {
     loading?: boolean;
 }
 
-declare const _default$7: vue.DefineComponent<{
+declare const _default$8: vue.DefineComponent<{
     items: {
         type: PropType<FwTableItem[]>;
         required: true;
@@ -1018,11 +1050,11 @@ declare const _default$7: vue.DefineComponent<{
     loading: boolean;
 }>;
 
-declare const _default$6: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+declare const _default$7: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
 
-declare const _default$5: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+declare const _default$6: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
 
-declare const _default$4: vue.DefineComponent<{
+declare const _default$5: vue.DefineComponent<{
     /**
      * The header title of the accordion
      */
@@ -1070,7 +1102,7 @@ declare const _default$4: vue.DefineComponent<{
     isOpened: boolean;
 }>;
 
-declare const _default$3: vue.DefineComponent<{
+declare const _default$4: vue.DefineComponent<{
     /**
      * The src attribute of the image
      */
@@ -1153,11 +1185,11 @@ declare const _default$3: vue.DefineComponent<{
     threshold: number;
 }>;
 
-declare const _default$2: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+declare const _default$3: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
 
-declare const _default$1: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+declare const _default$2: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
 
-declare const _default: vue.DefineComponent<{
+declare const _default$1: vue.DefineComponent<{
     columns: {
         type: NumberConstructor;
         default: number;
@@ -1230,6 +1262,8 @@ declare const __default__: vue.DefineComponent<{
     animationIteration: string | number;
 }>;
 
+declare const _default: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+
 declare interface FwModalProps {
     header?: string;
     body?: string;
@@ -1286,4 +1320,4 @@ declare interface FwImageProps {
 
 declare module '@frollo/frollo-web-ui/icons' { }
 
-export { ButtonAnimation, ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, _default$4 as FwAccordion, FwAccordionProps, _default$e as FwButton, FwButtonProps, _default$f as FwCard, FwCardProps, _default$h as FwCheckbox, FwCheckboxProps, _default$g as FwDropdown, FwDropdownOption, FwDropdownProps, __default__$1 as FwEmailPulse, _default$3 as FwImage, FwImageProps, _default$i as FwInput, FwInputProps, FwInputType, _default$2 as FwLoadingBar, _default$1 as FwLoadingCard, _default as FwLoadingTable, _default$a as FwModal, FwModalProps, _default$d as FwNavigationMenu, _default$9 as FwProgressBar, __default__ as FwSuccessPulse, _default$b as FwTab, _default$7 as FwTable, FwTableFormatFunction, _default$6 as FwTableHead, FwTableItem, FwTableItemOptions, FwTableProps, _default$5 as FwTableRow, FwTableSort, _default$c as FwTabs, _default$8 as FwTag, FwTagProps, ModalServiceProps, NavMenuItem, ProgressBarStep, TagDefinition, TagDefinitionList, TagSize, TagSizes, TagVariantName, install as default, modalService };
+export { ButtonAnimation, ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, _default$5 as FwAccordion, FwAccordionProps, _default$f as FwButton, FwButtonProps, _default$g as FwCard, FwCardProps, _default$i as FwCheckbox, FwCheckboxProps, _default$h as FwDropdown, FwDropdownOption, FwDropdownProps, __default__$1 as FwEmailPulse, _default$4 as FwImage, FwImageProps, _default$j as FwInput, FwInputProps, FwInputType, _default$3 as FwLoadingBar, _default$2 as FwLoadingCard, _default as FwLoadingSpinner, _default$1 as FwLoadingTable, _default$b as FwModal, FwModalProps, _default$e as FwNavigationMenu, _default$a as FwProgressBar, __default__ as FwSuccessPulse, _default$c as FwTab, _default$8 as FwTable, FwTableFormatFunction, _default$7 as FwTableHead, FwTableItem, FwTableItemOptions, FwTableProps, _default$6 as FwTableRow, FwTableSort, _default$d as FwTabs, _default$9 as FwTag, FwTagProps, ModalServiceProps, NavMenuItem, ProgressBarStep, TagDefinition, TagDefinitionList, TagSize, TagSizes, TagVariantName, install as default, modalService };

package/package.json

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

package/types/components/fw-animations/fw-loading-spinner.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

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

@@ -1,3 +1,4 @@
 import FwEmailPulse from './fw-email-pulse.vue';
 import FwSuccessPulse from './fw-success-pulse.vue';
-export { FwEmailPulse, FwSuccessPulse };
+import FwLoadingSpinner from './fw-loading-spinner.vue';
+export { FwEmailPulse, FwSuccessPulse, FwLoadingSpinner };

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

@@ -52,18 +52,41 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Whether the loading animation is shown or not
+     */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     baseClass: import("vue").Ref<string>;
     textColorClass: import("vue").ComputedRef<string>;
     bgColorClass: import("vue").ComputedRef<string>;
     sizeClass: import("vue").ComputedRef<string>;
     borderClass: import("vue").ComputedRef<string>;
-    onClick: (this: GlobalEventHandlers, ev: MouseEvent) => any;
-    onMouseover: (this: GlobalEventHandlers, ev: MouseEvent) => any;
-    onMouseout: (this: GlobalEventHandlers, ev: MouseEvent) => any;
-    onFocusin: (this: GlobalEventHandlers, ev: FocusEvent) => any;
-    onFocusout: (this: GlobalEventHandlers, ev: FocusEvent) => any;
+    onClick: (e: MouseEvent | KeyboardEvent) => void;
+    onMouseover: (e: MouseEvent) => void;
+    onMouseout: (e: MouseEvent) => void;
+    onFocusin: (e: FocusEvent) => void;
+    onFocusout: (e: FocusEvent) => void;
     tagName: import("vue").ComputedRef<"button" | "router-link" | "a">;
+    loadingSize: import("vue").ComputedRef<{
+        spacing: string;
+        size: string;
+    } | {
+        spacing: string;
+        size: string;
+    } | {
+        spacing: string;
+        size: string;
+    } | {
+        spacing: string;
+        size: string;
+    } | {
+        spacing: string;
+        size: string;
+    }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseover" | "mouseout" | "focusin" | "focusout")[], "click" | "mouseover" | "mouseout" | "focusin" | "focusout", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * A `router-link` path or object
@@ -116,6 +139,13 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Whether the loading animation is shown or not
+     */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onMouseover?: ((...args: any[]) => any) | undefined;
@@ -128,5 +158,6 @@ declare const _default: import("vue").DefineComponent<{
     buttonType: ButtonTypeAttribute;
     animation: ButtonAnimation;
     rounded: boolean;
+    loading: boolean;
 }>;
 export default _default;

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

@@ -21,4 +21,5 @@ export declare interface FwButtonProps {
     buttonType?: ButtonTypeAttribute;
     animation?: ButtonAnimation;
     rounded?: boolean;
+    loading?: boolean;
 }

package/types/icons/index.d.ts

@@ -24,4 +24,5 @@ import CaretDownSvg from './caret-down.svg';
 import SortLightSvg from './sort-light.svg';
 import PlusSvg from './plus.svg';
 import UserSvg from './user.svg';
-export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg, EyeSvg, EyeCrossedSvg, DownloadSvg, IdCardSvg, InfoCircleSvg, FileExclamationSvg, HourglassClockSvg, EnvelopeSvg, CheckSvg, ChevronUpSvg, ChevronDownSvg, ErrorFilledSvg, LightBulbSvg, LandmarkSvg, CoinsSvg, CaretDownSvg, SortLightSvg, PlusSvg, UserSvg };
+import LoadingSvg from './loading.svg';
+export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg, EyeSvg, EyeCrossedSvg, DownloadSvg, IdCardSvg, InfoCircleSvg, FileExclamationSvg, HourglassClockSvg, EnvelopeSvg, CheckSvg, ChevronUpSvg, ChevronDownSvg, ErrorFilledSvg, LightBulbSvg, LandmarkSvg, CoinsSvg, CaretDownSvg, SortLightSvg, PlusSvg, UserSvg, LoadingSvg };