@frollo/frollo-web-ui 0.0.21 → 0.0.22

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;
     };
@@ -89,7 +93,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 +133,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 +192,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
      */
@@ -244,8 +242,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 +264,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
      */
@@ -360,12 +367,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; }`
@@ -403,7 +411,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 +435,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 +456,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 | undefined, element?: HTMLDivElement | undefined) => {
+    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.0.22",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",
@@ -50,6 +50,7 @@
     "@storybook/manager-webpack5": "^6.4.19",
     "@storybook/vue3": "^6.4.19",
     "@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-typescript": "^10.0.0",
@@ -64,6 +65,7 @@
     "eslint": "^8.9.0",
     "eslint-plugin-vue": "^8.4.1",
     "jest": "^27.5.1",
+    "lodash-es": "^4.17.21",
     "rimraf": "^3.0.2",
     "rollup": "^2.67.2",
     "rollup-plugin-dts": "^4.1.0",
@@ -72,7 +74,7 @@
     "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",

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

@@ -25,8 +25,8 @@ 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) { ... }

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

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

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

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

@@ -1,9 +1,3 @@
-export interface FwCheckboxProps {
-    name: string;
-    label?: string;
-    rules?: string | object | Function;
-    hint?: string;
-}
 declare const _default: import("vue").DefineComponent<{
     /**
      * The name of the input field. Must be unique per form.

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

@@ -0,0 +1,6 @@
+export declare interface FwCheckboxProps {
+    name: string;
+    label?: string;
+    rules?: string | object | Function;
+    hint?: string;
+}

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

@@ -1,15 +1,5 @@
 import { PropType } from 'vue';
-export declare type InputType = 'text' | 'password';
-export interface FwInputProps {
-    value: string;
-    name: string;
-    type?: InputType;
-    label?: string;
-    placeholder?: string;
-    rules?: string | object | Function;
-    readonly?: boolean;
-    hint?: string;
-}
+import { FwInputType } from './index.types';
 declare const _default: import("vue").DefineComponent<{
     /**
      * The input v-model
@@ -29,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
      * The input type. Accepts `text` | `password`
      */
     type: {
-        type: PropType<InputType>;
+        type: PropType<FwInputType>;
         default: string;
         validator: (value: string) => boolean;
     };
@@ -86,7 +76,7 @@ declare const _default: import("vue").DefineComponent<{
      * The input type. Accepts `text` | `password`
      */
     type: {
-        type: PropType<InputType>;
+        type: PropType<FwInputType>;
         default: string;
         validator: (value: string) => boolean;
     };
@@ -126,7 +116,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string;
-    type: InputType;
+    type: FwInputType;
     placeholder: string;
     readonly: boolean;
 }>;

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

@@ -0,0 +1,14 @@
+export declare enum FwInputType {
+    text = "text",
+    password = "password"
+}
+export declare interface FwInputProps {
+    value: string;
+    name: string;
+    type?: FwInputType;
+    label?: string;
+    placeholder?: string;
+    rules?: string | object | Function;
+    readonly?: boolean;
+    hint?: string;
+}