@frollo/frollo-web-ui 5.0.2 → 5.0.4

package/icons/calendar-day.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 25 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 12.375C5 11.3391 5.83953 10.5 6.875 10.5H10.625C11.6609 10.5 12.5 11.3391 12.5 12.375V16.125C12.5 17.1609 11.6609 18 10.625 18H6.875C5.83953 18 5 17.1609 5 16.125V12.375ZM6.5 12.375V16.125C6.5 16.3312 6.66781 16.5 6.875 16.5H10.625C10.8313 16.5 11 16.3312 11 16.125V12.375C11 12.1687 10.8313 12 10.625 12H6.875C6.66781 12 6.5 12.1687 6.5 12.375ZM8 3H17V0.75C17 0.335812 17.3375 0 17.75 0C18.1625 0 18.5 0.335812 18.5 0.75V3H20C21.6547 3 23 4.34297 23 6V21C23 22.6547 21.6547 24 20 24H5C3.34297 24 2 22.6547 2 21V6C2 4.34297 3.34297 3 5 3H6.5V0.75C6.5 0.335812 6.8375 0 7.25 0C7.6625 0 8 0.335812 8 0.75V3ZM3.5 21C3.5 21.8297 4.17172 22.5 5 22.5H20C20.8297 22.5 21.5 21.8297 21.5 21V9H3.5V21ZM3.5 6V7.5H21.5V6C21.5 5.17031 20.8297 4.5 20 4.5H5C4.17172 4.5 3.5 5.17031 3.5 6Z" />
+</svg>

package/icons/calendar.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.75 3C10.1625 3 10.5 3.33581 10.5 3.75V6H19.5V3.75C19.5 3.33581 19.8375 3 20.25 3C20.6625 3 21 3.33581 21 3.75V6H22.5C24.1547 6 25.5 7.34297 25.5 9V24C25.5 25.6547 24.1547 27 22.5 27H7.5C5.84297 27 4.5 25.6547 4.5 24V9C4.5 7.34297 5.84297 6 7.5 6H9V3.75C9 3.33581 9.3375 3 9.75 3ZM24 12H19.125V15.375H24V12ZM24 16.875H19.125V20.625H24V16.875ZM24 22.125H19.125V25.5H22.5C23.3297 25.5 24 24.8297 24 24V22.125ZM17.625 20.625V16.875H12.375V20.625H17.625ZM12.375 25.5H17.625V22.125H12.375V25.5ZM10.875 20.625V16.875H6V20.625H10.875ZM6 22.125V24C6 24.8297 6.67172 25.5 7.5 25.5H10.875V22.125H6ZM6 15.375H10.875V12H6V15.375ZM12.375 15.375H17.625V12H12.375V15.375ZM22.5 7.5H7.5C6.67172 7.5 6 8.17031 6 9V10.5H24V9C24 8.17031 23.3297 7.5 22.5 7.5Z" />
+</svg>

package/icons/index.ts

@@ -35,6 +35,8 @@ import ArrowDownSvg from './arrow-down.svg';
 import SearchSvg from './search.svg';
 import XMarkSvg from './xmark.svg';
 import PenSvg from './pen.svg';
+import CalendarSvg from './calendar.svg';
+import CalendarDaySvg from './calendar-day.svg';
 
 export {
   ViewSvg,
@@ -73,5 +75,7 @@ export {
   ArrowDownSvg,
   SearchSvg,
   XMarkSvg,
-  PenSvg
+  PenSvg,
+  CalendarSvg,
+  CalendarDaySvg
 };

package/index.d.ts

@@ -23,7 +23,7 @@ declare interface FwInputProps {
     maxLength?: number;
 }
 
-declare const _default$l: vue.DefineComponent<{
+declare const _default$m: vue.DefineComponent<{
     /**
      * The input v-model
      */
@@ -218,7 +218,7 @@ declare const _default$l: vue.DefineComponent<{
     enableErrors: boolean;
 }>;
 
-declare const _default$k: vue.DefineComponent<{
+declare const _default$l: vue.DefineComponent<{
     /**
      * The name of the checkbox input field.
      * Multiple checkboxes can use the same name with a unique value.
@@ -336,9 +336,10 @@ declare interface FwDropdownProps {
     options: FwDropdownOption[];
     hint?: string;
     placeholder?: string;
+    enableErrors?: boolean;
 }
 
-declare const _default$j: vue.DefineComponent<{
+declare const _default$k: vue.DefineComponent<{
     /**
      * The select v-model
      */
@@ -385,6 +386,14 @@ declare const _default$j: vue.DefineComponent<{
         required: false;
         default: string;
     };
+    /**
+     * Enable the error section UI.
+     * Defaults to true
+     */
+    enableErrors: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     menuButtonClass: string;
     menuClass: string;
@@ -445,11 +454,20 @@ declare const _default$j: vue.DefineComponent<{
         required: false;
         default: string;
     };
+    /**
+     * Enable the error section UI.
+     * Defaults to true
+     */
+    enableErrors: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     placeholder: string;
+    enableErrors: boolean;
 }>;
 
-declare const _default$i: vue.DefineComponent<{
+declare const _default$j: vue.DefineComponent<{
     /**
      * The header title of the card
      */
@@ -558,7 +576,7 @@ declare interface FwButtonProps {
     external?: boolean;
 }
 
-declare const _default$h: vue.DefineComponent<{
+declare const _default$i: vue.DefineComponent<{
     /**
      * A `router-link` path or object
      */
@@ -739,7 +757,7 @@ declare interface NavMenuItem {
     external?: boolean;
 }
 
-declare const _default$g: vue.DefineComponent<{
+declare const _default$h: vue.DefineComponent<{
     /**
      * An array of menu items
      * `{ to?: string | object; href?: string; label: string; }`
@@ -794,7 +812,7 @@ declare const _default$g: vue.DefineComponent<{
     containerClass: string;
 }>;
 
-declare const _default$f: vue.DefineComponent<{
+declare const _default$g: vue.DefineComponent<{
     /**
      * The active tab v-model
      */
@@ -818,7 +836,7 @@ declare const _default$f: vue.DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}>;
 
-declare const _default$e: vue.DefineComponent<{
+declare const _default$f: vue.DefineComponent<{
     /**
      * The label of the tab component used as the button panel label
      */
@@ -850,7 +868,7 @@ declare const _default$e: vue.DefineComponent<{
     };
 }>>, {}>;
 
-declare const _default$d: vue.DefineComponent<{
+declare const _default$e: vue.DefineComponent<{
     /**
      * The modal's v-model. Controls the visibility of the modal.
      */
@@ -1029,7 +1047,7 @@ declare interface ProgressBarStep {
     subSteps: number;
 }
 
-declare const _default$c: vue.DefineComponent<{
+declare const _default$d: vue.DefineComponent<{
     /**
      * An array of menu progress steps.
      * `{ label: string; position: number; subSteps: number; }`
@@ -1218,7 +1236,36 @@ declare interface FwDrawerProps {
     confirmButtonType?: ButtonVariantName;
 }
 
-declare const __default__$4: vue.DefineComponent<{
+interface FwProviderListItem {
+    status: 'supported' | 'outage';
+    name: string;
+    image_url: string;
+}
+declare interface FwProviderListProps {
+    heading: string;
+    items: FwProviderListItem[];
+    searchPlaceholder?: string;
+    tableHeaderName?: string;
+}
+
+declare interface FwDatePickerProps {
+    modelValue: string | {
+        start: string;
+        end: string;
+    } | Date;
+    name: string;
+    label?: string;
+    placeholder?: string;
+    isRange?: boolean;
+    startLabel?: string;
+    endLabel?: string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    tabindex?: string;
+    rounded?: boolean;
+}
+
+declare const __default__$5: vue.DefineComponent<{
     /**
      * The size of the tag. Accepts: 'xs', 'sm' & 'md'
      */
@@ -1286,7 +1333,7 @@ declare const __default__$4: vue.DefineComponent<{
     dismissable: boolean;
 }>;
 
-declare const __default__$3: vue.DefineComponent<{
+declare const __default__$4: vue.DefineComponent<{
     items: {
         type: PropType<FwTableItem[]>;
         required: true;
@@ -1354,11 +1401,11 @@ declare const __default__$3: vue.DefineComponent<{
     clickableRows: boolean;
 }>;
 
-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$c: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
 
-declare const _default$a: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+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__$2: vue.DefineComponent<{
+declare const __default__$3: vue.DefineComponent<{
     /**
      * The header title of the accordion
      */
@@ -1424,7 +1471,7 @@ declare const __default__$2: vue.DefineComponent<{
     iconPositionStart: boolean;
 }>;
 
-declare const _default$9: vue.DefineComponent<{
+declare const _default$a: vue.DefineComponent<{
     /**
      * The src attribute of the image
      */
@@ -1507,11 +1554,11 @@ declare const _default$9: vue.DefineComponent<{
     threshold: number;
 }>;
 
-declare const _default$8: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+declare const _default$9: 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$8: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
 
-declare const _default$6: vue.DefineComponent<{
+declare const _default$7: vue.DefineComponent<{
     columns: {
         type: NumberConstructor;
         default: number;
@@ -1536,7 +1583,7 @@ declare const _default$6: vue.DefineComponent<{
     rows: number;
 }>;
 
-declare const _default$5: vue.DefineComponent<{
+declare const _default$6: vue.DefineComponent<{
     /**
      * The toast's v-model. Controls the visibility of the toast.
      */
@@ -1655,7 +1702,7 @@ declare const _default$5: vue.DefineComponent<{
     timeout: number;
 }>;
 
-declare const _default$4: vue.DefineComponent<{
+declare const _default$5: vue.DefineComponent<{
     /**
      * The transaction title of the card
      */
@@ -1713,7 +1760,7 @@ declare const _default$4: vue.DefineComponent<{
     };
 }>>, {}>;
 
-declare const _default$3: vue.DefineComponent<{
+declare const _default$4: vue.DefineComponent<{
     /**
      * The transaction title of the chart
      */
@@ -1794,7 +1841,7 @@ declare const _default$3: vue.DefineComponent<{
     };
 }>>, {}>;
 
-declare const _default$2: vue.DefineComponent<{
+declare const _default$3: vue.DefineComponent<{
     /**
      * An array of menu items
      * `{ to?: string | object; href?: string; label: string; }`
@@ -1864,7 +1911,7 @@ declare const _default$2: vue.DefineComponent<{
     closedWidth: string;
 }>;
 
-declare const _default$1: vue.DefineComponent<{
+declare const _default$2: vue.DefineComponent<{
     /**
      * The drawer's v-model. Controls the visibility of the drawer.
      */
@@ -2027,6 +2074,247 @@ declare const _default$1: vue.DefineComponent<{
     confirmButtonType: ButtonVariantName;
 }>;
 
+declare const _default$1: vue.DefineComponent<{
+    /**
+     * The header heading of the list.
+     */
+    heading: {
+        type: StringConstructor;
+    };
+    /**
+     * The list items of the table items.
+     */
+    items: {
+        type: PropType<FwProviderListItem[]>;
+        required: true;
+    };
+    /**
+     * The placeholder text for the sarch input.
+     */
+    searchPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The table header title.
+     */
+    tableHeaderName: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    options: FwTableItemOptions;
+    sortedTableItems: vue.ComputedRef<FwTableItem[]>;
+    searchFilterModel: vue.Ref<string>;
+    statusFilterModel: vue.Ref<string>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The header heading of the list.
+     */
+    heading: {
+        type: StringConstructor;
+    };
+    /**
+     * The list items of the table items.
+     */
+    items: {
+        type: PropType<FwProviderListItem[]>;
+        required: true;
+    };
+    /**
+     * The placeholder text for the sarch input.
+     */
+    searchPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The table header title.
+     */
+    tableHeaderName: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    searchPlaceholder: string;
+    tableHeaderName: string;
+}>;
+
+declare const __default__$2: vue.DefineComponent<{
+    /**
+     * The date-picker v-model
+     */
+    modelValue: {
+        type: PropType<string | Date | {
+            start: string;
+            end: string;
+        }>;
+    };
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+        type: StringConstructor;
+    };
+    /**
+     * The placeholder text of the input
+     */
+    placeholder: {
+        type: StringConstructor;
+    };
+    /**
+     * The placeholder text of the starting range input
+     */
+    startPlaceholder: {
+        type: StringConstructor;
+    };
+    /**
+     * The placeholder text of the ending range input
+     */
+    endPlaceholder: {
+        type: StringConstructor;
+    };
+    /**
+     * Whether to enable the date range inputs
+     */
+    isRange: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Start input label when is-range
+     */
+    startLabel: {
+        type: StringConstructor;
+    };
+    /**
+     * End input label when is-range
+     */
+    endLabel: {
+        type: StringConstructor;
+    };
+    /**
+     * The logical tab order of the input.
+     * Defaults to 0
+     */
+    tabindex: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Whether the input is rounded.
+     * Defaults to false
+     */
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    uuid: string;
+    inputBaseClass: vue.Ref<string>;
+    dateModel: vue.WritableComputedRef<string | Date | {
+        start: string;
+        end: string;
+    } | undefined>;
+    primaryFade5: string;
+    primaryFade10: string;
+    primaryFade20: string;
+    primaryFade30: string;
+    primaryFade40: string;
+    primaryFade50: string;
+    primaryFade70: string;
+    primaryFade80: string;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The date-picker v-model
+     */
+    modelValue: {
+        type: PropType<string | Date | {
+            start: string;
+            end: string;
+        }>;
+    };
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+        type: StringConstructor;
+    };
+    /**
+     * The placeholder text of the input
+     */
+    placeholder: {
+        type: StringConstructor;
+    };
+    /**
+     * The placeholder text of the starting range input
+     */
+    startPlaceholder: {
+        type: StringConstructor;
+    };
+    /**
+     * The placeholder text of the ending range input
+     */
+    endPlaceholder: {
+        type: StringConstructor;
+    };
+    /**
+     * Whether to enable the date range inputs
+     */
+    isRange: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Start input label when is-range
+     */
+    startLabel: {
+        type: StringConstructor;
+    };
+    /**
+     * End input label when is-range
+     */
+    endLabel: {
+        type: StringConstructor;
+    };
+    /**
+     * The logical tab order of the input.
+     * Defaults to 0
+     */
+    tabindex: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Whether the input is rounded.
+     * Defaults to false
+     */
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    isRange: boolean;
+    tabindex: string;
+    rounded: boolean;
+}>;
+
 declare const __default__$1: vue.DefineComponent<{
     /**
      * The animation-iteration-count CSS property of the pulse animation.
@@ -2099,4 +2387,4 @@ declare const install: Exclude<Plugin['install'], undefined>;
 
 declare module '@frollo/frollo-web-ui/icons' { }
 
-export { ButtonAnimation, ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, __default__$2 as FwAccordion, FwAccordionProps, _default$3 as FwBarChart, FwBarChartProps, FwBarGraphData, _default$h as FwButton, FwButtonProps, _default$i as FwCard, FwCardProps, _default$k as FwCheckbox, FwCheckboxProps, _default$1 as FwDrawer, FwDrawerProps, _default$j as FwDropdown, FwDropdownOption, FwDropdownProps, __default__$1 as FwEmailPulse, _default$9 as FwImage, FwImageProps, _default$l as FwInput, FwInputProps, FwInputType, _default$8 as FwLoadingBar, _default$7 as FwLoadingCard, _default as FwLoadingSpinner, _default$6 as FwLoadingTable, _default$d as FwModal, FwModalProps, _default$g as FwNavigationMenu, _default$c as FwProgressBar, _default$2 as FwSidebarMenu, FwSidebarMenuItem, __default__ as FwSuccessPulse, _default$e as FwTab, __default__$3 as FwTable, FwTableFormatFunction, _default$b as FwTableHead, FwTableItem, FwTableItemOptions, FwTableProps, _default$a as FwTableRow, FwTableSort, _default$f as FwTabs, __default__$4 as FwTag, FwTagProps, _default$5 as FwToast, FwToastProps, _default$4 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__$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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",
@@ -35,6 +35,7 @@
     "@babel/core": "^7.17.5",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@geometricpanda/storybook-addon-iframe": "^0.2.1",
+    "@popperjs/core": "^2.11.8",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
@@ -84,6 +85,7 @@
     "tailwindcss": "^3.0.23",
     "ts-jest": "^28.0.5",
     "typescript": "^4.7.4",
+    "v-calendar": "^3.1.2",
     "vee-validate": "^4.5.9",
     "vue-chartjs": "^5.2.0",
     "vue-loader": "^16.8.3",