@frollo/frollo-web-ui 7.0.1 → 8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "7.0.1",
+  "version": "8.0.0",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",
@@ -14,93 +14,95 @@
   "module": "frollo-web-ui.esm.js",
   "types": "index.d.ts",
   "scripts": {
-    "serve": "npm run tw-config-export && start-storybook -s ./dist/twconfig-viewer -p 6008 --no-manager-cache",
+    "serve": "storybook dev -p 6009",
     "build": "npm run build:lib && npm run build:docs",
     "build:docs": "bin/build-docs.sh",
     "build:lib": "bin/build-lib.sh",
     "deploy": "bin/publish.sh",
     "release": "bin/release.sh",
-    "test:unit": "jest --config jest.config.js --coverage --runInBand",
-    "test:single": "jest --config jest.config.js --coverage --watchAll",
-    "lint": "eslint --cache ./ --ext .js,.ts,.vue",
-    "lint:fix": "eslint --cache ./ --fix --ext .js,.ts,.vue",
+    "test:unit": "jest --config jest.config.ts --coverage --runInBand",
+    "test:single": "jest --config jest.config.ts --coverage --watchAll",
+    "lint": "eslint --cache ./src",
+    "lint:fix": "eslint --cache ./src --fix",
     "tw-config-export": "mkdir -p ./dist && tailwind-config-viewer export ./dist/twconfig-viewer && rimraf ./dist/twconfig-viewer/favicon.ico",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "storybook build"
   },
   "dependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@geometricpanda/storybook-addon-iframe": "^0.2.1",
+    "@babel/core": "^7.24.5",
+    "@babel/plugin-transform-class-properties": "^7.24.1",
+    "@babel/plugin-transform-private-methods": "^7.24.1",
+    "@babel/plugin-transform-private-property-in-object": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@eslint/js": "^9.2.0",
     "@popperjs/core": "^2.11.8",
-    "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-replace": "^3.1.0",
-    "@rollup/plugin-url": "^6.1.0",
-    "@storybook/addon-a11y": "~6.4.22",
-    "@storybook/addon-actions": "~6.4.22",
-    "@storybook/addon-essentials": "~6.4.22",
-    "@storybook/addon-links": "~6.4.22",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storysource": "~6.4.22",
-    "@storybook/builder-webpack5": "~6.4.22",
-    "@storybook/manager-webpack5": "~6.4.22",
-    "@storybook/vue3": "~6.4.22",
-    "@types/jest": "^27.4.0",
-    "@types/lodash-es": "^4.17.6",
-    "@typescript-eslint/eslint-plugin": "^5.12.0",
-    "@vue/cli-plugin-babel": "^5.0.1",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/test-utils": "^2.0.0-rc.17",
-    "@vue/vue3-jest": "^28.0.0",
-    "autoprefixer": "^10.4.7",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^28.1.1",
-    "babel-loader": "^8.2.5",
-    "chart.js": "^4.3.0",
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-url": "^8.0.2",
+    "@rollup/pluginutils": "^5.1.0",
+    "@storybook/addon-a11y": "^8.1.0",
+    "@storybook/addon-designs": "^8.0.1",
+    "@storybook/addon-essentials": "^8.1.0",
+    "@storybook/addon-interactions": "^8.1.0",
+    "@storybook/addon-links": "^8.1.0",
+    "@storybook/addon-themes": "^8.1.0",
+    "@storybook/blocks": "^8.1.0",
+    "@storybook/manager-api": "^8.1.0",
+    "@storybook/test": "^8.1.0",
+    "@storybook/theming": "^8.1.0",
+    "@storybook/vue3": "^8.1.0",
+    "@storybook/vue3-vite": "^8.1.0",
+    "@types/jest": "^29.5.12",
+    "@types/lodash-es": "^4.17.12",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/vue3-jest": "^29.2.6",
+    "autoprefixer": "^10.4.19",
+    "babel-jest": "^29.7.0",
+    "chart.js": "^4.4.2",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.6.0",
-    "eslint": "^8.9.0",
-    "eslint-plugin-vue": "^8.4.1",
-    "jest": "^28.1.1",
-    "jest-environment-jsdom": "^28.1.1",
+    "eslint": "^9.2.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.26.0",
+    "globals": "^15.2.0",
+    "hash-sum": "^2.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^24.0.0",
     "lodash-es": "^4.17.21",
-    "prettier": "^2.7.1",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.67.2",
-    "rollup-plugin-dts": "^4.1.0",
+    "node-sass": "^9.0.0",
+    "postcss": "^8.4.38",
+    "prettier": "^3.3.1",
+    "rimraf": "^5.0.7",
+    "rollup": "^4.17.2",
+    "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-svg-to-vue": "^1.0.0",
-    "rollup-plugin-typescript2": "^0.31.2",
+    "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-vue": "^6.0.0",
-    "sass": "^1.55.0",
-    "sass-loader": "^13.1.0",
-    "tailwind-config-viewer": "^1.7.1",
-    "tailwindcss": "^3.0.23",
-    "ts-jest": "^28.0.5",
-    "typescript": "^4.7.4",
+    "sass": "^1.77.1",
+    "storybook": "^8.1.0",
+    "svgo": "^3.3.2",
+    "tailwindcss": "^3.4.3",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^8.0.0-alpha.13",
     "v-calendar": "^3.1.2",
-    "vee-validate": "^4.5.9",
-    "vue-chartjs": "^5.2.0",
-    "vue-loader": "^16.8.3",
-    "vue-style-loader": "^4.1.3",
-    "vue-svg-loader": "^0.17.0-beta.2",
+    "vee-validate": "^4.12.8",
+    "vite": "^5.2.0",
+    "vite-svg-loader": "^5.1.0",
+    "vue-chartjs": "^5.3.1",
+    "vue-eslint-parser": "^9.4.2",
+    "vue-tsc": "^2.0.6",
     "vue3-webcomponent-wrapper": "^0.2.0",
-    "yup": "^0.32.11"
-  },
-  "homepage": "https://github.com/frollous/frollo-web-ui#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/frollous/frollo-web-ui.git"
-  },
-  "bugs": {
-    "url": "https://github.com/frollous/frollo-web-ui/issues"
+    "yup": "^1.4.0"
   },
   "license": "Apache-2.0",
   "sideEffects": false,
@@ -108,8 +110,8 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=16.0.0",
-    "npm": ">=8.3.1"
+    "node": ">=20.12.2",
+    "npm": ">=10.5.0"
   },
   "keywords": [
     "frollo web ui",

package/styles/tailwind.scss

@@ -60,4 +60,10 @@
   h6, .h6 {
     @apply text-base font-bold mb-1;
   }
+
+  input, textarea {
+    &::placeholder {
+      @apply text-grey-light;
+    }
+  }
 }

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

@@ -1,128 +1,128 @@
-declare const __default__: import("vue").DefineComponent<{
-    /**
-     * The header title of the accordion
-     */
-    title: {
-        type: StringConstructor;
-    };
-    /**
-     * Classname for the title
-     */
-    titleClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Title suffix of the accordion header
-     */
-    suffixTitle: {
-        type: StringConstructor;
-    };
-    /**
-     * Whether the accordion should be initially opened
-     */
-    isOpened: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Whether the accordion open icon should be at the start or end
-     */
-    iconPositionStart: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Icon type (arrow or plus)
-     */
-    isArrow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Padding className for the accordion button
-     */
-    buttonPadding: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Border style className for the accordion button
-     */
-    borderStyle: {
-        type: StringConstructor;
-        default: string;
-    };
-}, {
-    isOpen: import("vue").Ref<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").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * The header title of the accordion
-     */
-    title: {
-        type: StringConstructor;
-    };
-    /**
-     * Classname for the title
-     */
-    titleClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Title suffix of the accordion header
-     */
-    suffixTitle: {
-        type: StringConstructor;
-    };
-    /**
-     * Whether the accordion should be initially opened
-     */
-    isOpened: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Whether the accordion open icon should be at the start or end
-     */
-    iconPositionStart: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Icon type (arrow or plus)
-     */
-    isArrow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Padding className for the accordion button
-     */
-    buttonPadding: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Border style className for the accordion button
-     */
-    borderStyle: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & {
-    onToggled?: ((...args: any[]) => any) | undefined;
-}, {
-    titleClass: string;
-    isOpened: boolean;
-    iconPositionStart: boolean;
-    isArrow: boolean;
-    buttonPadding: string;
-    borderStyle: string;
-}>;
-export default __default__;
+declare const __default__: import("vue").DefineComponent<{
+    /**
+     * The header title of the accordion
+     */
+    title: {
+        type: StringConstructor;
+    };
+    /**
+     * Classname for the title
+     */
+    titleClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Title suffix of the accordion header
+     */
+    suffixTitle: {
+        type: StringConstructor;
+    };
+    /**
+     * Whether the accordion should be initially opened
+     */
+    isOpened: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether the accordion open icon should be at the start or end
+     */
+    iconPositionStart: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Icon type (arrow or plus)
+     */
+    isArrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Padding className for the accordion button
+     */
+    buttonPadding: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Border style className for the accordion button
+     */
+    borderStyle: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    isOpen: import("vue").Ref<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<{
+    /**
+     * The header title of the accordion
+     */
+    title: {
+        type: StringConstructor;
+    };
+    /**
+     * Classname for the title
+     */
+    titleClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Title suffix of the accordion header
+     */
+    suffixTitle: {
+        type: StringConstructor;
+    };
+    /**
+     * Whether the accordion should be initially opened
+     */
+    isOpened: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether the accordion open icon should be at the start or end
+     */
+    iconPositionStart: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Icon type (arrow or plus)
+     */
+    isArrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Padding className for the accordion button
+     */
+    buttonPadding: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Border style className for the accordion button
+     */
+    borderStyle: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    onToggled?: ((...args: any[]) => any) | undefined;
+}, {
+    titleClass: string;
+    isOpened: boolean;
+    iconPositionStart: boolean;
+    isArrow: boolean;
+    buttonPadding: string;
+    borderStyle: string;
+}, {}>;
+export default __default__;

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

@@ -1,2 +1,2 @@
-import FwAccordion from './fw-accordion.vue';
-export { FwAccordion };
+import FwAccordion from './fw-accordion.vue';
+export { FwAccordion };

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

@@ -1,10 +1,10 @@
-export declare interface FwAccordionProps {
-    title?: string;
-    titleClass?: string;
-    suffixTitle?: string;
-    isOpened?: boolean;
-    iconPositionStart?: boolean;
-    isArrow?: boolean;
-    buttonPadding?: string;
-    borderStyle?: string;
-}
+export declare interface FwAccordionProps {
+    title?: string;
+    titleClass?: string;
+    suffixTitle?: string;
+    isOpened?: boolean;
+    iconPositionStart?: boolean;
+    isArrow?: boolean;
+    buttonPadding?: string;
+    borderStyle?: string;
+}

package/types/components/fw-animations/fw-email-pulse.vue.d.ts

@@ -1,24 +1,24 @@
-declare const __default__: import("vue").DefineComponent<{
-    /**
-     * The animation-iteration-count CSS property of the pulse animation.
-     * Sets the number of times an animation sequence should be played before stopping.
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
-     */
-    animationIteration: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-}, unknown, 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 animation-iteration-count CSS property of the pulse animation.
-     * Sets the number of times an animation sequence should be played before stopping.
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
-     */
-    animationIteration: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-}>>, {
-    animationIteration: string | number;
-}>;
-export default __default__;
+declare const __default__: import("vue").DefineComponent<{
+    /**
+     * The animation-iteration-count CSS property of the pulse animation.
+     * Sets the number of times an animation sequence should be played before stopping.
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
+     */
+    animationIteration: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The animation-iteration-count CSS property of the pulse animation.
+     * Sets the number of times an animation sequence should be played before stopping.
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
+     */
+    animationIteration: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>>, {
+    animationIteration: string | number;
+}, {}>;
+export default __default__;

package/types/components/fw-animations/fw-loading-spinner.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/types/components/fw-animations/fw-success-pulse.vue.d.ts

@@ -1,24 +1,24 @@
-declare const __default__: import("vue").DefineComponent<{
-    /**
-     * The animation-iteration-count CSS property of the pulse animation.
-     * Sets the number of times an animation sequence should be played before stopping.
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
-     */
-    animationIteration: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-}, unknown, 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 animation-iteration-count CSS property of the pulse animation.
-     * Sets the number of times an animation sequence should be played before stopping.
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
-     */
-    animationIteration: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-}>>, {
-    animationIteration: string | number;
-}>;
-export default __default__;
+declare const __default__: import("vue").DefineComponent<{
+    /**
+     * The animation-iteration-count CSS property of the pulse animation.
+     * Sets the number of times an animation sequence should be played before stopping.
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
+     */
+    animationIteration: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The animation-iteration-count CSS property of the pulse animation.
+     * Sets the number of times an animation sequence should be played before stopping.
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
+     */
+    animationIteration: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>>, {
+    animationIteration: string | number;
+}, {}>;
+export default __default__;

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

@@ -1,4 +1,4 @@
-import FwEmailPulse from './fw-email-pulse.vue';
-import FwSuccessPulse from './fw-success-pulse.vue';
-import FwLoadingSpinner from './fw-loading-spinner.vue';
-export { FwEmailPulse, FwSuccessPulse, FwLoadingSpinner };
+import FwEmailPulse from './fw-email-pulse.vue';
+import FwSuccessPulse from './fw-success-pulse.vue';
+import FwLoadingSpinner from './fw-loading-spinner.vue';
+export { FwEmailPulse, FwSuccessPulse, FwLoadingSpinner };