@frollo/frollo-web-ui 0.0.14 → 0.0.17

package/icons/file-exclamation.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 104 104" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M87.2016 25.4516L65.5687 3.81875C63.1109 1.36947 59.8203 0 56.3672 0H26C18.8195 0 13 5.81953 13 13L13.0013 91C13.0013 98.1805 18.8209 104 26.0013 104H78C85.1805 104 91 98.1805 91 91V34.6328C91 31.1797 89.6391 27.8891 87.2016 25.4516ZM58.5 6.9225C59.4094 7.24059 60.2603 7.70372 60.9619 8.40511L82.5947 30.0379C83.3016 30.7328 83.7687 31.5859 84.0734 32.5H61.75C59.9625 32.5 58.5 31.0375 58.5 29.25V6.9225ZM84.5 91C84.5 94.5831 81.5831 97.5 78 97.5H26C22.4169 97.5 19.5 94.5831 19.5 91V13C19.5 9.41687 22.4169 6.5 26 6.5H52V29.25C52 34.6328 56.3672 39 61.75 39H84.5V91ZM52 79.625C49.3086 79.625 47.125 81.8086 47.125 84.5C47.125 87.1914 49.3086 89.375 52 89.375C54.6934 89.375 56.875 87.1914 56.875 84.5C56.875 81.8086 54.7016 79.625 52 79.625ZM51.8172 74.75C53.7875 74.75 55.25 73.2875 55.25 71.5V48.75C55.25 46.9625 53.7875 45.5 52 45.5C50.2125 45.5 48.75 46.9625 48.75 48.75V71.5C48.75 73.2875 50.1922 74.75 51.8172 74.75Z" />
+</svg>

package/icons/hourglass-clock.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 118 104" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.82031 104C2.0255 104 0.570312 102.537 0.570312 100.75C0.570312 98.9625 2.0255 97.5 3.82031 97.5H7.07031V88.4203C7.07031 82.0016 9.18484 75.5828 13.0848 70.6672L27.3625 52L13.0848 33.3328C9.18484 28.2344 7.07031 21.9984 7.07031 15.5736V6.5H3.82031C2.0255 6.5 0.570312 5.04563 0.570312 3.25C0.570312 1.45519 2.0255 0 3.82031 0H75.3203C77.1078 0 78.5703 1.45519 78.5703 3.25C78.5703 5.04563 77.1078 6.5 75.3203 6.5H72.0703V15.5736C72.0703 21.9984 69.9578 28.2344 66.0578 33.3328L51.7781 52L56.5922 58.2766C55.4141 60.5109 54.5 62.8875 53.8094 65.3656L45.1156 53.9703C44.2219 52.6297 44.2219 51.1875 45.1156 50.0297L60.7156 29.3922C63.925 25.4312 65.5703 20.5766 65.5703 15.5736V6.5H13.5703V15.5736C13.5703 20.5766 15.2136 25.4312 18.2483 29.3922L34.025 50.0297C34.9188 51.1875 34.9188 52.6297 34.025 53.9703L18.2483 74.6078C15.2136 78.5687 13.5703 83.4234 13.5703 88.4203V97.5H60.7359C62.7875 99.9578 65.1438 102.152 67.7641 104H3.82031ZM53.9109 84.5C54.5609 86.775 55.4141 88.9484 56.4703 91H23.3203C22.1016 91 20.9844 90.3094 20.4298 89.2328C19.8733 87.9734 19.9688 86.8563 20.6756 85.8609L36.7469 63.1109C37.9656 61.6484 39.9969 61.3031 41.4594 62.1766C42.9219 63.3953 43.2672 65.4266 42.2109 66.8891L29.6375 84.5H53.9109ZM37.0313 40.8484L24.0313 24.5984C23.2594 23.8062 23.0969 22.4656 23.6453 21.3484C24.1734 20.217 25.3109 19.5 26.5703 19.5H52.5703C53.8297 19.5 54.9672 20.217 55.4953 21.3484C56.0438 22.4656 55.8813 23.8062 55.1094 24.5984L42.1094 40.8484C41.5 41.8031 40.5656 42.25 39.5703 42.25C38.575 42.25 37.6406 41.8031 37.0313 40.8484ZM39.5703 33.8L45.8063 26H33.3344L39.5703 33.8ZM88.1375 58.5C90.1078 58.5 91.3875 59.9625 91.3875 61.75V71.5H98.0703C99.8578 71.5 101.32 72.9625 101.32 74.75C101.32 76.5375 99.8578 78 98.0703 78H88.1375C86.5328 78 84.8875 76.5375 84.8875 74.75V61.75C84.8875 59.9625 86.5328 58.5 88.1375 58.5ZM59.0703 74.75C59.0703 58.6016 72.1719 45.5 88.3203 45.5C104.469 45.5 117.57 58.6016 117.57 74.75C117.57 90.8984 104.469 104 88.3203 104C72.1719 104 59.0703 90.8984 59.0703 74.75ZM88.3203 97.5C100.894 97.5 111.07 87.3234 111.07 74.75C111.07 62.1766 100.894 52 88.3203 52C75.7469 52 65.5703 62.1766 65.5703 74.75C65.5703 87.3234 75.7469 97.5 88.3203 97.5Z" />
+</svg>

package/icons/index.ts

@@ -10,6 +10,8 @@ import EyeCrossedSvg from './eye-crossed.svg';
 import DownloadSvg from './download.svg';
 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,
@@ -23,5 +25,7 @@ export {
   EyeCrossedSvg,
   DownloadSvg,
   IdCardSvg,
-  InfoCircleSvg
+  InfoCircleSvg,
+  FileExclamationSvg,
+  HourglassClockSvg
 };

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.14",
+  "version": "0.0.17",
   "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

@@ -10,4 +10,6 @@ import EyeCrossedSvg from './eye-crossed.svg';
 import DownloadSvg from './download.svg';
 import IdCardSvg from './id-card.svg';
 import InfoCircleSvg from './info-circle.svg';
-export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg, EyeSvg, EyeCrossedSvg, DownloadSvg, IdCardSvg, InfoCircleSvg };
+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 };

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';