@frollo/frollo-web-ui 0.0.21 → 0.1.1

package/index.d.ts

@@ -2,18 +2,22 @@ import * as vue from 'vue';
 import { PropType, Plugin } from 'vue';
 export { Form as FwForm } from 'vee-validate';
 
-declare type InputType = 'text' | 'password';
-interface FwInputProps {
+declare enum FwInputType {
+    text = "text",
+    password = "password"
+}
+declare interface FwInputProps {
     value: string;
     name: string;
-    type?: InputType;
+    type?: FwInputType;
     label?: string;
     placeholder?: string;
     rules?: string | object | Function;
     readonly?: boolean;
     hint?: string;
-}
-declare const _default$6: vue.DefineComponent<{
+}
+
+declare const _default$7: vue.DefineComponent<{
     /**
      * The input v-model
      */
@@ -32,7 +36,7 @@ declare const _default$6: vue.DefineComponent<{
      * The input type. Accepts `text` | `password`
      */
     type: {
-        type: PropType<InputType>;
+        type: PropType<FwInputType>;
         default: string;
         validator: (value: string) => boolean;
     };
@@ -69,6 +73,7 @@ declare const _default$6: vue.DefineComponent<{
         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<{
     /**
@@ -89,7 +94,7 @@ declare const _default$6: vue.DefineComponent<{
      * The input type. Accepts `text` | `password`
      */
     type: {
-        type: PropType<InputType>;
+        type: PropType<FwInputType>;
         default: string;
         validator: (value: string) => boolean;
     };
@@ -129,18 +134,12 @@ declare const _default$6: vue.DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string;
-    type: InputType;
+    type: FwInputType;
     placeholder: string;
     readonly: boolean;
 }>;
 
-interface FwCheckboxProps {
-    name: string;
-    label?: string;
-    rules?: string | object | Function;
-    hint?: string;
-}
-declare const _default$5: vue.DefineComponent<{
+declare const _default$6: vue.DefineComponent<{
     /**
      * The name of the input field. Must be unique per form.
      */
@@ -194,7 +193,7 @@ declare const _default$5: vue.DefineComponent<{
     };
 }>>, {}>;
 
-declare const _default$4: vue.DefineComponent<{
+declare const _default$5: vue.DefineComponent<{
     /**
      * The header title of the card
      */
@@ -219,6 +218,7 @@ declare const _default$4: 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
@@ -244,8 +244,16 @@ declare const _default$4: vue.DefineComponent<{
     href: StringConstructor;
 }>>, {}>;
 
-declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'text' | 'link';
-interface ButtonDefinition {
+declare enum ButtonVariantName {
+    primary = "primary",
+    secondary = "secondary",
+    tertiary = "tertiary",
+    error = "error",
+    success = "success",
+    text = "text",
+    link = "link"
+}
+declare interface ButtonDefinition {
     text: string;
     background: string;
     border: string;
@@ -258,14 +266,15 @@ declare type ButtonSizes = {
     [key in ButtonSize]: string;
 };
 declare type ButtonTypeAttribute = 'button' | 'submit' | 'reset';
-interface FwButtonProps {
+declare interface FwButtonProps {
     to?: string | object;
     href?: string;
     size?: ButtonSize;
     variant?: ButtonVariantName;
     buttonType?: ButtonTypeAttribute;
-}
-declare const _default$3: vue.DefineComponent<{
+}
+
+declare const _default$4: vue.DefineComponent<{
     /**
      * A `router-link` path or object
      */
@@ -302,6 +311,7 @@ declare const _default$3: vue.DefineComponent<{
         validator: (value: string) => boolean;
     };
 }, {
+    baseClass: vue.Ref<string>;
     textColorClass: vue.ComputedRef<string>;
     bgColorClass: vue.ComputedRef<string>;
     sizeClass: vue.ComputedRef<string>;
@@ -360,12 +370,13 @@ declare const _default$3: vue.DefineComponent<{
     buttonType: ButtonTypeAttribute;
 }>;
 
-interface NavMenuItem {
+declare interface NavMenuItem {
     to?: string | object;
     href?: string;
     label: string;
-}
-declare const _default$2: vue.DefineComponent<{
+}
+
+declare const _default$3: vue.DefineComponent<{
     /**
      * An array of menu items
      * `{ to?: string | object; href?: string; label: string; }`
@@ -381,6 +392,7 @@ declare const _default$2: vue.DefineComponent<{
         type: StringConstructor;
     };
 }, {
+    mobileMenuClass: vue.Ref<string>;
     isMobileMenuOpen: vue.Ref<boolean>;
     toggleMobileMenu: () => boolean;
     actionClicked: () => void;
@@ -403,7 +415,7 @@ declare const _default$2: vue.DefineComponent<{
     onAction?: ((...args: any[]) => any) | undefined;
 }, {}>;
 
-declare const _default$1: vue.DefineComponent<{
+declare const _default$2: vue.DefineComponent<{
     /**
      * The active tab v-model
      */
@@ -427,7 +439,7 @@ declare const _default$1: vue.DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}>;
 
-declare const _default: vue.DefineComponent<{
+declare const _default$1: vue.DefineComponent<{
     /**
      * The label of the tab component used as the button panel label
      */
@@ -448,8 +460,186 @@ declare const _default: vue.DefineComponent<{
     };
 }>>, {}>;
 
+declare const _default: vue.DefineComponent<{
+    /**
+     * The header title of the modal
+     */
+    header: {
+        type: StringConstructor;
+    };
+    /**
+     * The body description of the modal
+     */
+    body: {
+        type: StringConstructor;
+    };
+    /**
+     * The aria role of the modal container. Defaults to `dialog`
+     */
+    role: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Whether to show the cancel button
+     */
+    showCancel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether to show the confirm button
+     */
+    showConfirm: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Custom text for the cancel button
+     */
+    cancelButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Button variant for the cancel button
+     */
+    cancelButtonType: {
+        type: PropType<ButtonVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Custom text for the confirm button
+     */
+    confirmButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Button variant for the confirm button
+     */
+    confirmButtonType: {
+        type: PropType<ButtonVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}, {
+    uuid: string;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("cancel" | "confirm")[], "cancel" | "confirm", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The header title of the modal
+     */
+    header: {
+        type: StringConstructor;
+    };
+    /**
+     * The body description of the modal
+     */
+    body: {
+        type: StringConstructor;
+    };
+    /**
+     * The aria role of the modal container. Defaults to `dialog`
+     */
+    role: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Whether to show the cancel button
+     */
+    showCancel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether to show the confirm button
+     */
+    showConfirm: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Custom text for the cancel button
+     */
+    cancelButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Button variant for the cancel button
+     */
+    cancelButtonType: {
+        type: PropType<ButtonVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Custom text for the confirm button
+     */
+    confirmButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Button variant for the confirm button
+     */
+    confirmButtonType: {
+        type: PropType<ButtonVariantName>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>> & {
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}, {
+    role: string;
+    showCancel: boolean;
+    showConfirm: boolean;
+    cancelButtonText: string;
+    cancelButtonType: ButtonVariantName;
+    confirmButtonText: string;
+    confirmButtonType: ButtonVariantName;
+}>;
+
+declare interface FwModalProps {
+    header?: string;
+    body?: string;
+    role?: string;
+    showCancel?: boolean;
+    showConfirm?: boolean;
+    cancelButtonText?: string;
+    cancelButtonType?: ButtonVariantName;
+    confirmButtonText?: string;
+    confirmButtonType?: ButtonVariantName;
+}
+
+declare interface ModalServiceProps extends FwModalProps {
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}
+declare const modalService: (options?: ModalServiceProps, element?: HTMLDivElement) => {
+    open: () => void;
+    close: () => void;
+};
+
 declare const install: Exclude<Plugin['install'], undefined>;
 
+declare interface FwCardProps {
+    title?: string;
+    prefixTitle?: string;
+    to?: string | object;
+    href?: string;
+}
+
+declare interface FwCheckboxProps {
+    name: string;
+    label?: string;
+    rules?: string | object | Function;
+    hint?: string;
+}
+
 declare module '@frollo/frollo-web-ui/icons' { }
 
-export { ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, _default$3 as FwButton, FwButtonProps, _default$4 as FwCard, _default$5 as FwCheckbox, FwCheckboxProps, _default$6 as FwInput, FwInputProps, _default$2 as FwNavigationMenu, _default as FwTab, _default$1 as FwTabs, InputType, NavMenuItem, install as default };
+export { ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, _default$4 as FwButton, FwButtonProps, _default$5 as FwCard, FwCardProps, _default$6 as FwCheckbox, FwCheckboxProps, _default$7 as FwInput, FwInputProps, FwInputType, _default as FwModal, FwModalProps, _default$3 as FwNavigationMenu, _default$1 as FwTab, _default$2 as FwTabs, ModalServiceProps, NavMenuItem, install as default, modalService };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "0.0.21",
+  "version": "0.1.1",
   "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,30 +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",
+    "@vue/vue3-jest": "^28.0.0",
     "autoprefixer": "^10.4.2",
     "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",
@@ -72,10 +77,10 @@
     "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.49.7",
     "sass-loader": "^12.6.0",
-    "tailwind-config-viewer": "^1.6.3",
+    "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/styles/tailwind.scss

@@ -0,0 +1,58 @@
+/* Tailwind */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 
+* Default theme variables - Frollo branding
+*/
+:root {
+  --colorPrimary: #6923ff;
+  --colorSecondary: #000;
+  --colorTertiary: #fff;
+
+  --fontFamily: 'Montserrat';
+}
+/* 
+* Default font family
+*/
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,500&display=swap');
+
+/** Typography */
+
+@layer base {
+  p {
+    @apply text-lg font-normal mb-1;
+  }
+
+  .p2 {
+    @apply text-base;
+  }
+  
+  .p-small {
+    @apply text-sm;
+  }
+
+  h1, .h1 {
+    @apply text-2xl font-bold mb-1 lg:text-3xl;
+  }
+
+  h2, .h2 {
+    @apply text-2xl font-bold mb-1;
+  }
+
+  h3, .h3 {
+    @apply text-xl font-bold mb-1;
+  }
+
+  h4, .h4 {
+    @apply text-lg font-bold mb-1;
+  }
+
+  h5, .h5 {
+    @apply text-base font-bold mb-1;
+  }
+  h6, .h6 {
+    @apply text-base font-bold mb-1;
+  }
+}

package/styles/transitions.scss

@@ -0,0 +1,20 @@
+$fade-in-animation-duration: 0.35s;
+
+.fadeIn-enter-active {
+  animation: fadeIn $fade-in-animation-duration;
+  transition: opacity $fade-in-animation-duration ease-in;
+}
+.fadeIn-leave-active {
+  animation: fadeIn $fade-in-animation-duration reverse;
+  transition: opacity $fade-in-animation-duration ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/styles/typography.scss

@@ -0,0 +1,38 @@
+/** Typography */
+
+@layer base {
+  p {
+    @apply text-lg font-normal mb-1;
+  }
+
+  .p2 {
+    @apply text-base;
+  }
+  
+  .p-small {
+    @apply text-sm;
+  }
+
+  h1, .h1 {
+    @apply text-2xl font-bold mb-1 lg:text-3xl;
+  }
+
+  h2, .h2 {
+    @apply text-2xl font-bold mb-1;
+  }
+
+  h3, .h3 {
+    @apply text-xl font-bold mb-1;
+  }
+
+  h4, .h4 {
+    @apply text-lg font-bold mb-1;
+  }
+
+  h5, .h5 {
+    @apply text-base font-bold mb-1;
+  }
+  h6, .h6 {
+    @apply text-base font-bold mb-1;
+  }
+}

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',
@@ -25,24 +25,24 @@ module.exports = {
       base: ['16px', '1.5'],
       lg: ['18px', '1.5'],
       xl: ['22px', '1.5'],
-      '2xl': ['26px', '1.5'],
-      '3xl': ['42px', '1.5']
+      '2xl': ['26px', '1.3'],
+      '3xl': ['42px', '1.2']
     },
     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

@@ -1,25 +1,5 @@
 import { PropType } from 'vue';
-export declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'text' | 'link';
-export interface ButtonDefinition {
-    text: string;
-    background: string;
-    border: string;
-}
-export declare type ButtonDefinitionList = {
-    [key in ButtonVariantName]: ButtonDefinition;
-};
-export declare type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-export declare type ButtonSizes = {
-    [key in ButtonSize]: string;
-};
-export declare type ButtonTypeAttribute = 'button' | 'submit' | 'reset';
-export interface FwButtonProps {
-    to?: string | object;
-    href?: string;
-    size?: ButtonSize;
-    variant?: ButtonVariantName;
-    buttonType?: ButtonTypeAttribute;
-}
+import { ButtonSize, ButtonVariantName, ButtonTypeAttribute } from './index.types';
 declare const _default: import("vue").DefineComponent<{
     /**
      * A `router-link` path or object
@@ -57,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

@@ -0,0 +1,29 @@
+export declare enum ButtonVariantName {
+    primary = "primary",
+    secondary = "secondary",
+    tertiary = "tertiary",
+    error = "error",
+    success = "success",
+    text = "text",
+    link = "link"
+}
+export declare interface ButtonDefinition {
+    text: string;
+    background: string;
+    border: string;
+}
+export declare type ButtonDefinitionList = {
+    [key in ButtonVariantName]: ButtonDefinition;
+};
+export declare type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export declare type ButtonSizes = {
+    [key in ButtonSize]: string;
+};
+export declare type ButtonTypeAttribute = 'button' | 'submit' | 'reset';
+export declare interface FwButtonProps {
+    to?: string | object;
+    href?: string;
+    size?: ButtonSize;
+    variant?: ButtonVariantName;
+    buttonType?: ButtonTypeAttribute;
+}

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-card/index.types.d.ts

@@ -0,0 +1,6 @@
+export declare interface FwCardProps {
+    title?: string;
+    prefixTitle?: string;
+    to?: string | object;
+    href?: string;
+}