@frollo/frollo-web-ui 0.0.16 → 0.0.19

package/icons/envelope.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 56 56" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path
+    d="M49 7H7C3.13359 7 0 10.1336 0 14V42C0 45.8664 3.13359 49 7 49H49C52.8664 49 56 45.8664 56 42V14C56 10.1336 52.8609 7 49 7ZM7 10.5H49C50.9294 10.5 52.5 12.0706 52.5 14V17.9386L31.15 33.9511C29.2906 35.3423 26.7061 35.3423 24.8467 33.9511L3.5 17.9375V14C3.5 12.075 5.07063 10.5 7 10.5ZM52.5 42C52.5 43.9294 50.9294 45.5 49 45.5H7C5.07063 45.5 3.5 43.9294 3.5 42V22.2141L22.75 36.75C24.2944 37.9105 26.1472 38.5022 28 38.5022C29.8528 38.5022 31.7078 37.9094 33.25 36.75L52.5 22.2141V42Z"
+  />
+</svg>

package/icons/index.ts

@@ -12,6 +12,7 @@ import IdCardSvg from './id-card.svg';
 import InfoCircleSvg from './info-circle.svg';
 import FileExclamationSvg from './file-exclamation.svg';
 import HourglassClockSvg from './hourglass-clock.svg';
+import EnvelopeSvg from './envelope.svg';
 
 export {
   ViewSvg,
@@ -27,5 +28,6 @@ export {
   IdCardSvg,
   InfoCircleSvg,
   FileExclamationSvg,
-  HourglassClockSvg
+  HourglassClockSvg,
+  EnvelopeSvg
 };

package/index.d.ts

@@ -2,6 +2,198 @@ import * as vue from 'vue';
 import { PropType, Plugin } from 'vue';
 export { Form as FwForm } from 'vee-validate';
 
+declare type InputType = 'text' | 'password';
+interface FwInputProps {
+    value: string;
+    name: string;
+    type?: InputType;
+    label?: string;
+    placeholder?: string;
+    rules?: string | object | Function;
+    readonly?: boolean;
+    hint?: string;
+}
+declare const _default$6: vue.DefineComponent<{
+    /**
+     * The input v-model
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The input type. Accepts `text` | `password`
+     */
+    type: {
+        type: PropType<InputType>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+        type: StringConstructor;
+    };
+    /**
+     * The placeholder text of the input
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Validation rules. Accepts a string, object, function or schema.
+     */
+    rules: {
+        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+    };
+    /**
+     * Converts the input into a readonly disabled field
+     */
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+        type: StringConstructor;
+    };
+}, {
+    inputValue: vue.WritableComputedRef<string>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The input v-model
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The input type. Accepts `text` | `password`
+     */
+    type: {
+        type: PropType<InputType>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+        type: StringConstructor;
+    };
+    /**
+     * The placeholder text of the input
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Validation rules. Accepts a string, object, function or schema.
+     */
+    rules: {
+        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+    };
+    /**
+     * Converts the input into a readonly disabled field
+     */
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+        type: StringConstructor;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string;
+    type: InputType;
+    placeholder: string;
+    readonly: boolean;
+}>;
+
+interface FwCheckboxProps {
+    name: string;
+    label?: string;
+    rules?: string | object | Function;
+    hint?: string;
+}
+declare const _default$5: vue.DefineComponent<{
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+        type: StringConstructor;
+    };
+    /**
+     * Validation rules. Accepts a string, object, function or schema.
+     */
+    rules: {
+        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+    };
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+        type: StringConstructor;
+    };
+}, unknown, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+        type: StringConstructor;
+    };
+    /**
+     * Validation rules. Accepts a string, object, function or schema.
+     */
+    rules: {
+        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+    };
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+        type: StringConstructor;
+    };
+}>>, {}>;
+
 declare const _default$4: vue.DefineComponent<{
     /**
      * The header title of the card
@@ -211,195 +403,48 @@ declare const _default$2: vue.DefineComponent<{
     onAction?: ((...args: any[]) => any) | undefined;
 }, {}>;
 
-declare type InputType = 'text' | 'password';
-interface FwInputProps {
-    value: string;
-    name: string;
-    type?: InputType;
-    label?: string;
-    placeholder?: string;
-    rules?: string | object | Function;
-    readonly?: boolean;
-    hint?: string;
-}
 declare const _default$1: vue.DefineComponent<{
     /**
-     * The input v-model
+     * The active tab v-model
      */
     modelValue: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * The name of the input field. Must be unique per form.
-     */
-    name: {
-        type: StringConstructor;
+        type: NumberConstructor;
         required: true;
     };
-    /**
-     * The input type. Accepts `text` | `password`
-     */
-    type: {
-        type: PropType<InputType>;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    /**
-     * Label for the input. Also renders to an aria-label attribute
-     */
-    label: {
-        type: StringConstructor;
-    };
-    /**
-     * The placeholder text of the input
-     */
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Validation rules. Accepts a string, object, function or schema.
-     */
-    rules: {
-        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
-    };
-    /**
-     * Converts the input into a readonly disabled field
-     */
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * The hint text shown below the input
-     */
-    hint: {
-        type: StringConstructor;
-    };
 }, {
-    inputValue: vue.WritableComputedRef<string>;
+    active: vue.ComputedRef<number>;
+    tabs: vue.Ref<never[]>;
+    selectTab: (tab: number) => void;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     /**
-     * The input v-model
+     * The active tab v-model
      */
     modelValue: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * The name of the input field. Must be unique per form.
-     */
-    name: {
-        type: StringConstructor;
+        type: NumberConstructor;
         required: true;
     };
-    /**
-     * The input type. Accepts `text` | `password`
-     */
-    type: {
-        type: PropType<InputType>;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    /**
-     * Label for the input. Also renders to an aria-label attribute
-     */
-    label: {
-        type: StringConstructor;
-    };
-    /**
-     * The placeholder text of the input
-     */
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Validation rules. Accepts a string, object, function or schema.
-     */
-    rules: {
-        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
-    };
-    /**
-     * Converts the input into a readonly disabled field
-     */
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * The hint text shown below the input
-     */
-    hint: {
-        type: StringConstructor;
-    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
-    modelValue: string;
-    type: InputType;
-    placeholder: string;
-    readonly: boolean;
-}>;
+}, {}>;
 
-interface FwCheckboxProps {
-    name: string;
-    label?: string;
-    rules?: string | object | Function;
-    hint?: string;
-}
 declare const _default: vue.DefineComponent<{
     /**
-     * The name of the input field. Must be unique per form.
-     */
-    name: {
-        type: StringConstructor;
-        required: true;
-    };
-    /**
-     * Label for the input. Also renders to an aria-label attribute
+     * The label of the tab component used as the button panel label
      */
     label: {
         type: StringConstructor;
-    };
-    /**
-     * Validation rules. Accepts a string, object, function or schema.
-     */
-    rules: {
-        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
-    };
-    /**
-     * The hint text shown below the input
-     */
-    hint: {
-        type: StringConstructor;
-    };
-}, unknown, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
-    /**
-     * The name of the input field. Must be unique per form.
-     */
-    name: {
-        type: StringConstructor;
         required: true;
     };
+}, {
+    isActive: vue.ComputedRef<boolean>;
+    index: vue.ComputedRef<any>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     /**
-     * Label for the input. Also renders to an aria-label attribute
+     * The label of the tab component used as the button panel label
      */
     label: {
         type: StringConstructor;
-    };
-    /**
-     * Validation rules. Accepts a string, object, function or schema.
-     */
-    rules: {
-        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
-    };
-    /**
-     * The hint text shown below the input
-     */
-    hint: {
-        type: StringConstructor;
+        required: true;
     };
 }>>, {}>;
 
@@ -407,4 +452,4 @@ declare const install: Exclude<Plugin['install'], undefined>;
 
 declare module '@frollo/frollo-web-ui/icons' { }
 
-export { ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, _default$3 as FwButton, FwButtonProps, _default$4 as FwCard, _default as FwCheckbox, FwCheckboxProps, _default$1 as FwInput, FwInputProps, _default$2 as FwNavigationMenu, InputType, NavMenuItem, install as default };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "0.0.16",
+  "version": "0.0.19",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",

package/types/components/fw-tabs/fw-tab.vue.d.ts

@@ -0,0 +1,21 @@
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The label of the tab component used as the button panel label
+     */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    isActive: import("vue").ComputedRef<boolean>;
+    index: import("vue").ComputedRef<any>;
+}, 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 label of the tab component used as the button panel label
+     */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

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

@@ -0,0 +1,24 @@
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The active tab v-model
+     */
+    modelValue: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, {
+    active: import("vue").ComputedRef<number>;
+    tabs: import("vue").Ref<never[]>;
+    selectTab: (tab: number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The active tab v-model
+     */
+    modelValue: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,3 @@
+import FwTabs from './fw-tabs.vue';
+import FwTab from './fw-tab.vue';
+export { FwTabs, FwTab };

package/types/components/index.d.ts

@@ -1,6 +1,7 @@
-export * from './fw-card';
-export * from './fw-button';
-export * from './fw-navigation-menu';
 export * from './fw-form';
 export * from './fw-input';
 export * from './fw-checkbox';
+export * from './fw-card';
+export * from './fw-button';
+export * from './fw-navigation-menu';
+export * from './fw-tabs';

package/types/icons/index.d.ts

@@ -12,4 +12,5 @@ import IdCardSvg from './id-card.svg';
 import InfoCircleSvg from './info-circle.svg';
 import FileExclamationSvg from './file-exclamation.svg';
 import HourglassClockSvg from './hourglass-clock.svg';
-export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg, EyeSvg, EyeCrossedSvg, DownloadSvg, IdCardSvg, InfoCircleSvg, FileExclamationSvg, HourglassClockSvg };
+import EnvelopeSvg from './envelope.svg';
+export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg, EyeSvg, EyeCrossedSvg, DownloadSvg, IdCardSvg, InfoCircleSvg, FileExclamationSvg, HourglassClockSvg, EnvelopeSvg };

package/types/index-types.esm.d.ts

@@ -7,3 +7,5 @@ export * from './components/fw-button/fw-button.vue';
 export * from './components/fw-navigation-menu/fw-navigation-menu.vue';
 export * from './components/fw-input/fw-input.vue';
 export * from './components/fw-checkbox/fw-checkbox.vue';
+export * from './components/fw-tabs/fw-tabs.vue';
+export * from './components/fw-tabs/fw-tab.vue';