@frollo/frollo-web-ui 9.0.0 → 9.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "9.0.0",
+  "version": "9.0.2",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",
@@ -28,7 +28,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "vue": "^3.4.21"
+    "vue": "^3.5.25"
   },
   "devDependencies": {
     "@babel/core": "^7.24.5",
@@ -45,25 +45,25 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-url": "^8.0.2",
     "@rollup/pluginutils": "^5.1.0",
-    "@storybook/addon-a11y": "^10.0.6",
-    "@storybook/addon-designs": "^11.0.1",
-    "@storybook/addon-docs": "^10.0.6",
-    "@storybook/addon-themes": "^10.0.6",
-    "@storybook/builder-vite": "^10.0.7",
-    "@storybook/vue3": "^10.0.6",
-    "@storybook/vue3-vite": "^10.0.6",
+    "@storybook/addon-a11y": "^10.1.2",
+    "@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",
     "@tsconfig/node22": "^22.0.2",
     "@types/lodash-es": "^4.17.12",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitejs/plugin-vue-jsx": "^5.1.1",
-    "@vitest/coverage-istanbul": "^4.0.14",
+    "@vitest/coverage-istanbul": "^4.0.15",
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.19",
-    "chart.js": "^4.4.2",
+    "chart.js": "^4.5.1",
     "cross-env": "^7.0.3",
     "eslint": "^9.2.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-storybook": "10.1.2",
     "eslint-plugin-vue": "^9.26.0",
     "globals": "^15.2.0",
     "hash-sum": "^2.0.0",
@@ -72,31 +72,31 @@
     "postcss": "^8.4.38",
     "prettier": "^3.3.1",
     "rimraf": "^5.0.7",
-    "rollup": "^4.17.2",
+    "rollup": "^4.53.3",
     "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.0.6",
+    "storybook": "^10.1.2",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
-    "typescript": "^5.4.5",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.48.0",
     "v-calendar": "^3.1.2",
-    "vee-validate": "^4.12.8",
+    "vee-validate": "^4.15.1",
     "vite": "^7.2.2",
     "vite-plugin-checker": "^0.11.0",
     "vite-plugin-vue-devtools": "^8.0.3",
     "vite-svg-loader": "^5.1.0",
-    "vitest": "^4.0.8",
-    "vue-chartjs": "^5.3.1",
+    "vitest": "^4.0.15",
+    "vue-chartjs": "^5.3.3",
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^3.1.4",
     "vue3-webcomponent-wrapper": "^0.2.0",
-    "yup": "^1.4.0"
+    "yup": "^1.7.1"
   },
   "license": "Apache-2.0",
   "sideEffects": false,

package/styles/web-components.scss

@@ -1,4 +1,87 @@
-@import './tailwind.css';
+@use './tailwind.css';
+
+@font-face {
+  font-family: 'Forma DJR Text';
+  src: local('Forma DJR Text'), local('FormaDJRText-Regular'),
+    url("https://content.frollo.us/fonts/FormaDJRText-Regular.otf") format('opentype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Forma DJR Text';
+  src: local('Forma DJR Text Italic'),
+    url('https://content.frollo.us/fonts/FormaDJRText-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Forma DJR Text';
+  src: local('Forma DJR Text Bold'),
+    url('https://content.frollo.us/fonts/FormaDJRText-Medium.otf') format('opentype');
+  font-weight: 500 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Forma DJR Text';
+  src: local('Forma DJR Text Bold'),
+    url('https://content.frollo.us/fonts/FormaDJRText-Medium.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+
+/* 
+* Default theme variables - Frollo branding
+*/
+:root {
+  --colorPrimary: #512ABD;
+    --colorSecondary: #141414;
+    --colorTertiary: #fff;
+    --fontFamily: Forma DJR Text;
+    --fontUrl: local-font;
+    --colorLink: #512ABD;
+    --colorBody: #141414;
+    --colorButtonPrimary: #512ABD;
+    --colorButtonPrimaryText: #ffffff;
+    --colorButtonPrimaryFade: #854cff;
+    --colorButtonSecondary: #E6E1FF;
+    --colorButtonSecondaryText: #141414;
+    --colorButtonSecondaryFade: #CDC3FF;
+    --colorButtonTertiary: #512ABD;
+    --colorButtonTertiaryText: #512ABD;
+    --colorButtonTertiaryFade: #f5f3ff;
+    --colorButtonQuaternary: #CDC3FF;
+    --colorButtonQuaternaryText: #292B3D;
+    --colorButtonQuaternaryFade: transparent;
+    --colorAppBg: #F7F7F7;
+    --colorSuccessBg: #D8FFF6;
+    --colorSuccessText: #00C696;
+    --colorSuccessNew: #4bf0c8;
+    --colorErrorBg: #FEE0D9;
+    --colorErrorText: #E74C4C;
+    --colorWarningBg: #FB6340;
+    --colorWarningText: #FB6340;
+    --colorText1: #393C56;
+    --colorText2: #5F6489;
+    --colorText3: #8B8FAC;
+    --colorText4: #CDC3FF;
+    --colorBg1: #292B3D;
+    --colorBg2: #FDDBFD;
+    --colorBg3: #FEE0D9;
+    --colorBg4: #D4EDF7;
+    --colorBorder1: #AFB2C7;
+    --colorBorder2: #CDC3FF;
+    --colorBorder3: #8E7DFF;
+    --colorButtonGradient: linear-gradient(87.77deg, #d327e7, #512abd 23.8%, #512abd 42.37%, #00d19f);
+    --colorButtonGradientText: #f7f7f7;
+}
 
 body {
   font-family: var(--fontFamily);

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<import("vue").ExtractPropTypes<{
     /**
      * The header title of the accordion
      */
@@ -53,14 +53,14 @@ declare const __default__: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, {
-    isOpen: import("vue").Ref<boolean>;
+}>, {
+    isOpen: import("vue").Ref<boolean, boolean>;
     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, "toggled"[], "toggled", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "toggled"[], "toggled", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The header title of the accordion
      */
@@ -115,14 +115,16 @@ declare const __default__: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & {
+}>> & Readonly<{
     onToggled?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
     titleClass: string;
     isOpened: boolean;
     iconPositionStart: boolean;
     headerClass: string;
     borderStyle: string;
     secondary: boolean;
-}, {}>;
+}, {}, {
+    ChevronDownSvg: VueConstructor<Vue>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default __default__;

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

@@ -1,6 +1,6 @@
 import { type PropType } from 'vue';
 import type { AlertVariantName } from './index.types';
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /**
      * The colour variant of the alert element.
      * Accepts 'success', 'error'
@@ -17,10 +17,12 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, {
+}>, {
+    visible: import("vue").Ref<boolean, boolean>;
     bgClass: import("vue").ComputedRef<"bg-brand-error-bg" | "bg-brand-success-bg">;
-    defaultScale: import("vue").Ref<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    IconComp: import("vue").ComputedRef<any>;
+    iconClass: import("vue").ComputedRef<"text-brand-success-text" | "text-brand-error-text">;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The colour variant of the alert element.
      * Accepts 'success', 'error'
@@ -37,7 +39,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+}>> & Readonly<{}>, {
     disableIcon: boolean;
-}, {}>;
+}, {}, {
+    CheckSvg: VueConstructor<Vue>;
+    AlertSvg: VueConstructor<Vue>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/types/components/fw-bar-chart/fw-bar-chart.vue.d.ts

@@ -1,36 +1,10 @@
-import { PropType } from 'vue';
-import { FwBarChartProps } from './index.types';
+import { FwBarGraphData } from './index.types';
 declare const _default: import("vue").DefineComponent<{
-    /**
-     * The transaction title of the chart
-     */
-    title: {
-        type: StringConstructor;
-    };
-    /**
-     * The marker label of the y-axis transactions
-     */
-    yMarker: {
-        type: StringConstructor;
-    };
-    /**
-     * The x axis data.
-     */
-    x: {
-        type: PropType<FwBarChartProps["x"]>;
-    };
-    /**
-     * The y axis data.
-     */
-    y: {
-        type: PropType<FwBarChartProps["y"]>;
-    };
-    /**
-     * The x and y axis data.
-     */
-    graphData: {
-        type: PropType<FwBarChartProps["graphData"]>;
-    };
+    title?: string | undefined;
+    yMarker?: string | undefined;
+    x?: string[] | string | undefined;
+    y?: (string | number)[] | string | undefined;
+    graphData?: FwBarGraphData[] | string | undefined;
 }, {
     uuid: string;
     xModel: import("vue").ComputedRef<string[]>;
@@ -48,36 +22,13 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     bgColor: string;
     primaryFade: string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * The transaction title of the chart
-     */
-    title: {
-        type: StringConstructor;
-    };
-    /**
-     * The marker label of the y-axis transactions
-     */
-    yMarker: {
-        type: StringConstructor;
-    };
-    /**
-     * The x axis data.
-     */
-    x: {
-        type: PropType<FwBarChartProps["x"]>;
-    };
-    /**
-     * The y axis data.
-     */
-    y: {
-        type: PropType<FwBarChartProps["y"]>;
-    };
-    /**
-     * The x and y axis data.
-     */
-    graphData: {
-        type: PropType<FwBarChartProps["graphData"]>;
-    };
-}>>, {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    title?: string | undefined;
+    yMarker?: string | undefined;
+    x?: string[] | string | undefined;
+    y?: (string | number)[] | string | undefined;
+    graphData?: FwBarGraphData[] | string | undefined;
+}> & Readonly<{}>, {}, {}, {
+    BarChart: import("vue-chartjs/dist/types").TypedChartComponent<"bar", (number | [number, number] | null)[] | import("vue-chartjs/dist/typedCharts").ExtendedDataPoint[], unknown>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,6 +1,6 @@
 import { type PropType } from 'vue';
 import type { ButtonSize, ButtonVariantName, ButtonTypeAttribute, ButtonAnimation } from './index.types.ts';
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /**
      * The label text of the button.
      * Overrides the default slot content.
@@ -71,6 +71,7 @@ declare const _default: import("vue").DefineComponent<{
      */
     external: {
         type: BooleanConstructor;
+        default: boolean;
     };
     /**
      * Whether the button selected state is active
@@ -85,8 +86,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, {
-    baseClass: import("vue").Ref<string>;
+}>, {
     textColorClass: import("vue").ComputedRef<string>;
     bgColorClass: import("vue").ComputedRef<string>;
     sizeClass: import("vue").ComputedRef<string>;
@@ -113,7 +113,8 @@ declare const _default: import("vue").DefineComponent<{
         spacing: string;
         size: string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseover" | "mouseout" | "focusin" | "focusout")[], "click" | "mouseover" | "mouseout" | "focusin" | "focusout", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    rootClasses: import("vue").ComputedRef<string[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseover" | "mouseout" | "focusin" | "focusout")[], "click" | "mouseover" | "mouseout" | "focusin" | "focusout", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The label text of the button.
      * Overrides the default slot content.
@@ -184,6 +185,7 @@ declare const _default: import("vue").DefineComponent<{
      */
     external: {
         type: BooleanConstructor;
+        default: boolean;
     };
     /**
      * Whether the button selected state is active
@@ -198,13 +200,13 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & {
+}>> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
     onMouseover?: ((...args: any[]) => any) | undefined;
     onMouseout?: ((...args: any[]) => any) | undefined;
     onFocusin?: ((...args: any[]) => any) | undefined;
     onFocusout?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
     size: ButtonSize;
     variant: ButtonVariantName;
     buttonType: ButtonTypeAttribute;
@@ -214,5 +216,7 @@ declare const _default: import("vue").DefineComponent<{
     external: boolean;
     selected: boolean;
     disabled: boolean;
-}, {}>;
+}, {}, {
+    LoadingSvg: VueConstructor<Vue>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,4 +1,4 @@
-declare const __default__: import("vue").DefineComponent<{
+declare const __default__: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /**
      * The header title of the card
      */
@@ -35,11 +35,11 @@ declare const __default__: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, {
+}>, {
     componentName: import("vue").ComputedRef<"router-link" | "a" | "div">;
-    linkClass: import("vue").Ref<string>;
+    linkClass: string;
     cardHeaderBg: string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The header title of the card
      */
@@ -76,8 +76,8 @@ declare const __default__: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+}>> & Readonly<{}>, {
     slotPadding: boolean;
     isBordered: boolean;
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default __default__;