@frollo/frollo-web-ui 1.2.9 → 3.0.0

package/icons/bullseye.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 26 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.045 2.129C14.99 2.182 14.93 2.2365 14.875 2.292C14.205 2.166 13.51 2.1 12.8 2.1C6.615 2.1 1.6 7.115 1.6 13.3C1.6 19.485 6.615 24.5 12.8 24.5C18.985 24.5 24 19.485 24 13.3C24 12.59 23.935 11.895 23.81 11.225C23.865 11.17 23.92 11.11 23.97 11.055L25.11 9.785C25.43 10.9 25.6 12.08 25.6 13.3C25.6 20.37 19.87 26.1 12.8 26.1C5.73 26.1 0 20.37 0 13.3C0 6.23 5.73 0.5 12.8 0.5C14.02 0.5 15.155 0.6703 16.315 0.9884L15.045 2.129ZM13.775 5.76L13.985 7.01C13.6 6.94 13.205 6.855 12.755 6.855C9.265 6.855 6.355 9.765 6.355 13.255C6.355 16.835 9.265 19.7 12.755 19.7C16.335 19.7 19.2 16.835 19.2 13.255C19.2 12.895 19.16 12.455 19.09 12.115L20.34 12.325C20.475 12.345 20.61 12.36 20.745 12.37C20.78 12.675 20.8 12.985 20.8 13.255C20.8 17.72 17.22 21.3 12.8 21.3C8.38 21.3 4.8 17.72 4.8 13.255C4.8 8.88 8.38 5.255 12.8 5.255C13.115 5.255 13.425 5.318 13.73 5.3535C13.74 5.489 13.755 5.625 13.775 5.76ZM17.075 10.155L13.365 13.865C13.055 14.18 12.545 14.18 12.235 13.865C11.92 13.555 11.92 13.045 12.235 12.735L15.945 9.025L15.355 5.505C15.22 4.6895 15.51 3.863 16.13 3.315L18.555 1.1185C19.255 0.53592 20.295 0.83055 20.545 1.671L21.44 4.6575L24.43 5.555C25.27 5.805 25.565 6.845 24.98 7.5L22.785 9.97C22.235 10.59 21.41 10.88 20.595 10.745L17.075 10.155ZM18.465 8.765L20.86 9.165C21.13 9.21 21.405 9.115 21.59 8.91L23.37 6.905L21.03 6.205L18.465 8.765ZM19.895 5.072L19.195 2.731L17.19 4.511C16.985 4.6935 16.89 4.969 16.935 5.24L17.335 7.635L19.895 5.072Z" />
+</svg>

package/icons/icons.stories.ts

@@ -10,12 +10,12 @@ const Template = () => ({
   components: { FwCard },
   template: `
   <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 w-full items-center">
-    <FwCard v-for="icon, i in icons" :key="i">
+    <div class="p-6 border-grey-20 border" v-for="icon, i in icons" :key="i">
       <div class="flex flex-col items-center justify-center space-y-3">
-        <component :is="icon" class="w-16 h-16 text-primary" />
+        <component :is="icon" class="w-10 h-10 text-body" />
         <span class="text-sm capitalize font-medium">{{ extractFilename(icon.__file) }}</span>
       </div>
-    </FwCard>
+    </div>
   </div>`,
   setup() {
     const extractFilename = (path: string) => {

package/icons/index.ts

@@ -25,6 +25,9 @@ import SortLightSvg from './sort-light.svg';
 import PlusSvg from './plus.svg';
 import UserSvg from './user.svg';
 import LoadingSvg from './loading.svg';
+import BullseyeSvg from './bullseye.svg';
+import SolidCheckSvg from './solid-check.svg';
+import SolidXMarkSvg from './solid-xmark.svg';
 
 export {
   ViewSvg,
@@ -53,5 +56,8 @@ export {
   SortLightSvg,
   PlusSvg,
   UserSvg,
-  LoadingSvg
+  LoadingSvg,
+  BullseyeSvg,
+  SolidCheckSvg,
+  SolidXMarkSvg
 };

package/icons/solid-check.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 12C0 5.37188 5.37188 0 12 0C18.6281 0 24 5.37188 24 12C24 18.6281 18.6281 24 12 24C5.37188 24 0 18.6281 0 12ZM17.4281 9.92813C17.9391 9.41719 17.9391 8.58281 17.4281 8.07187C16.9172 7.56094 16.0828 7.56094 15.5719 8.07187L10.5 13.1437L8.42813 11.0719C7.91719 10.5609 7.08281 10.5609 6.57187 11.0719C6.06094 11.5828 6.06094 12.4172 6.57187 12.9281L9.57187 15.9281C10.0828 16.4391 10.9172 16.4391 11.4281 15.9281L17.4281 9.92813Z" />
+</svg>

package/icons/solid-xmark.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 12C0 5.37188 5.37188 0 12 0C18.6281 0 24 5.37188 24 12C24 18.6281 18.6281 24 12 24C5.37188 24 0 18.6281 0 12ZM8.20312 9.75469L10.4109 11.9578L8.20312 14.2031C7.76719 14.6438 7.76719 15.3563 8.20312 15.7547C8.64375 16.2328 9.35625 16.2328 9.75469 15.7547L11.9578 13.5891L14.2031 15.7547C14.6438 16.2328 15.3563 16.2328 15.7547 15.7547C16.2328 15.3563 16.2328 14.6438 15.7547 14.2031L13.5891 11.9578L15.7547 9.75469C16.2328 9.35625 16.2328 8.64375 15.7547 8.20312C15.3563 7.76719 14.6438 7.76719 14.2031 8.20312L11.9578 10.4109L9.75469 8.20312C9.35625 7.76719 8.64375 7.76719 8.20312 8.20312C7.76719 8.64375 7.76719 9.35625 8.20312 9.75469Z" />
+</svg>

package/index.d.ts

@@ -18,7 +18,7 @@ declare interface FwInputProps {
     tabindex?: string;
 }
 
-declare const _default$j: vue.DefineComponent<{
+declare const _default$l: vue.DefineComponent<{
     /**
      * The input v-model
      */
@@ -169,7 +169,7 @@ declare const _default$j: vue.DefineComponent<{
     tabindex: string;
 }>;
 
-declare const _default$i: vue.DefineComponent<{
+declare const _default$k: vue.DefineComponent<{
     /**
      * The name of the input field. Must be unique per form.
      */
@@ -236,7 +236,7 @@ declare interface FwDropdownProps {
     placeholder?: string;
 }
 
-declare const _default$h: vue.DefineComponent<{
+declare const _default$j: vue.DefineComponent<{
     /**
      * The select v-model
      */
@@ -347,7 +347,7 @@ declare const _default$h: vue.DefineComponent<{
     placeholder: string;
 }>;
 
-declare const _default$g: vue.DefineComponent<{
+declare const _default$i: vue.DefineComponent<{
     /**
      * The header title of the card
      */
@@ -456,7 +456,7 @@ declare interface FwButtonProps {
     external?: boolean;
 }
 
-declare const _default$f: vue.DefineComponent<{
+declare const _default$h: vue.DefineComponent<{
     /**
      * A `router-link` path or object
      */
@@ -637,7 +637,7 @@ declare interface NavMenuItem {
     external?: boolean;
 }
 
-declare const _default$e: vue.DefineComponent<{
+declare const _default$g: vue.DefineComponent<{
     /**
      * An array of menu items
      * `{ to?: string | object; href?: string; label: string; }`
@@ -692,7 +692,7 @@ declare const _default$e: vue.DefineComponent<{
     containerClass: string;
 }>;
 
-declare const _default$d: vue.DefineComponent<{
+declare const _default$f: vue.DefineComponent<{
     /**
      * The active tab v-model
      */
@@ -716,7 +716,7 @@ declare const _default$d: vue.DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}>;
 
-declare const _default$c: vue.DefineComponent<{
+declare const _default$e: vue.DefineComponent<{
     /**
      * The label of the tab component used as the button panel label
      */
@@ -748,13 +748,26 @@ declare const _default$c: vue.DefineComponent<{
     };
 }>>, {}>;
 
-declare const _default$b: vue.DefineComponent<{
+declare const _default$d: vue.DefineComponent<{
+    /**
+     * The modal's v-model. Controls the visibility of the modal.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+    };
     /**
      * The header title of the modal
      */
     header: {
         type: StringConstructor;
     };
+    /**
+     * The element to attach the modal too. Defaults to `#app` element.
+     */
+    element: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * The body description of the modal
      */
@@ -813,14 +826,29 @@ declare const _default$b: vue.DefineComponent<{
         validator: (value: string) => boolean;
     };
 }, {
+    isOpen: vue.ComputedRef<boolean>;
     uuid: string;
+    isMounted: vue.Ref<boolean>;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("cancel" | "confirm")[], "cancel" | "confirm", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The modal's v-model. Controls the visibility of the modal.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+    };
     /**
      * The header title of the modal
      */
     header: {
         type: StringConstructor;
     };
+    /**
+     * The element to attach the modal too. Defaults to `#app` element.
+     */
+    element: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * The body description of the modal
      */
@@ -882,6 +910,8 @@ declare const _default$b: vue.DefineComponent<{
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
+    modelValue: boolean;
+    element: string;
     role: string;
     showCancel: boolean;
     showConfirm: boolean;
@@ -897,7 +927,7 @@ declare interface ProgressBarStep {
     subSteps: number;
 }
 
-declare const _default$a: vue.DefineComponent<{
+declare const _default$c: vue.DefineComponent<{
     /**
      * An array of menu progress steps.
      * `{ label: string; position: number; subSteps: number; }`
@@ -964,7 +994,7 @@ declare interface FwTagProps {
     variant?: TagVariantName;
 }
 
-declare const _default$9: vue.DefineComponent<{
+declare const _default$b: vue.DefineComponent<{
     /**
      * The size of the tag. Accepts: 'xs' & 'sm'
      */
@@ -1024,7 +1054,7 @@ declare interface FwTableProps {
     loading?: boolean;
 }
 
-declare const _default$8: vue.DefineComponent<{
+declare const _default$a: vue.DefineComponent<{
     items: {
         type: PropType<FwTableItem[]>;
         required: true;
@@ -1065,11 +1095,11 @@ declare const _default$8: vue.DefineComponent<{
     loading: boolean;
 }>;
 
-declare const _default$7: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+declare const _default$9: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
 
-declare const _default$6: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+declare const _default$8: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
 
-declare const _default$5: vue.DefineComponent<{
+declare const _default$7: vue.DefineComponent<{
     /**
      * The header title of the accordion
      */
@@ -1117,7 +1147,7 @@ declare const _default$5: vue.DefineComponent<{
     isOpened: boolean;
 }>;
 
-declare const _default$4: vue.DefineComponent<{
+declare const _default$6: vue.DefineComponent<{
     /**
      * The src attribute of the image
      */
@@ -1200,11 +1230,11 @@ declare const _default$4: vue.DefineComponent<{
     threshold: number;
 }>;
 
-declare const _default$3: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+declare const _default$5: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
 
-declare const _default$2: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+declare const _default$4: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
 
-declare const _default$1: vue.DefineComponent<{
+declare const _default$3: vue.DefineComponent<{
     columns: {
         type: NumberConstructor;
         default: number;
@@ -1229,6 +1259,197 @@ declare const _default$1: vue.DefineComponent<{
     rows: number;
 }>;
 
+declare type ToastType = 'success' | 'error' | 'warning';
+declare type ToastTypes = {
+    [key in ToastType]: string;
+};
+declare type ToastPosition = 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+declare interface FwToastProps {
+    modelValue: boolean;
+    type?: ToastType;
+    position?: ToastPosition;
+    content?: string;
+    element?: string;
+    timeout?: number;
+}
+
+declare const _default$2: vue.DefineComponent<{
+    /**
+     * The toast's v-model. Controls the visibility of the toast.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+    };
+    /**
+     * The type of the toast.
+     * Accepts: 'success', 'error', 'warning'
+     */
+    type: {
+        type: PropType<ToastType>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The position of the toast on the screen.
+     * Accepts: 'top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'
+     */
+    position: {
+        type: PropType<ToastPosition>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The content of the toast.
+     */
+    content: {
+        type: StringConstructor;
+    };
+    /**
+     * The base container to attach to. Defaults to `#app` element.
+     */
+    element: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The duration timeout before the toast is dismissed.
+     */
+    timeout: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    containerEl: vue.ComputedRef<string>;
+    baseClass: string;
+    typeClasses: vue.Ref<{
+        success: string;
+        error: string;
+        warning: string;
+    }>;
+    svgComponent: vue.Ref<{
+        success: string;
+        error: string;
+        warning: string;
+    }>;
+    isOpen: vue.WritableComputedRef<vue.Ref<boolean>>;
+    uuid: string;
+    isMounted: vue.Ref<boolean>;
+    mountContainer: vue.Ref<boolean>;
+    isLeftRightorCenter: vue.ComputedRef<"Right" | "Left" | "Center">;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "dismissed")[], "update:modelValue" | "dismissed", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The toast's v-model. Controls the visibility of the toast.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+    };
+    /**
+     * The type of the toast.
+     * Accepts: 'success', 'error', 'warning'
+     */
+    type: {
+        type: PropType<ToastType>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The position of the toast on the screen.
+     * Accepts: 'top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'
+     */
+    position: {
+        type: PropType<ToastPosition>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * The content of the toast.
+     */
+    content: {
+        type: StringConstructor;
+    };
+    /**
+     * The base container to attach to. Defaults to `#app` element.
+     */
+    element: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The duration timeout before the toast is dismissed.
+     */
+    timeout: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onDismissed?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: boolean;
+    type: ToastType;
+    position: ToastPosition;
+    element: string;
+    timeout: number;
+}>;
+
+declare const _default$1: vue.DefineComponent<{
+    /**
+     * The transaction title of the card
+     */
+    title: {
+        type: StringConstructor;
+    };
+    /**
+     * The transaction sub-title of the card
+     */
+    subTitle: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The transaction amount.
+     */
+    amount: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The src url for the image.
+     */
+    imageUrl: {
+        type: StringConstructor;
+        required: false;
+    };
+}, unknown, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The transaction title of the card
+     */
+    title: {
+        type: StringConstructor;
+    };
+    /**
+     * The transaction sub-title of the card
+     */
+    subTitle: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The transaction amount.
+     */
+    amount: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The src url for the image.
+     */
+    imageUrl: {
+        type: StringConstructor;
+        required: false;
+    };
+}>>, {}>;
+
 declare const __default__$1: vue.DefineComponent<{
     /**
      * The animation-iteration-count CSS property of the pulse animation.
@@ -1280,7 +1501,9 @@ declare const __default__: vue.DefineComponent<{
 declare const _default: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
 
 declare interface FwModalProps {
+    modelValue: boolean;
     header?: string;
+    element?: string;
     body?: string;
     role?: string;
     showCancel?: boolean;
@@ -1291,15 +1514,24 @@ declare interface FwModalProps {
     confirmButtonType?: ButtonVariantName;
 }
 
-declare interface ModalServiceProps extends FwModalProps {
+declare interface ModalServiceProps extends Omit<FwModalProps, 'modelValue'> {
     onConfirm?: () => void;
     onCancel?: () => void;
 }
-declare const modalService: (options?: ModalServiceProps, element?: HTMLDivElement) => {
+declare const modalService: (options?: ModalServiceProps) => {
     open: () => void;
     close: () => void;
 };
 
+declare interface ToastServiceProps extends Omit<FwToastProps, 'modelValue' | 'type'> {
+    onDismissed?: () => void;
+}
+declare const toastService: () => {
+    success: (options?: ToastServiceProps) => void;
+    error: (options?: ToastServiceProps) => void;
+    warning: (options?: ToastServiceProps) => void;
+};
+
 declare const install: Exclude<Plugin['install'], undefined>;
 
 declare interface FwCardProps {
@@ -1333,6 +1565,13 @@ declare interface FwImageProps {
     threshold?: number;
 }
 
+declare interface FwTransactionsCardProps {
+    title: string;
+    subTitle?: string;
+    imageUrl?: string;
+    amount?: string;
+}
+
 declare module '@frollo/frollo-web-ui/icons' { }
 
-export { ButtonAnimation, ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, _default$5 as FwAccordion, FwAccordionProps, _default$f as FwButton, FwButtonProps, _default$g as FwCard, FwCardProps, _default$i as FwCheckbox, FwCheckboxProps, _default$h as FwDropdown, FwDropdownOption, FwDropdownProps, __default__$1 as FwEmailPulse, _default$4 as FwImage, FwImageProps, _default$j as FwInput, FwInputProps, FwInputType, _default$3 as FwLoadingBar, _default$2 as FwLoadingCard, _default as FwLoadingSpinner, _default$1 as FwLoadingTable, _default$b as FwModal, FwModalProps, _default$e as FwNavigationMenu, _default$a as FwProgressBar, __default__ as FwSuccessPulse, _default$c as FwTab, _default$8 as FwTable, FwTableFormatFunction, _default$7 as FwTableHead, FwTableItem, FwTableItemOptions, FwTableProps, _default$6 as FwTableRow, FwTableSort, _default$d as FwTabs, _default$9 as FwTag, FwTagProps, ModalServiceProps, NavMenuItem, ProgressBarStep, TagDefinition, TagDefinitionList, TagSize, TagSizes, TagVariantName, install as default, modalService };
+export { ButtonAnimation, ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, _default$7 as FwAccordion, FwAccordionProps, _default$h as FwButton, FwButtonProps, _default$i as FwCard, FwCardProps, _default$k as FwCheckbox, FwCheckboxProps, _default$j as FwDropdown, FwDropdownOption, FwDropdownProps, __default__$1 as FwEmailPulse, _default$6 as FwImage, FwImageProps, _default$l as FwInput, FwInputProps, FwInputType, _default$5 as FwLoadingBar, _default$4 as FwLoadingCard, _default as FwLoadingSpinner, _default$3 as FwLoadingTable, _default$d as FwModal, FwModalProps, _default$g as FwNavigationMenu, _default$c as FwProgressBar, __default__ as FwSuccessPulse, _default$e as FwTab, _default$a as FwTable, FwTableFormatFunction, _default$9 as FwTableHead, FwTableItem, FwTableItemOptions, FwTableProps, _default$8 as FwTableRow, FwTableSort, _default$f as FwTabs, _default$b as FwTag, FwTagProps, _default$2 as FwToast, FwToastProps, _default$1 as FwTransactionsCard, FwTransactionsCardProps, ModalServiceProps, NavMenuItem, ProgressBarStep, TagDefinition, TagDefinitionList, TagSize, TagSizes, TagVariantName, ToastPosition, ToastServiceProps, ToastType, ToastTypes, install as default, modalService, toastService };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "1.2.9",
+  "version": "3.0.0",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",
@@ -86,6 +86,7 @@
     "vue-loader": "^16.8.3",
     "vue-style-loader": "^4.1.3",
     "vue-svg-loader": "^0.17.0-beta.2",
+    "vue3-webcomponent-wrapper": "^0.2.0",
     "yup": "^0.32.11"
   },
   "homepage": "https://github.com/frollous/frollo-web-ui#readme",

package/styles/web-components.scss

@@ -0,0 +1,8 @@
+@import './tailwind.scss';
+
+body {
+  font-family: var(--fontFamily);
+  @apply text-base text-body;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

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

@@ -1,12 +1,25 @@
 import { PropType } from 'vue';
 import { ButtonVariantName } from '../fw-button/index.types';
 declare const _default: import("vue").DefineComponent<{
+    /**
+     * The modal's v-model. Controls the visibility of the modal.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+    };
     /**
      * The header title of the modal
      */
     header: {
         type: StringConstructor;
     };
+    /**
+     * The element to attach the modal too. Defaults to `#app` element.
+     */
+    element: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * The body description of the modal
      */
@@ -65,14 +78,29 @@ declare const _default: import("vue").DefineComponent<{
         validator: (value: string) => boolean;
     };
 }, {
+    isOpen: import("vue").ComputedRef<boolean>;
     uuid: string;
+    isMounted: import("vue").Ref<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "confirm")[], "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The modal's v-model. Controls the visibility of the modal.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+    };
     /**
      * The header title of the modal
      */
     header: {
         type: StringConstructor;
     };
+    /**
+     * The element to attach the modal too. Defaults to `#app` element.
+     */
+    element: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * The body description of the modal
      */
@@ -134,6 +162,8 @@ declare const _default: import("vue").DefineComponent<{
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
+    modelValue: boolean;
+    element: string;
     role: string;
     showCancel: boolean;
     showConfirm: boolean;

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

@@ -1,6 +1,8 @@
 import { ButtonVariantName } from '../fw-button/index.types';
 export declare interface FwModalProps {
+    modelValue: boolean;
     header?: string;
+    element?: string;
     body?: string;
     role?: string;
     showCancel?: boolean;