@frollo/frollo-web-ui 9.0.5 → 9.0.7

package/icons/circle-plus.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.25 38.5V29.75H17.5C16.5375 29.75 15.75 28.9625 15.75 28C15.75 27.0375 16.5375 26.25 17.5 26.25H26.25V17.5C26.25 16.5375 27.0375 15.75 28 15.75C28.9625 15.75 29.75 16.5375 29.75 17.5V26.25H38.5C39.4625 26.25 40.25 27.0375 40.25 28C40.25 28.9625 39.4625 29.75 38.5 29.75H29.75V38.5C29.75 39.4625 28.9625 40.25 28 40.25C27.0375 40.25 26.25 39.4625 26.25 38.5ZM56 28C56 43.4656 43.4656 56 28 56C12.5344 56 0 43.4656 0 28C0 12.5344 12.5344 0 28 0C43.4656 0 56 12.5344 56 28ZM28 3.5C14.4703 3.5 3.5 14.4703 3.5 28C3.5 41.5297 14.4703 52.5 28 52.5C41.5297 52.5 52.5 41.5297 52.5 28C52.5 14.4703 41.5297 3.5 28 3.5Z" fill="currentColor"/>
+</svg>

package/icons/index.ts

@@ -63,6 +63,7 @@ import UserPlusSvg from './user-plus.svg';
 import ManualAccountSvg from './manual-account.svg';
 import DefaultProviderSvg from './default-provider.svg';
 import PendingSvg from './pending.svg';
+import CirclePlusSvg from './circle-plus.svg';
 
 export {
   ViewSvg,
@@ -129,5 +130,6 @@ export {
   UserPlusSvg,
   ManualAccountSvg,
   DefaultProviderSvg,
-  PendingSvg
+  PendingSvg,
+  CirclePlusSvg
 };

package/index.d.ts

@@ -12,6 +12,9 @@ type FwInputType = 'text' | 'password' | 'email' | 'tel' | 'time' | 'url' | 'wee
 declare interface FwInputProps {
     value: string;
     name: string;
+    disableNamePrefix?: boolean;
+    inputId?: string;
+    inputClass?: string;
     type?: FwInputType;
     label?: string;
     placeholder?: string;
@@ -24,6 +27,7 @@ declare interface FwInputProps {
     enableErrors?: boolean;
     maxLength?: number;
     required?: boolean;
+    invalidate?: boolean;
 }
 
 declare const __default__$c: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -42,7 +46,28 @@ declare const __default__$c: vue.DefineComponent<vue.ExtractPropTypes<{
         required: true;
     };
     /**
-     * The input type. Accepts `text` | `password`
+     * Whether to disable the name prefix for the input field.
+     */
+    disableNamePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The custom id of the input field. Will auto-generate one if not provided.
+     */
+    inputId: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The custom class for the input field.
+     */
+    inputClass: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The input type. Accepts `text` | `password` | `email` | `tel` | `time` | `url` | `week` | `month`
      */
     type: {
         type: PropType<FwInputType>;
@@ -124,6 +149,14 @@ declare const __default__$c: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Force triggers the error UI.
+     * Use the field validation rule to validate/invalidate input.
+     */
+    invalidate: {
+        type: BooleanConstructor;
+        required: false;
+    };
 }>, {
     inputBaseClass: vue.Ref<string, string>;
     inputValue: vue.WritableComputedRef<string, string>;
@@ -147,7 +180,28 @@ declare const __default__$c: vue.DefineComponent<vue.ExtractPropTypes<{
         required: true;
     };
     /**
-     * The input type. Accepts `text` | `password`
+     * Whether to disable the name prefix for the input field.
+     */
+    disableNamePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The custom id of the input field. Will auto-generate one if not provided.
+     */
+    inputId: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The custom class for the input field.
+     */
+    inputClass: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The input type. Accepts `text` | `password` | `email` | `tel` | `time` | `url` | `week` | `month`
      */
     type: {
         type: PropType<FwInputType>;
@@ -229,6 +283,14 @@ declare const __default__$c: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Force triggers the error UI.
+     * Use the field validation rule to validate/invalidate input.
+     */
+    invalidate: {
+        type: BooleanConstructor;
+        required: false;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
@@ -237,10 +299,12 @@ declare const __default__$c: vue.DefineComponent<vue.ExtractPropTypes<{
     modelValue: string;
     type: FwInputType;
     required: boolean;
+    disableNamePrefix: boolean;
     readonly: boolean;
     tabindex: string;
     rounded: boolean;
     enableErrors: boolean;
+    invalidate: boolean;
 }, {}, {
     InputField: {
         new (...args: any[]): vue.CreateComponentPublicInstance<Readonly<vue.ExtractPropTypes<{
@@ -611,6 +675,8 @@ declare interface FwCheckboxProps {
     hint?: string;
     enableErrors?: boolean;
     isChecked?: boolean;
+    disableNamePrefix?: boolean;
+    inputId?: string;
 }
 
 declare const __default__$b: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -663,6 +729,20 @@ declare const __default__$b: vue.DefineComponent<vue.ExtractPropTypes<{
         required: false;
         default: undefined;
     };
+    /**
+     * Whether to disable the name prefix for the input field.
+     */
+    disableNamePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The custom id of the input field. Will auto-generate one if not provided.
+     */
+    inputId: {
+        type: StringConstructor;
+        required: false;
+    };
 }>, {
     uuid: string;
     primaryFade5: string;
@@ -717,9 +797,24 @@ declare const __default__$b: vue.DefineComponent<vue.ExtractPropTypes<{
         required: false;
         default: undefined;
     };
+    /**
+     * Whether to disable the name prefix for the input field.
+     */
+    disableNamePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The custom id of the input field. Will auto-generate one if not provided.
+     */
+    inputId: {
+        type: StringConstructor;
+        required: false;
+    };
 }>> & Readonly<{}>, {
     enableErrors: boolean;
     isChecked: boolean;
+    disableNamePrefix: boolean;
 }, {}, {
     InputField: {
         new (...args: any[]): vue.CreateComponentPublicInstance<Readonly<vue.ExtractPropTypes<{
@@ -2140,6 +2235,9 @@ declare interface FwNavigationMenuProps {
     authenticated?: boolean;
     paddingClasses?: string;
     transparent?: boolean;
+    logoSrc?: string;
+    mobileLogoSrc?: string;
+    reversedDesktopNavButton?: boolean;
 }
 
 declare const _default$g: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -2198,7 +2296,28 @@ declare const _default$g: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The logo image source url for the desktop menu.
+     */
+    logoSrc: {
+        type: StringConstructor;
+    };
+    /**
+     * The logo image source url for the mobile menu.
+     */
+    mobileLogoSrc: {
+        type: StringConstructor;
+    };
+    /**
+     * Whether to reverse the colours of the desktop navigation menu items.
+     */
+    reversedDesktopNavButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
+    parsedMenuItems: vue.ShallowRef<NavMenuItem[], NavMenuItem[]>;
+    parsedAdditionalMenuItems: vue.ShallowRef<NavMenuItem[], NavMenuItem[]>;
     mobileMenuClass: vue.Ref<string, string>;
     isMobileMenuOpen: vue.Ref<boolean, boolean>;
     toggleMobileMenu: () => boolean;
@@ -2259,6 +2378,25 @@ declare const _default$g: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The logo image source url for the desktop menu.
+     */
+    logoSrc: {
+        type: StringConstructor;
+    };
+    /**
+     * The logo image source url for the mobile menu.
+     */
+    mobileLogoSrc: {
+        type: StringConstructor;
+    };
+    /**
+     * Whether to reverse the colours of the desktop navigation menu items.
+     */
+    reversedDesktopNavButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onAction?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -2266,6 +2404,7 @@ declare const _default$g: vue.DefineComponent<vue.ExtractPropTypes<{
     menuEnabled: boolean;
     authenticated: boolean;
     transparent: boolean;
+    reversedDesktopNavButton: boolean;
 }, {}, {
     FwButton: vue.ComponentOptions;
     FwPopover: vue.ComponentOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "9.0.5",
+  "version": "9.0.7",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",
@@ -47,12 +47,12 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-url": "^8.0.2",
     "@rollup/pluginutils": "^5.1.0",
-    "@storybook/addon-a11y": "^10.1.2",
+    "@storybook/addon-a11y": "^10.2.14",
     "@storybook/addon-designs": "^11.0.3",
-    "@storybook/addon-docs": "^10.1.2",
-    "@storybook/addon-themes": "^10.1.2",
-    "@storybook/builder-vite": "^10.1.2",
-    "@storybook/vue3-vite": "^10.1.2",
+    "@storybook/addon-docs": "^10.2.14",
+    "@storybook/addon-themes": "^10.2.14",
+    "@storybook/builder-vite": "^10.2.14",
+    "@storybook/vue3-vite": "^10.2.14",
     "@tsconfig/node22": "^22.0.2",
     "@types/lodash-es": "^4.17.12",
     "@vitejs/plugin-vue": "^6.0.1",
@@ -65,22 +65,22 @@
     "eslint": "^9.2.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-storybook": "10.1.2",
+    "eslint-plugin-storybook": "^10.2.14",
     "eslint-plugin-vue": "^9.26.0",
     "globals": "^15.2.0",
     "hash-sum": "^2.0.0",
     "jsdom": "^24.0.0",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.17.23",
     "postcss": "^8.4.38",
     "prettier": "^3.3.1",
     "rimraf": "^5.0.7",
-    "rollup": "^4.53.3",
+    "rollup": "^4.59.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.77.1",
-    "storybook": "^10.1.2",
+    "storybook": "^10.2.14",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",

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

@@ -50,6 +50,20 @@ declare const __default__: import("vue").DefineComponent<import("vue").ExtractPr
         required: false;
         default: undefined;
     };
+    /**
+     * Whether to disable the name prefix for the input field.
+     */
+    disableNamePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The custom id of the input field. Will auto-generate one if not provided.
+     */
+    inputId: {
+        type: StringConstructor;
+        required: false;
+    };
 }>, {
     uuid: string;
     primaryFade5: string;
@@ -104,9 +118,24 @@ declare const __default__: import("vue").DefineComponent<import("vue").ExtractPr
         required: false;
         default: undefined;
     };
+    /**
+     * Whether to disable the name prefix for the input field.
+     */
+    disableNamePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The custom id of the input field. Will auto-generate one if not provided.
+     */
+    inputId: {
+        type: StringConstructor;
+        required: false;
+    };
 }>> & Readonly<{}>, {
     enableErrors: boolean;
     isChecked: boolean;
+    disableNamePrefix: boolean;
 }, {}, {
     InputField: {
         new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{

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

@@ -6,4 +6,6 @@ export declare interface FwCheckboxProps {
     hint?: string;
     enableErrors?: boolean;
     isChecked?: boolean;
+    disableNamePrefix?: boolean;
+    inputId?: string;
 }

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

@@ -16,7 +16,28 @@ declare const __default__: import("vue").DefineComponent<import("vue").ExtractPr
         required: true;
     };
     /**
-     * The input type. Accepts `text` | `password`
+     * Whether to disable the name prefix for the input field.
+     */
+    disableNamePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The custom id of the input field. Will auto-generate one if not provided.
+     */
+    inputId: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The custom class for the input field.
+     */
+    inputClass: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The input type. Accepts `text` | `password` | `email` | `tel` | `time` | `url` | `week` | `month`
      */
     type: {
         type: PropType<FwInputType>;
@@ -98,6 +119,14 @@ declare const __default__: import("vue").DefineComponent<import("vue").ExtractPr
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Force triggers the error UI.
+     * Use the field validation rule to validate/invalidate input.
+     */
+    invalidate: {
+        type: BooleanConstructor;
+        required: false;
+    };
 }>, {
     inputBaseClass: import("vue").Ref<string, string>;
     inputValue: import("vue").WritableComputedRef<string, string>;
@@ -121,7 +150,28 @@ declare const __default__: import("vue").DefineComponent<import("vue").ExtractPr
         required: true;
     };
     /**
-     * The input type. Accepts `text` | `password`
+     * Whether to disable the name prefix for the input field.
+     */
+    disableNamePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The custom id of the input field. Will auto-generate one if not provided.
+     */
+    inputId: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The custom class for the input field.
+     */
+    inputClass: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The input type. Accepts `text` | `password` | `email` | `tel` | `time` | `url` | `week` | `month`
      */
     type: {
         type: PropType<FwInputType>;
@@ -203,6 +253,14 @@ declare const __default__: import("vue").DefineComponent<import("vue").ExtractPr
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Force triggers the error UI.
+     * Use the field validation rule to validate/invalidate input.
+     */
+    invalidate: {
+        type: BooleanConstructor;
+        required: false;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
@@ -211,10 +269,12 @@ declare const __default__: import("vue").DefineComponent<import("vue").ExtractPr
     modelValue: string;
     type: FwInputType;
     required: boolean;
+    disableNamePrefix: boolean;
     readonly: boolean;
     tabindex: string;
     rounded: boolean;
     enableErrors: boolean;
+    invalidate: boolean;
 }, {}, {
     InputField: {
         new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{

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

@@ -3,6 +3,9 @@ export type FwInputType = 'text' | 'password' | 'email' | 'tel' | 'time' | 'url'
 export declare interface FwInputProps {
     value: string;
     name: string;
+    disableNamePrefix?: boolean;
+    inputId?: string;
+    inputClass?: string;
     type?: FwInputType;
     label?: string;
     placeholder?: string;
@@ -15,4 +18,5 @@ export declare interface FwInputProps {
     enableErrors?: boolean;
     maxLength?: number;
     required?: boolean;
+    invalidate?: boolean;
 }

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

@@ -1,5 +1,5 @@
 import { type PropType } from 'vue';
-import type { FwNavigationMenuProps } from './index.types';
+import type { FwNavigationMenuProps, NavMenuItem } from './index.types';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /**
      * An array of menu items
@@ -56,7 +56,28 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The logo image source url for the desktop menu.
+     */
+    logoSrc: {
+        type: StringConstructor;
+    };
+    /**
+     * The logo image source url for the mobile menu.
+     */
+    mobileLogoSrc: {
+        type: StringConstructor;
+    };
+    /**
+     * Whether to reverse the colours of the desktop navigation menu items.
+     */
+    reversedDesktopNavButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
+    parsedMenuItems: import("vue").ShallowRef<NavMenuItem[], NavMenuItem[]>;
+    parsedAdditionalMenuItems: import("vue").ShallowRef<NavMenuItem[], NavMenuItem[]>;
     mobileMenuClass: import("vue").Ref<string, string>;
     isMobileMenuOpen: import("vue").Ref<boolean, boolean>;
     toggleMobileMenu: () => boolean;
@@ -117,6 +138,25 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The logo image source url for the desktop menu.
+     */
+    logoSrc: {
+        type: StringConstructor;
+    };
+    /**
+     * The logo image source url for the mobile menu.
+     */
+    mobileLogoSrc: {
+        type: StringConstructor;
+    };
+    /**
+     * Whether to reverse the colours of the desktop navigation menu items.
+     */
+    reversedDesktopNavButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onAction?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -124,6 +164,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     menuEnabled: boolean;
     authenticated: boolean;
     transparent: boolean;
+    reversedDesktopNavButton: boolean;
 }, {}, {
     FwButton: import("vue").ComponentOptions;
     FwPopover: import("vue").ComponentOptions;

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

@@ -15,4 +15,7 @@ export declare interface FwNavigationMenuProps {
     authenticated?: boolean;
     paddingClasses?: string;
     transparent?: boolean;
+    logoSrc?: string;
+    mobileLogoSrc?: string;
+    reversedDesktopNavButton?: boolean;
 }

package/types/icons/index.d.ts

@@ -63,4 +63,5 @@ import UserPlusSvg from './user-plus.svg';
 import ManualAccountSvg from './manual-account.svg';
 import DefaultProviderSvg from './default-provider.svg';
 import PendingSvg from './pending.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, EllipsisSvg, ChartLineUpSvg, SackDollarSvg, MountainFlagSvg, CloudArrowUpSvg, GuideSvg, ArrowRotateSvg, InfoCircleRegularSvg, CopyChainSvg, ArrowLeftSvg, ArrowRightSvg, ArrowOutSquareSvg, ArrowConnectSvg, CircleExclamationSvg, CircleCheckSvg, ClockSvg, DesktopSvg, ErrorSvg, FolderArrowDownSvg, MobileSvg, PaperPlaneSvg, SuccessHillSvg, UserPlusSvg, ManualAccountSvg, DefaultProviderSvg, PendingSvg };
+import CirclePlusSvg from './circle-plus.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, EllipsisSvg, ChartLineUpSvg, SackDollarSvg, MountainFlagSvg, CloudArrowUpSvg, GuideSvg, ArrowRotateSvg, InfoCircleRegularSvg, CopyChainSvg, ArrowLeftSvg, ArrowRightSvg, ArrowOutSquareSvg, ArrowConnectSvg, CircleExclamationSvg, CircleCheckSvg, ClockSvg, DesktopSvg, ErrorSvg, FolderArrowDownSvg, MobileSvg, PaperPlaneSvg, SuccessHillSvg, UserPlusSvg, ManualAccountSvg, DefaultProviderSvg, PendingSvg, CirclePlusSvg };