@frollo/frollo-web-ui 4.0.0 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "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

@@ -63,12 +63,28 @@ declare const _default: import("vue").DefineComponent<{
     };
     /**
      * The logical tab order of the input.
-     * Defaults to 1
+     * Defaults to 0
      */
     tabindex: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Whether the input is rounded.
+     * Defaults to false
+     */
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Enable the error section UI.
+     * Defaults to true
+     */
+    enableErrors: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     uuid: string;
     inputBaseClass: import("vue").Ref<string>;
@@ -136,12 +152,28 @@ declare const _default: import("vue").DefineComponent<{
     };
     /**
      * The logical tab order of the input.
-     * Defaults to 1
+     * Defaults to 0
      */
     tabindex: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Whether the input is rounded.
+     * Defaults to false
+     */
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Enable the error section UI.
+     * Defaults to true
+     */
+    enableErrors: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -150,5 +182,7 @@ declare const _default: import("vue").DefineComponent<{
     placeholder: string;
     readonly: boolean;
     tabindex: string;
+    rounded: boolean;
+    enableErrors: boolean;
 }>;
 export default _default;

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

@@ -10,4 +10,6 @@ export declare interface FwInputProps {
     hint?: string;
     autocomplete?: string;
     tabindex?: string;
+    rounded?: boolean;
+    enableErrors?: boolean;
 }

package/types/components/fw-sidebar-menu/fw-sidebar-menu.vue.d.ts

@@ -1,12 +1,12 @@
 import { PropType } from 'vue';
-import { SidebarMenuItem } from './index.types';
+import { FwSidebarMenuItem } from './index.types';
 declare const _default: import("vue").DefineComponent<{
     /**
      * An array of menu items
      * `{ to?: string | object; href?: string; label: string; }`
      */
     menuItems: {
-        type: PropType<SidebarMenuItem[]>;
+        type: PropType<FwSidebarMenuItem[]>;
     };
     /**
      * The class for the open/close toggle button
@@ -30,6 +30,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
+    baseClass: string;
     isMenuOpen: import("vue").Ref<boolean>;
     toggleMenu: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "toggled"[], "toggled", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -38,7 +39,7 @@ declare const _default: import("vue").DefineComponent<{
      * `{ to?: string | object; href?: string; label: string; }`
      */
     menuItems: {
-        type: PropType<SidebarMenuItem[]>;
+        type: PropType<FwSidebarMenuItem[]>;
     };
     /**
      * The class for the open/close toggle button

package/types/components/fw-sidebar-menu/index.types.d.ts

@@ -1,6 +1,7 @@
-export declare interface SidebarMenuItem {
+export declare interface FwSidebarMenuItem {
     to?: string | object;
     href?: string;
     label: string;
     external?: boolean;
+    disabled?: boolean;
 }

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

@@ -13,10 +13,17 @@ declare const __default__: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Enable click events on rows.
+     * Emits row data when clicked
+     */
     clickableRows: {
         type: BooleanConstructor;
         default: boolean;
     };
+    autoSortColumn: {
+        type: NumberConstructor;
+    };
 }, {
     columns: import("vue").ComputedRef<string[]>;
     sortBy: import("vue").Ref<string>;
@@ -43,10 +50,17 @@ declare const __default__: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Enable click events on rows.
+     * Emits row data when clicked
+     */
     clickableRows: {
         type: BooleanConstructor;
         default: boolean;
     };
+    autoSortColumn: {
+        type: NumberConstructor;
+    };
 }>> & {
     onRowClicked?: ((...args: any[]) => any) | undefined;
 }, {

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

@@ -1,14 +1,16 @@
 export declare type FwTableItem = Record<string, string | number>;
 export declare type FwTableFormatFunction = (value: string | number | object) => string;
+export declare type FwTableSort = 'asc' | 'desc';
 export declare type FwTableItemOptions = Record<string, {
     formatter?: FwTableFormatFunction;
     isSortable?: boolean;
     disabled?: boolean;
+    initSortOrder?: FwTableSort;
 }>;
-export declare type FwTableSort = 'asc' | 'desc';
 export declare interface FwTableProps {
     items: FwTableItem[];
     options?: FwTableItemOptions;
     loading?: boolean;
     clickableRows?: boolean;
+    autoSortColumn?: 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

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