@frollo/frollo-web-ui 0.0.10 → 0.0.11

package/cjs/index.js

@@ -1496,7 +1496,18 @@ addToUnscopables('includes');var script$2 = vue.defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'text'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text'].includes(value);
+      }
+    },
+
+    /**
+     * The type attribute of the button
+     */
+    buttonType: {
+      type: String,
+      "default": 'button',
+      validator: function validator(value) {
+        return ['button', 'submit', 'reset'].includes(value);
       }
     }
   },
@@ -1505,32 +1516,37 @@ addToUnscopables('includes');var script$2 = vue.defineComponent({
       primary: {
         text: 'text-tertiary hover:text-primary active:text-primary',
         background: 'bg-primary hover:bg-tertiary active:bg-tertiary',
-        border: 'border-primary focus:ring-primary'
+        border: 'border-primary focus-visible:ring-primary'
       },
       secondary: {
         text: 'text-primary hover:text-tertiary active:text-tertiary',
         background: 'bg-tertiary hover:bg-primary active:bg-primary',
-        border: 'border-primary focus:ring-primary'
+        border: 'border-primary focus-visible:ring-primary'
       },
       tertiary: {
         text: 'text-tertiary hover:text-secondary active:text-secondary',
         background: 'bg-secondary hover:bg-tertiary active:bg-tertiary',
-        border: 'border-tertiary focus:ring-tertiary'
+        border: 'border-secondary focus-visible:ring-secondary'
       },
       success: {
         text: 'text-white hover:text-success active:text-success',
         background: 'bg-success hover:bg-white active:bg-white',
-        border: 'border-success focus:ring-success'
+        border: 'border-success focus-visible:ring-success'
       },
       error: {
         text: 'text-white hover:text-error active:text-error',
         background: 'bg-error hover:bg-white active:bg-white',
-        border: 'border-error focus:ring-error'
+        border: 'border-error focus-visible:ring-error'
+      },
+      link: {
+        text: 'text-primary underline hover:no-underline active:no-underline focus-visible:no-underline',
+        background: '',
+        border: 'border-none rounded-none focus-visible:ring-primary'
       },
       text: {
         text: 'text-body font-medium hover:text-white active:text-white',
         background: 'bg-white hover:bg-body active:bg-body',
-        border: 'border-transparent focus:ring-body'
+        border: 'border-transparent focus-visible:ring-body'
       }
     });
     var sizes = vue.ref({
@@ -1612,8 +1628,8 @@ addToUnscopables('includes');var script$2 = vue.defineComponent({
   }
 });function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tagName), {
-    "class": vue.normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
-    type: _ctx.tagName === 'button' ? _ctx.tagName : null,
+    "class": vue.normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-0 focus-visible:outline-0 focus:ring-none ring-offset-2 focus-visible:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0' : '']]),
+    type: _ctx.tagName === 'button' ? _ctx.buttonType : null,
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
     tabindex: _ctx.to ? 0 : null,
@@ -4999,6 +5015,14 @@ function useSubmitForm(cb) {
      */
     rules: {
       type: [String, Object, Function]
+    },
+
+    /**
+     * Converts the input into a readonly disabled field
+     */
+    readonly: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props, ctx) {
@@ -5052,7 +5076,7 @@ var _hoisted_5 = {
   key: 0,
   "class": "flex text-grey-base absolute w-9 h-full inset-y-0 left-0 items-center pl-3 pointer-events-none"
 };
-var _hoisted_6 = ["placeholder", "type"];
+var _hoisted_6 = ["placeholder", "type", "readonly", "disabled"];
 var _hoisted_7 = {
   key: 0,
   "class": "flex text-error absolute w-9 h-full inset-y-0 right-0 items-center pr-3 pointer-events-none"
@@ -5099,6 +5123,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, vue.toDisplayString(_ctx.label), 9, _hoisted_3)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_4, [_ctx.$slots.prefixIcon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "prefixIcon")])) : vue.createCommentVNode("", true), vue.createElementVNode("input", vue.mergeProps(field, {
         placeholder: _ctx.placeholder,
         type: _ctx.type,
+        readonly: _ctx.readonly,
+        disabled: _ctx.readonly,
         "class": ["border-2 border-grey-lightest rounded-lg focus:outline-none focus:ring-2 focus:ring-primary block w-full p-2.5", {
           'pl-10': !!_ctx.$slots.prefixIcon
         }]

package/esm/{fw-button-02fc3f47.js → fw-button-430c8529.js}

@@ -36,7 +36,18 @@ var script = defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'text'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text'].includes(value);
+      }
+    },
+
+    /**
+     * The type attribute of the button
+     */
+    buttonType: {
+      type: String,
+      "default": 'button',
+      validator: function validator(value) {
+        return ['button', 'submit', 'reset'].includes(value);
       }
     }
   },
@@ -45,32 +56,37 @@ var script = defineComponent({
       primary: {
         text: 'text-tertiary hover:text-primary active:text-primary',
         background: 'bg-primary hover:bg-tertiary active:bg-tertiary',
-        border: 'border-primary focus:ring-primary'
+        border: 'border-primary focus-visible:ring-primary'
       },
       secondary: {
         text: 'text-primary hover:text-tertiary active:text-tertiary',
         background: 'bg-tertiary hover:bg-primary active:bg-primary',
-        border: 'border-primary focus:ring-primary'
+        border: 'border-primary focus-visible:ring-primary'
       },
       tertiary: {
         text: 'text-tertiary hover:text-secondary active:text-secondary',
         background: 'bg-secondary hover:bg-tertiary active:bg-tertiary',
-        border: 'border-tertiary focus:ring-tertiary'
+        border: 'border-secondary focus-visible:ring-secondary'
       },
       success: {
         text: 'text-white hover:text-success active:text-success',
         background: 'bg-success hover:bg-white active:bg-white',
-        border: 'border-success focus:ring-success'
+        border: 'border-success focus-visible:ring-success'
       },
       error: {
         text: 'text-white hover:text-error active:text-error',
         background: 'bg-error hover:bg-white active:bg-white',
-        border: 'border-error focus:ring-error'
+        border: 'border-error focus-visible:ring-error'
+      },
+      link: {
+        text: 'text-primary underline hover:no-underline active:no-underline focus-visible:no-underline',
+        background: '',
+        border: 'border-none rounded-none focus-visible:ring-primary'
       },
       text: {
         text: 'text-body font-medium hover:text-white active:text-white',
         background: 'bg-white hover:bg-body active:bg-body',
-        border: 'border-transparent focus:ring-body'
+        border: 'border-transparent focus-visible:ring-body'
       }
     });
     var sizes = ref({
@@ -154,8 +170,8 @@ var script = defineComponent({
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
-    "class": normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
-    type: _ctx.tagName === 'button' ? _ctx.tagName : null,
+    "class": normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-0 focus-visible:outline-0 focus:ring-none ring-offset-2 focus-visible:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0' : '']]),
+    type: _ctx.tagName === 'button' ? _ctx.buttonType : null,
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
     tabindex: _ctx.to ? 0 : null,

package/esm/fw-button.js

@@ -1,3 +1,3 @@
-export { s as FwButton } from './fw-button-02fc3f47.js';
+export { s as FwButton } from './fw-button-430c8529.js';
 import './style-inject.es-da8f7768.js';
 import 'vue';

package/esm/fw-input.js

@@ -56,6 +56,14 @@ var script = defineComponent({
      */
     rules: {
       type: [String, Object, Function]
+    },
+
+    /**
+     * Converts the input into a readonly disabled field
+     */
+    readonly: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props, ctx) {
@@ -115,7 +123,7 @@ var _hoisted_5 = {
   key: 0,
   "class": "flex text-grey-base absolute w-9 h-full inset-y-0 left-0 items-center pl-3 pointer-events-none"
 };
-var _hoisted_6 = ["placeholder", "type"];
+var _hoisted_6 = ["placeholder", "type", "readonly", "disabled"];
 var _hoisted_7 = {
   key: 0,
   "class": "flex text-error absolute w-9 h-full inset-y-0 right-0 items-center pr-3 pointer-events-none"
@@ -162,6 +170,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, toDisplayString(_ctx.label), 9, _hoisted_3)) : createCommentVNode("", true), createElementVNode("div", _hoisted_4, [_ctx.$slots.prefixIcon ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "prefixIcon")])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
         placeholder: _ctx.placeholder,
         type: _ctx.type,
+        readonly: _ctx.readonly,
+        disabled: _ctx.readonly,
         "class": ["border-2 border-grey-lightest rounded-lg focus:outline-none focus:ring-2 focus:ring-primary block w-full p-2.5", {
           'pl-10': !!_ctx.$slots.prefixIcon
         }]

package/esm/fw-navigation-menu.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, createElementVNode, resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
-import { s as script$1 } from './fw-button-02fc3f47.js';
+import { s as script$1 } from './fw-button-430c8529.js';
 import { u as styleInject } from './style-inject.es-da8f7768.js';
 
 var script = defineComponent({

package/esm/index.js

@@ -7,8 +7,8 @@ export { FwNavigationMenu } from './fw-navigation-menu.js';
 import './fw-form.js';
 import { FwInput as script$3 } from './fw-input.js';
 export { FwInput } from './fw-input.js';
-import { s as script$1 } from './fw-button-02fc3f47.js';
-export { s as FwButton } from './fw-button-02fc3f47.js';
+import { s as script$1 } from './fw-button-430c8529.js';
+export { s as FwButton } from './fw-button-430c8529.js';
 import { F as Form } from './vee-validate.esm-028c6424.js';
 export { F as FwForm } from './vee-validate.esm-028c6424.js';
 import 'vue';

package/frollo-web-ui.esm.js

@@ -1716,7 +1716,18 @@ var script$2 = defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'text'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text'].includes(value);
+      }
+    },
+
+    /**
+     * The type attribute of the button
+     */
+    buttonType: {
+      type: String,
+      "default": 'button',
+      validator: function validator(value) {
+        return ['button', 'submit', 'reset'].includes(value);
       }
     }
   },
@@ -1725,32 +1736,37 @@ var script$2 = defineComponent({
       primary: {
         text: 'text-tertiary hover:text-primary active:text-primary',
         background: 'bg-primary hover:bg-tertiary active:bg-tertiary',
-        border: 'border-primary focus:ring-primary'
+        border: 'border-primary focus-visible:ring-primary'
       },
       secondary: {
         text: 'text-primary hover:text-tertiary active:text-tertiary',
         background: 'bg-tertiary hover:bg-primary active:bg-primary',
-        border: 'border-primary focus:ring-primary'
+        border: 'border-primary focus-visible:ring-primary'
       },
       tertiary: {
         text: 'text-tertiary hover:text-secondary active:text-secondary',
         background: 'bg-secondary hover:bg-tertiary active:bg-tertiary',
-        border: 'border-tertiary focus:ring-tertiary'
+        border: 'border-secondary focus-visible:ring-secondary'
       },
       success: {
         text: 'text-white hover:text-success active:text-success',
         background: 'bg-success hover:bg-white active:bg-white',
-        border: 'border-success focus:ring-success'
+        border: 'border-success focus-visible:ring-success'
       },
       error: {
         text: 'text-white hover:text-error active:text-error',
         background: 'bg-error hover:bg-white active:bg-white',
-        border: 'border-error focus:ring-error'
+        border: 'border-error focus-visible:ring-error'
+      },
+      link: {
+        text: 'text-primary underline hover:no-underline active:no-underline focus-visible:no-underline',
+        background: '',
+        border: 'border-none rounded-none focus-visible:ring-primary'
       },
       text: {
         text: 'text-body font-medium hover:text-white active:text-white',
         background: 'bg-white hover:bg-body active:bg-body',
-        border: 'border-transparent focus:ring-body'
+        border: 'border-transparent focus-visible:ring-body'
       }
     });
     var sizes = ref({
@@ -1834,8 +1850,8 @@ var script$2 = defineComponent({
 
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
-    "class": normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
-    type: _ctx.tagName === 'button' ? _ctx.tagName : null,
+    "class": normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-0 focus-visible:outline-0 focus:ring-none ring-offset-2 focus-visible:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0' : '']]),
+    type: _ctx.tagName === 'button' ? _ctx.buttonType : null,
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
     tabindex: _ctx.to ? 0 : null,
@@ -5247,6 +5263,14 @@ var script = defineComponent({
      */
     rules: {
       type: [String, Object, Function]
+    },
+
+    /**
+     * Converts the input into a readonly disabled field
+     */
+    readonly: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props, ctx) {
@@ -5306,7 +5330,7 @@ var _hoisted_5 = {
   key: 0,
   "class": "flex text-grey-base absolute w-9 h-full inset-y-0 left-0 items-center pl-3 pointer-events-none"
 };
-var _hoisted_6 = ["placeholder", "type"];
+var _hoisted_6 = ["placeholder", "type", "readonly", "disabled"];
 var _hoisted_7 = {
   key: 0,
   "class": "flex text-error absolute w-9 h-full inset-y-0 right-0 items-center pr-3 pointer-events-none"
@@ -5353,6 +5377,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, toDisplayString(_ctx.label), 9, _hoisted_3)) : createCommentVNode("", true), createElementVNode("div", _hoisted_4, [_ctx.$slots.prefixIcon ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "prefixIcon")])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
         placeholder: _ctx.placeholder,
         type: _ctx.type,
+        readonly: _ctx.readonly,
+        disabled: _ctx.readonly,
         "class": ["border-2 border-grey-lightest rounded-lg focus:outline-none focus:ring-2 focus:ring-primary block w-full p-2.5", {
           'pl-10': !!_ctx.$slots.prefixIcon
         }]

package/icons/index.ts

@@ -4,6 +4,7 @@ import ManageSvg from './manage.svg';
 import NotFoundSvg from './not-found.svg';
 import EmailFilledSvg from './email-filled.svg';
 import AlertSvg from './alert.svg';
+import LockSvg from './lock.svg';
 
 export {
   ViewSvg,
@@ -11,5 +12,6 @@ export {
   ManageSvg,
   NotFoundSvg,
   EmailFilledSvg,
-  AlertSvg
+  AlertSvg,
+  LockSvg
 };

package/icons/lock.svg

@@ -0,0 +1,3 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M17,9V7c0-2.8-2.2-5-5-5S7,4.2,7,7v2c-1.7,0-3,1.3-3,3v7c0,1.7,1.3,3,3,3h10c1.7,0,3-1.3,3-3v-7C20,10.3,18.7,9,17,9z M9,7c0-1.7,1.3-3,3-3s3,1.3,3,3v2H9V7z"/>
+</svg>

package/index.d.ts

@@ -52,7 +52,7 @@ declare const _default$3: vue.DefineComponent<{
     href: StringConstructor;
 }>>, {}>;
 
-declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'text';
+declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'text' | 'link';
 interface ButtonDefinition {
     text: string;
     background: string;
@@ -65,11 +65,13 @@ declare type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 declare type ButtonSizes = {
     [key in ButtonSize]: string;
 };
+declare type ButtonTypeAttribute = 'button' | 'submit' | 'reset';
 interface FwButtonProps {
     to?: string | object;
     href?: string;
     size?: ButtonSize;
     variant?: ButtonVariantName;
+    buttonType?: ButtonTypeAttribute;
 }
 declare const _default$2: vue.DefineComponent<{
     /**
@@ -99,6 +101,14 @@ declare const _default$2: vue.DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    /**
+     * The type attribute of the button
+     */
+    buttonType: {
+        type: PropType<ButtonTypeAttribute>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }, {
     textColorClass: vue.ComputedRef<string>;
     bgColorClass: vue.ComputedRef<string>;
@@ -109,7 +119,7 @@ declare const _default$2: vue.DefineComponent<{
     onMouseout: (this: GlobalEventHandlers, ev: MouseEvent) => any;
     onFocusin: (this: GlobalEventHandlers, ev: FocusEvent) => any;
     onFocusout: (this: GlobalEventHandlers, ev: FocusEvent) => any;
-    tagName: vue.ComputedRef<"router-link" | "a" | "button">;
+    tagName: vue.ComputedRef<"button" | "router-link" | "a">;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "mouseover" | "mouseout" | "focusin" | "focusout")[], "click" | "mouseover" | "mouseout" | "focusin" | "focusout", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     /**
      * A `router-link` path or object
@@ -138,6 +148,14 @@ declare const _default$2: vue.DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    /**
+     * The type attribute of the button
+     */
+    buttonType: {
+        type: PropType<ButtonTypeAttribute>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onMouseover?: ((...args: any[]) => any) | undefined;
@@ -147,6 +165,7 @@ declare const _default$2: vue.DefineComponent<{
 }, {
     size: ButtonSize;
     variant: ButtonVariantName;
+    buttonType: ButtonTypeAttribute;
 }>;
 
 interface NavMenuItem {
@@ -200,6 +219,7 @@ interface FwInputProps {
     label?: string;
     placeholder?: string;
     rules?: string | object | Function;
+    readonly?: boolean;
 }
 declare const _default: vue.DefineComponent<{
     /**
@@ -243,6 +263,13 @@ declare const _default: vue.DefineComponent<{
     rules: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
     };
+    /**
+     * Converts the input into a readonly disabled field
+     */
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     inputValue: vue.WritableComputedRef<string>;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
@@ -287,16 +314,24 @@ declare const _default: vue.DefineComponent<{
     rules: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
     };
+    /**
+     * Converts the input into a readonly disabled field
+     */
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string;
     type: InputType;
     placeholder: string;
+    readonly: boolean;
 }>;
 
 declare const install: Exclude<Plugin['install'], undefined>;
 
 declare module '@frollo/frollo-web-ui/icons' { }
 
-export { ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonVariantName, _default$2 as FwButton, FwButtonProps, _default$3 as FwCard, _default as FwInput, FwInputProps, _default$1 as FwNavigationMenu, InputType, NavMenuItem, install as default };
+export { ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonTypeAttribute, ButtonVariantName, _default$2 as FwButton, FwButtonProps, _default$3 as FwCard, _default as FwInput, FwInputProps, _default$1 as FwNavigationMenu, InputType, NavMenuItem, install as default };

package/package.json

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

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-export declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'text';
+export declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'text' | 'link';
 export interface ButtonDefinition {
     text: string;
     background: string;
@@ -12,11 +12,13 @@ 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;
 }
 declare const _default: import("vue").DefineComponent<{
     /**
@@ -46,6 +48,14 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    /**
+     * The type attribute of the button
+     */
+    buttonType: {
+        type: PropType<ButtonTypeAttribute>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }, {
     textColorClass: import("vue").ComputedRef<string>;
     bgColorClass: import("vue").ComputedRef<string>;
@@ -56,7 +66,7 @@ declare const _default: import("vue").DefineComponent<{
     onMouseout: (this: GlobalEventHandlers, ev: MouseEvent) => any;
     onFocusin: (this: GlobalEventHandlers, ev: FocusEvent) => any;
     onFocusout: (this: GlobalEventHandlers, ev: FocusEvent) => any;
-    tagName: import("vue").ComputedRef<"router-link" | "a" | "button">;
+    tagName: import("vue").ComputedRef<"button" | "router-link" | "a">;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseover" | "mouseout" | "focusin" | "focusout")[], "click" | "mouseover" | "mouseout" | "focusin" | "focusout", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * A `router-link` path or object
@@ -85,6 +95,14 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    /**
+     * The type attribute of the button
+     */
+    buttonType: {
+        type: PropType<ButtonTypeAttribute>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onMouseover?: ((...args: any[]) => any) | undefined;
@@ -94,5 +112,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     size: ButtonSize;
     variant: ButtonVariantName;
+    buttonType: ButtonTypeAttribute;
 }>;
 export default _default;

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

@@ -7,6 +7,7 @@ export interface FwInputProps {
     label?: string;
     placeholder?: string;
     rules?: string | object | Function;
+    readonly?: boolean;
 }
 declare const _default: import("vue").DefineComponent<{
     /**
@@ -50,6 +51,13 @@ declare const _default: import("vue").DefineComponent<{
     rules: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
     };
+    /**
+     * Converts the input into a readonly disabled field
+     */
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     inputValue: import("vue").WritableComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -94,11 +102,19 @@ declare const _default: import("vue").DefineComponent<{
     rules: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
     };
+    /**
+     * Converts the input into a readonly disabled field
+     */
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string;
     type: InputType;
     placeholder: string;
+    readonly: boolean;
 }>;
 export default _default;

package/types/icons/index.d.ts

@@ -4,4 +4,5 @@ import ManageSvg from './manage.svg';
 import NotFoundSvg from './not-found.svg';
 import EmailFilledSvg from './email-filled.svg';
 import AlertSvg from './alert.svg';
-export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg };
+import LockSvg from './lock.svg';
+export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg };