@frollo/frollo-web-ui 4.0.1 → 5.0.1

package/package.json

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

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

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{
+declare const __default__: import("vue").DefineComponent<{
     /**
      * The header title of the accordion
      */
@@ -18,10 +18,20 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Whether the accordion open icon should be at the start or end
+     */
+    iconPositionStart: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     isOpen: import("vue").Ref<boolean>;
-    transitionEnter: (el: HTMLElement) => void;
-    transitionLeave: (el: HTMLElement) => void;
+    beforeEnter: (el: Element) => void;
+    enter: (el: Element) => void;
+    beforeLeave: (el: Element) => void;
+    leave: (el: Element) => void;
+    bgHoverColor: string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The header title of the accordion
@@ -42,7 +52,15 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Whether the accordion open icon should be at the start or end
+     */
+    iconPositionStart: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     isOpened: boolean;
+    iconPositionStart: boolean;
 }>;
-export default _default;
+export default __default__;

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

@@ -2,4 +2,5 @@ export declare interface FwAccordionProps {
     title?: string;
     suffixTitle?: string;
     isOpened?: boolean;
+    iconPositionStart?: boolean;
 }

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

@@ -1,12 +1,20 @@
 import { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     /**
-     * The name of the input field. Must be unique per form.
+     * The name of the checkbox input field.
+     * Multiple checkboxes can use the same name with a unique value.
      */
     name: {
         type: StringConstructor;
         required: true;
     };
+    /**
+     * The value of the input field. Must be unique per name.
+     */
+    value: {
+        type: StringConstructor;
+        required: false;
+    };
     /**
      * Label for the input. Also renders to an aria-label attribute
      */
@@ -25,16 +33,31 @@ declare const _default: import("vue").DefineComponent<{
     hint: {
         type: StringConstructor;
     };
+    /**
+     * Enable or disable the error hidden element
+     */
+    enableErrors: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     uuid: string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
-     * The name of the input field. Must be unique per form.
+     * The name of the checkbox input field.
+     * Multiple checkboxes can use the same name with a unique value.
      */
     name: {
         type: StringConstructor;
         required: true;
     };
+    /**
+     * The value of the input field. Must be unique per name.
+     */
+    value: {
+        type: StringConstructor;
+        required: false;
+    };
     /**
      * Label for the input. Also renders to an aria-label attribute
      */
@@ -53,5 +76,14 @@ declare const _default: import("vue").DefineComponent<{
     hint: {
         type: StringConstructor;
     };
-}>>, {}>;
+    /**
+     * Enable or disable the error hidden element
+     */
+    enableErrors: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    enableErrors: boolean;
+}>;
 export default _default;

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

@@ -1,6 +1,8 @@
 export declare interface FwCheckboxProps {
     name: string;
+    value?: string;
     label?: string;
     rules?: string | Record<string, unknown> | (() => boolean);
     hint?: string;
+    enableErrors?: boolean;
 }

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

@@ -0,0 +1,165 @@
+import { PropType } from 'vue';
+import { ButtonVariantName } from '../fw-button/index.types';
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The drawer's v-model. Controls the visibility of the drawer.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+    };
+    /**
+     * The header title of the drawer
+     */
+    header: {
+        type: StringConstructor;
+    };
+    /**
+     * The body description of the drawer
+     */
+    body: {
+        type: StringConstructor;
+    };
+    /**
+     * The aria role of the drawer container. Defaults to `dialog`
+     */
+    role: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Whether to show the cancel button
+     */
+    showCancel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether to show the confirm button
+     */
+    showConfirm: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Custom text for the cancel button
+     */
+    cancelButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Button variant for the cancel button
+     */
+    cancelButtonType: {
+        type: PropType<ButtonVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Custom text for the confirm button
+     */
+    confirmButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Button variant for the confirm button
+     */
+    confirmButtonType: {
+        type: PropType<ButtonVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}, {
+    baseDrawerClass: string;
+    drawerFooterClass: string;
+    isOpen: import("vue").WritableComputedRef<boolean>;
+    uuid: string;
+    isMounted: import("vue").Ref<boolean>;
+    onConfirmed: () => void;
+    onCancelled: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "cancel" | "confirm")[], "update:modelValue" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The drawer's v-model. Controls the visibility of the drawer.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+    };
+    /**
+     * The header title of the drawer
+     */
+    header: {
+        type: StringConstructor;
+    };
+    /**
+     * The body description of the drawer
+     */
+    body: {
+        type: StringConstructor;
+    };
+    /**
+     * The aria role of the drawer container. Defaults to `dialog`
+     */
+    role: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Whether to show the cancel button
+     */
+    showCancel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether to show the confirm button
+     */
+    showConfirm: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Custom text for the cancel button
+     */
+    cancelButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Button variant for the cancel button
+     */
+    cancelButtonType: {
+        type: PropType<ButtonVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Custom text for the confirm button
+     */
+    confirmButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Button variant for the confirm button
+     */
+    confirmButtonType: {
+        type: PropType<ButtonVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>> & {
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: boolean;
+    role: string;
+    showCancel: boolean;
+    showConfirm: boolean;
+    cancelButtonText: string;
+    cancelButtonType: ButtonVariantName;
+    confirmButtonText: string;
+    confirmButtonType: ButtonVariantName;
+}>;
+export default _default;

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

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

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

@@ -0,0 +1,14 @@
+import { ButtonVariantName } from '../fw-button/index.types';
+export declare interface FwDrawerProps {
+    modelValue: boolean;
+    header?: string;
+    element?: string;
+    body?: string;
+    role?: string;
+    showCancel?: boolean;
+    showConfirm?: boolean;
+    cancelButtonText?: string;
+    cancelButtonType?: ButtonVariantName;
+    confirmButtonText?: string;
+    confirmButtonType?: ButtonVariantName;
+}

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

@@ -34,7 +34,6 @@ declare const _default: import("vue").DefineComponent<{
      */
     placeholder: {
         type: StringConstructor;
-        default: string;
     };
     /**
      * Validation rules. Accepts an object, string schema or validation function.
@@ -63,7 +62,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     /**
      * The logical tab order of the input.
-     * Defaults to 1
+     * Defaults to 0
      */
     tabindex: {
         type: StringConstructor;
@@ -85,6 +84,12 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The inputs `maxlength` attribute.
+     */
+    maxLength: {
+        type: NumberConstructor;
+    };
 }, {
     uuid: string;
     inputBaseClass: import("vue").Ref<string>;
@@ -123,7 +128,6 @@ declare const _default: import("vue").DefineComponent<{
      */
     placeholder: {
         type: StringConstructor;
-        default: string;
     };
     /**
      * Validation rules. Accepts an object, string schema or validation function.
@@ -152,7 +156,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     /**
      * The logical tab order of the input.
-     * Defaults to 1
+     * Defaults to 0
      */
     tabindex: {
         type: StringConstructor;
@@ -174,12 +178,17 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The inputs `maxlength` attribute.
+     */
+    maxLength: {
+        type: NumberConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string;
     type: FwInputType;
-    placeholder: string;
     readonly: boolean;
     tabindex: string;
     rounded: boolean;

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

@@ -12,4 +12,5 @@ export declare interface FwInputProps {
     tabindex?: string;
     rounded?: boolean;
     enableErrors?: boolean;
+    maxLength?: number;
 }

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

@@ -1,8 +1,8 @@
 import { PropType } from 'vue';
 import { TagSize, TagVariantName } from './index.types';
-declare const _default: import("vue").DefineComponent<{
+declare const __default__: import("vue").DefineComponent<{
     /**
-     * The size of the tag. Accepts: 'xs' & 'sm'
+     * The size of the tag. Accepts: 'xs', 'sm' & 'md'
      */
     size: {
         type: PropType<TagSize>;
@@ -11,21 +11,32 @@ declare const _default: import("vue").DefineComponent<{
     };
     /**
      * The colour variant of the tag.
-     * Accepts 'primary', 'alert', 'error', 'success'
+     * Accepts 'primary', 'secondary', 'alert', 'error', 'success'
      */
     variant: {
         type: PropType<TagVariantName>;
         default: string;
         validator: (value: string) => boolean;
     };
+    /**
+     * Whether the tag can be dismissed or closed.
+     * Emits the @dismissed event
+     */
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     baseClass: import("vue").Ref<string>;
     textColorClass: import("vue").ComputedRef<string>;
     bgColorClass: import("vue").ComputedRef<string>;
     sizeClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    iconSizeClass: import("vue").ComputedRef<string>;
+    iconButtonType: import("vue").ComputedRef<import("../index.types").ButtonVariantName | undefined>;
+    primaryFade5: string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "dismissed"[], "dismissed", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
-     * The size of the tag. Accepts: 'xs' & 'sm'
+     * The size of the tag. Accepts: 'xs', 'sm' & 'md'
      */
     size: {
         type: PropType<TagSize>;
@@ -34,15 +45,26 @@ declare const _default: import("vue").DefineComponent<{
     };
     /**
      * The colour variant of the tag.
-     * Accepts 'primary', 'alert', 'error', 'success'
+     * Accepts 'primary', 'secondary', 'alert', 'error', 'success'
      */
     variant: {
         type: PropType<TagVariantName>;
         default: string;
         validator: (value: string) => boolean;
     };
-}>>, {
+    /**
+     * Whether the tag can be dismissed or closed.
+     * Emits the @dismissed event
+     */
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onDismissed?: ((...args: any[]) => any) | undefined;
+}, {
     size: TagSize;
     variant: TagVariantName;
+    dismissable: boolean;
 }>;
-export default _default;
+export default __default__;

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

@@ -1,12 +1,14 @@
-export declare type TagVariantName = 'primary' | 'alert' | 'error' | 'success';
+import { FwButtonProps } from '../fw-button/index.types';
+export declare type TagVariantName = 'primary' | 'secondary' | 'alert' | 'error' | 'success';
 export declare interface TagDefinition {
     text: string;
     background: string;
+    iconType: FwButtonProps['variant'];
 }
 export declare type TagDefinitionList = {
     [key in TagVariantName]: TagDefinition;
 };
-export declare type TagSize = 'xs' | 'sm';
+export declare type TagSize = 'xs' | 'sm' | 'md';
 export declare type TagSizes = {
     [key in TagSize]: string;
 };

package/types/components/index.d.ts

@@ -17,4 +17,5 @@ export * from './fw-toast';
 export * from './fw-transactions-card';
 export * from './fw-bar-chart';
 export * from './fw-sidebar-menu';
+export * from './fw-drawer';
 export * from './fw-animations';

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

@@ -14,3 +14,4 @@ export * from '../components/fw-toast/index.types';
 export * from '../components/fw-transactions-card/index.types';
 export * from '../components/fw-bar-chart/index.types';
 export * from '../components/fw-sidebar-menu/index.types';
+export * from '../components/fw-drawer/index.types';

package/types/helpers/get-root-colours.d.ts

@@ -0,0 +1,9 @@
+export declare const useColours: () => {
+    colorPrimary: string;
+    colorSecondary: string;
+    colorTertiary: string;
+    fontFamily: string;
+    colorBody: string;
+    primaryFade5: string;
+    primaryFade40: string;
+};

package/types/icons/index.d.ts

@@ -33,4 +33,6 @@ import SolidXMarkSvg from './solid-xmark.svg';
 import ArrowSortSvg from './arrow-sort.svg';
 import ArrowDownSvg from './arrow-down.svg';
 import SearchSvg from './search.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 };
+import XMarkSvg from './xmark.svg';
+import PenSvg from './pen.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 };