@frollo/frollo-web-ui 5.0.3 → 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

@@ -1248,7 +1248,24 @@ declare interface FwProviderListProps {
     tableHeaderName?: string;
 }
 
-declare const __default__$4: vue.DefineComponent<{
+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'
      */
@@ -1316,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;
@@ -1388,7 +1405,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__$2: vue.DefineComponent<{
+declare const __default__$3: vue.DefineComponent<{
     /**
      * The header title of the accordion
      */
@@ -2123,6 +2140,181 @@ declare const _default$1: vue.DefineComponent<{
     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.
@@ -2195,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$4 as FwBarChart, FwBarChartProps, FwBarGraphData, _default$i as FwButton, FwButtonProps, _default$j as FwCard, FwCardProps, _default$l as FwCheckbox, FwCheckboxProps, _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__$3 as FwTable, FwTableFormatFunction, _default$c as FwTableHead, FwTableItem, FwTableItemOptions, FwTableProps, _default$b as FwTableRow, FwTableSort, _default$g as FwTabs, __default__$4 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__$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.3",
+  "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",

package/types/components/fw-date-picker/fw-date-picker.vue.d.ts

@@ -0,0 +1,177 @@
+import { PropType } from 'vue';
+import 'v-calendar/style.css';
+declare const __default__: import("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: import("vue").Ref<string>;
+    dateModel: import("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, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("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;
+}>;
+export default __default__;

package/types/components/fw-date-picker/index.d.ts

@@ -0,0 +1,2 @@
+import FwDatePicker from './fw-date-picker.vue';
+export { FwDatePicker };

package/types/components/fw-date-picker/index.types.d.ts

@@ -0,0 +1,16 @@
+export 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;
+}

package/types/components/index.d.ts

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

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

@@ -16,3 +16,4 @@ export * from '../components/fw-bar-chart/index.types';
 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';

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

@@ -5,5 +5,13 @@ export declare const useColours: () => {
     fontFamily: string;
     colorBody: string;
     primaryFade5: string;
+    primaryFade10: string;
+    primaryFade20: string;
+    primaryFade30: string;
     primaryFade40: string;
+    primaryFade50: string;
+    primaryFade60: string;
+    primaryFade70: string;
+    primaryFade80: string;
+    primaryFade90: string;
 };

package/types/icons/index.d.ts

@@ -35,4 +35,6 @@ import ArrowDownSvg from './arrow-down.svg';
 import SearchSvg from './search.svg';
 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 };
+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 };