@frollo/frollo-web-ui 0.1.0 → 0.2.0

package/index.d.ts

@@ -2,17 +2,14 @@ import * as vue from 'vue';
 import { PropType, Plugin } from 'vue';
 export { Form as FwForm } from 'vee-validate';
 
-declare enum FwInputType {
-    text = "text",
-    password = "password"
-}
+declare type FwInputType = 'text' | 'password';
 declare interface FwInputProps {
     value: string;
     name: string;
     type?: FwInputType;
     label?: string;
     placeholder?: string;
-    rules?: string | object | Function;
+    rules?: string | Record<string, unknown> | (() => boolean);
     readonly?: boolean;
     hint?: string;
 }
@@ -54,10 +51,10 @@ declare const _default$7: vue.DefineComponent<{
         default: string;
     };
     /**
-     * Validation rules. Accepts a string, object, function or schema.
+     * Validation rules. Accepts an object, string schema or validation function.
      */
     rules: {
-        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+        type: PropType<string | Record<string, unknown> | (() => boolean) | undefined>;
     };
     /**
      * Converts the input into a readonly disabled field
@@ -72,7 +69,14 @@ declare const _default$7: vue.DefineComponent<{
     hint: {
         type: StringConstructor;
     };
+    /**
+     * The autocomplete input attribute
+     */
+    autocomplete: {
+        type: StringConstructor;
+    };
 }, {
+    inputBaseClass: vue.Ref<string>;
     inputValue: vue.WritableComputedRef<string>;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     /**
@@ -111,10 +115,10 @@ declare const _default$7: vue.DefineComponent<{
         default: string;
     };
     /**
-     * Validation rules. Accepts a string, object, function or schema.
+     * Validation rules. Accepts an object, string schema or validation function.
      */
     rules: {
-        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+        type: PropType<string | Record<string, unknown> | (() => boolean) | undefined>;
     };
     /**
      * Converts the input into a readonly disabled field
@@ -129,6 +133,12 @@ declare const _default$7: vue.DefineComponent<{
     hint: {
         type: StringConstructor;
     };
+    /**
+     * The autocomplete input attribute
+     */
+    autocomplete: {
+        type: StringConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -153,10 +163,10 @@ declare const _default$6: vue.DefineComponent<{
         type: StringConstructor;
     };
     /**
-     * Validation rules. Accepts a string, object, function or schema.
+     * Validation rules. Accepts an object, stringm schema or validation function.
      */
     rules: {
-        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+        type: PropType<string | Record<string, unknown> | (() => boolean) | undefined>;
     };
     /**
      * The hint text shown below the input
@@ -179,10 +189,10 @@ declare const _default$6: vue.DefineComponent<{
         type: StringConstructor;
     };
     /**
-     * Validation rules. Accepts a string, object, function or schema.
+     * Validation rules. Accepts an object, stringm schema or validation function.
      */
     rules: {
-        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+        type: PropType<string | Record<string, unknown> | (() => boolean) | undefined>;
     };
     /**
      * The hint text shown below the input
@@ -217,6 +227,7 @@ declare const _default$5: vue.DefineComponent<{
     href: StringConstructor;
 }, {
     componentName: vue.ComputedRef<"router-link" | "a" | "div">;
+    linkClass: vue.Ref<string>;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     /**
      * The header title of the card
@@ -242,15 +253,7 @@ declare const _default$5: vue.DefineComponent<{
     href: StringConstructor;
 }>>, {}>;
 
-declare enum ButtonVariantName {
-    primary = "primary",
-    secondary = "secondary",
-    tertiary = "tertiary",
-    error = "error",
-    success = "success",
-    text = "text",
-    link = "link"
-}
+declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'link' | 'text';
 declare interface ButtonDefinition {
     text: string;
     background: string;
@@ -309,6 +312,7 @@ declare const _default$4: vue.DefineComponent<{
         validator: (value: string) => boolean;
     };
 }, {
+    baseClass: vue.Ref<string>;
     textColorClass: vue.ComputedRef<string>;
     bgColorClass: vue.ComputedRef<string>;
     sizeClass: vue.ComputedRef<string>;
@@ -389,6 +393,7 @@ declare const _default$3: vue.DefineComponent<{
         type: StringConstructor;
     };
 }, {
+    mobileMenuClass: vue.Ref<string>;
     isMobileMenuOpen: vue.Ref<boolean>;
     toggleMobileMenu: () => boolean;
     actionClicked: () => void;
@@ -615,7 +620,7 @@ declare interface ModalServiceProps extends FwModalProps {
     onConfirm?: () => void;
     onCancel?: () => void;
 }
-declare const modalService: (options?: ModalServiceProps | undefined, element?: HTMLDivElement | undefined) => {
+declare const modalService: (options?: ModalServiceProps, element?: HTMLDivElement) => {
     open: () => void;
     close: () => void;
 };
@@ -632,7 +637,7 @@ declare interface FwCardProps {
 declare interface FwCheckboxProps {
     name: string;
     label?: string;
-    rules?: string | object | Function;
+    rules?: string | Record<string, unknown> | (() => boolean);
     hint?: string;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",
@@ -29,7 +29,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "vue": "^3.2.31"
+    "vue": "^3.2.37"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
@@ -40,32 +40,35 @@
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^3.1.0",
     "@rollup/plugin-url": "^6.1.0",
-    "@storybook/addon-a11y": "^6.4.19",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
+    "@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.19",
-    "@storybook/builder-webpack5": "^6.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/vue3": "^6.4.19",
+    "@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": "^27.0.0-alpha.4",
-    "autoprefixer": "^10.4.2",
+    "@vue/vue3-jest": "^28.0.0",
+    "autoprefixer": "^10.4.7",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^27.5.1",
-    "babel-loader": "^8.2.3",
+    "babel-jest": "^28.1.1",
+    "babel-loader": "^8.2.5",
     "cross-env": "^7.0.3",
     "css-loader": "^6.6.0",
     "eslint": "^8.9.0",
     "eslint-plugin-vue": "^8.4.1",
-    "jest": "^27.5.1",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
     "lodash-es": "^4.17.21",
+    "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.67.2",
     "rollup-plugin-dts": "^4.1.0",
@@ -76,8 +79,8 @@
     "sass-loader": "^12.6.0",
     "tailwind-config-viewer": "^1.7.1",
     "tailwindcss": "^3.0.23",
-    "ts-jest": "^27.1.3",
-    "typescript": "^4.5.5",
+    "ts-jest": "^28.0.5",
+    "typescript": "^4.7.4",
     "vee-validate": "^4.5.9",
     "vue-loader": "^16.8.3",
     "vue-style-loader": "^4.1.3",

package/tailwind.config.js

@@ -12,8 +12,8 @@ module.exports = {
         base: '#4b4b4b',
         light: '#bcbcbc',
         lightest: '#f5f5f5',
-        '10': '#f8f8f8',
-        '20': '#f2f2f2'
+        10: '#f8f8f8',
+        20: '#f2f2f2'
       },
       error: '#eb5757',
       success: '#00c48c',
@@ -30,19 +30,19 @@ module.exports = {
     },
     screens: {
       // @media (min-width: 640px) { ... }
-      'sm': '640px',
-      'md': '768px',
-      'lg': '1024px',
-      'xl': '1280px',
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
       '2xl': '1536px'
     },
     // Extends tailwind's properties
     extend: {
       minWidth: {
-        'banner': '420px'
+        banner: '420px'
       },
       boxShadow: {
-        'card': '0px 1px 7px rgba(0, 0, 0, 0.1714)'
+        card: '0px 1px 7px rgba(0, 0, 0, 0.1714)'
       }
     }
   }

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

@@ -37,6 +37,7 @@ declare const _default: import("vue").DefineComponent<{
         validator: (value: string) => boolean;
     };
 }, {
+    baseClass: import("vue").Ref<string>;
     textColorClass: import("vue").ComputedRef<string>;
     bgColorClass: import("vue").ComputedRef<string>;
     sizeClass: import("vue").ComputedRef<string>;

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

@@ -1,12 +1,4 @@
-export declare enum ButtonVariantName {
-    primary = "primary",
-    secondary = "secondary",
-    tertiary = "tertiary",
-    error = "error",
-    success = "success",
-    text = "text",
-    link = "link"
-}
+export declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'link' | 'text';
 export declare interface ButtonDefinition {
     text: string;
     background: string;

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

@@ -23,6 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     href: StringConstructor;
 }, {
     componentName: import("vue").ComputedRef<"router-link" | "a" | "div">;
+    linkClass: import("vue").Ref<string>;
 }, 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 header title of the card

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

@@ -1,3 +1,4 @@
+import { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     /**
      * The name of the input field. Must be unique per form.
@@ -13,10 +14,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
     };
     /**
-     * Validation rules. Accepts a string, object, function or schema.
+     * Validation rules. Accepts an object, stringm schema or validation function.
      */
     rules: {
-        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+        type: PropType<string | Record<string, unknown> | (() => boolean) | undefined>;
     };
     /**
      * The hint text shown below the input
@@ -39,10 +40,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
     };
     /**
-     * Validation rules. Accepts a string, object, function or schema.
+     * Validation rules. Accepts an object, stringm schema or validation function.
      */
     rules: {
-        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+        type: PropType<string | Record<string, unknown> | (() => boolean) | undefined>;
     };
     /**
      * The hint text shown below the input

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

@@ -1,6 +1,6 @@
 export declare interface FwCheckboxProps {
     name: string;
     label?: string;
-    rules?: string | object | Function;
+    rules?: string | Record<string, unknown> | (() => boolean);
     hint?: string;
 }

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

@@ -37,10 +37,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     /**
-     * Validation rules. Accepts a string, object, function or schema.
+     * Validation rules. Accepts an object, string schema or validation function.
      */
     rules: {
-        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+        type: PropType<string | Record<string, unknown> | (() => boolean) | undefined>;
     };
     /**
      * Converts the input into a readonly disabled field
@@ -55,7 +55,14 @@ declare const _default: import("vue").DefineComponent<{
     hint: {
         type: StringConstructor;
     };
+    /**
+     * The autocomplete input attribute
+     */
+    autocomplete: {
+        type: StringConstructor;
+    };
 }, {
+    inputBaseClass: import("vue").Ref<string>;
     inputValue: import("vue").WritableComputedRef<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<{
     /**
@@ -94,10 +101,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     /**
-     * Validation rules. Accepts a string, object, function or schema.
+     * Validation rules. Accepts an object, string schema or validation function.
      */
     rules: {
-        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+        type: PropType<string | Record<string, unknown> | (() => boolean) | undefined>;
     };
     /**
      * Converts the input into a readonly disabled field
@@ -112,6 +119,12 @@ declare const _default: import("vue").DefineComponent<{
     hint: {
         type: StringConstructor;
     };
+    /**
+     * The autocomplete input attribute
+     */
+    autocomplete: {
+        type: StringConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {

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

@@ -1,14 +1,11 @@
-export declare enum FwInputType {
-    text = "text",
-    password = "password"
-}
+export declare type FwInputType = 'text' | 'password';
 export declare interface FwInputProps {
     value: string;
     name: string;
     type?: FwInputType;
     label?: string;
     placeholder?: string;
-    rules?: string | object | Function;
+    rules?: string | Record<string, unknown> | (() => boolean);
     readonly?: boolean;
     hint?: string;
 }

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

@@ -16,6 +16,7 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
     };
 }, {
+    mobileMenuClass: import("vue").Ref<string>;
     isMobileMenuOpen: import("vue").Ref<boolean>;
     toggleMobileMenu: () => boolean;
     actionClicked: () => void;

package/types/services/modal.d.ts

@@ -3,7 +3,7 @@ export declare interface ModalServiceProps extends FwModalProps {
     onConfirm?: () => void;
     onCancel?: () => void;
 }
-export declare const modalService: (options?: ModalServiceProps | undefined, element?: HTMLDivElement | undefined) => {
+export declare const modalService: (options?: ModalServiceProps, element?: HTMLDivElement) => {
     open: () => void;
     close: () => void;
 };