@frollo/frollo-web-ui 8.4.2 → 8.4.4

package/frollo-web-ui.esm.js

@@ -8659,6 +8659,20 @@ var script$h = defineComponent({
      */
     external: {
       type: Boolean
+    },
+    /**
+     * Whether the button is disabled or not
+     */
+    disabled: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * Whether the button is preselected or not
+     */
+    active: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props, ctx) {
@@ -8703,6 +8717,11 @@ var script$h = defineComponent({
         text: 'text-grey-base hover:text-primary active:text-primary',
         background: 'bg-none hover:bg-white focus:bg-white active:bg-white',
         border: 'border-transparent focus-visible:ring-1 focus-visible:ring-primary'
+      },
+      disabled: {
+        text: 'text-white',
+        background: 'bg-grey-base bg-opacity-60',
+        border: ''
       }
     });
     var sizes = ref({
@@ -8793,13 +8812,14 @@ var _hoisted_1$v = {
 function render$o(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_FwLoadingSpinner = resolveComponent("FwLoadingSpinner");
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
-    "class": normalizeClass(["fw-button", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.rounded && _ctx.variant !== 'link' ? 'rounded-full' : 'rounded', _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0 font-normal rounded-1' : 'font-semibold', _ctx.animation === 'fade' ? 'animation--fade' : 'animation--alternate', _ctx.loading === true ? 'fw-button--loading cursor-progress' : 'cursor-pointer']]),
+    "class": normalizeClass(["fw-button", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.rounded && _ctx.variant !== 'link' ? 'rounded-full' : 'rounded', _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0 font-normal rounded-1' : 'font-semibold', _ctx.animation === 'fade' ? 'animation--fade' : 'animation--alternate', _ctx.loading === true ? 'fw-button--loading cursor-progress' : 'cursor-pointer', _ctx.disabled && !_ctx.loading ? 'pointer-events-none text-grey-light' : '', _ctx.disabled && _ctx.active ? 'fw-button--disabled-active' : '']]),
     type: _ctx.tagName === 'button' ? _ctx.buttonType : null,
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
     tabindex: _ctx.to ? 0 : null,
-    disabled: _ctx.loading,
+    disabled: _ctx.loading || _ctx.disabled,
     target: !!_ctx.external ? '_blank' : null,
+    active: _ctx.active,
     onClick: _ctx.onClick,
     onFocusin: _ctx.onFocusin,
     onFocusout: _ctx.onFocusout,
@@ -8821,11 +8841,11 @@ function render$o(_ctx, _cache, $props, $setup, $data, $options) {
       })], 2)) : createCommentVNode("", true)])) : createCommentVNode("", true)];
     }),
     _: 3
-  }, 40, ["class", "type", "to", "href", "tabindex", "disabled", "target", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
+  }, 40, ["class", "type", "to", "href", "tabindex", "disabled", "target", "active", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
 }
 
-var css_248z$f = ".fw-button{line-height:normal}.fw-button--label-wrapper{-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:margin,padding;-moz-transition-property:margin,padding;transition-property:margin,padding;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.fw-button--primary{background:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary.fw-button--loading,.fw-button--primary:hover{background:var(--colorButtonPrimaryFade);border-color:var(--colorButtonPrimaryFade)}.fw-button--secondary{background:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate.fw-button--loading,.fw-button--secondary.animation--alternate:hover{background:var(--colorButtonSecondaryText);color:var(--colorButtonSecondary)}.fw-button--secondary.animation--fade.fw-button--loading,.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary{background:var(--colorButtonTertiary);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate.fw-button--loading,.fw-button--tertiary.animation--alternate:hover{background:var(--colorButtonTertiaryText);color:var(--colorButtonTertiary)}.fw-button--tertiary.animation--fade.fw-button--loading,.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}";
-var stylesheet$f = ".fw-button{line-height:normal}.fw-button--label-wrapper{-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:margin,padding;-moz-transition-property:margin,padding;transition-property:margin,padding;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.fw-button--primary{background:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary.fw-button--loading,.fw-button--primary:hover{background:var(--colorButtonPrimaryFade);border-color:var(--colorButtonPrimaryFade)}.fw-button--secondary{background:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate.fw-button--loading,.fw-button--secondary.animation--alternate:hover{background:var(--colorButtonSecondaryText);color:var(--colorButtonSecondary)}.fw-button--secondary.animation--fade.fw-button--loading,.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary{background:var(--colorButtonTertiary);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate.fw-button--loading,.fw-button--tertiary.animation--alternate:hover{background:var(--colorButtonTertiaryText);color:var(--colorButtonTertiary)}.fw-button--tertiary.animation--fade.fw-button--loading,.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}";
+var css_248z$f = ".fw-button{line-height:normal}.fw-button--label-wrapper{-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:margin,padding;-moz-transition-property:margin,padding;transition-property:margin,padding;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.fw-button--primary{background:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary.fw-button--loading,.fw-button--primary:hover{background:var(--colorButtonPrimaryFade);border-color:var(--colorButtonPrimaryFade)}.fw-button--secondary{background:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate.fw-button--loading,.fw-button--secondary.animation--alternate:hover{background:var(--colorButtonSecondaryText);color:var(--colorButtonSecondary)}.fw-button--secondary.animation--fade.fw-button--loading,.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary{background:var(--colorButtonTertiary);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate.fw-button--loading,.fw-button--tertiary.animation--alternate:hover{background:var(--colorButtonTertiaryText);color:var(--colorButtonTertiary)}.fw-button--tertiary.animation--fade.fw-button--loading,.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--disabled-active{background:var(--colorButtonDisabled)!important;color:rgb(from var(--colorButtonDisabledText) r g b/.6)!important}";
+var stylesheet$f = ".fw-button{line-height:normal}.fw-button--label-wrapper{-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:margin,padding;-moz-transition-property:margin,padding;transition-property:margin,padding;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.fw-button--primary{background:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary.fw-button--loading,.fw-button--primary:hover{background:var(--colorButtonPrimaryFade);border-color:var(--colorButtonPrimaryFade)}.fw-button--secondary{background:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate.fw-button--loading,.fw-button--secondary.animation--alternate:hover{background:var(--colorButtonSecondaryText);color:var(--colorButtonSecondary)}.fw-button--secondary.animation--fade.fw-button--loading,.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary{background:var(--colorButtonTertiary);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate.fw-button--loading,.fw-button--tertiary.animation--alternate:hover{background:var(--colorButtonTertiaryText);color:var(--colorButtonTertiary)}.fw-button--tertiary.animation--fade.fw-button--loading,.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--disabled-active{background:var(--colorButtonDisabled)!important;color:rgb(from var(--colorButtonDisabledText) r g b/.6)!important}";
 styleInject(css_248z$f);
 
 script$h.render = render$o;
@@ -9682,7 +9702,9 @@ var __default__$6 = defineComponent({
       type: Number
     }
   },
-  setup: function setup(props, ctx) {
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit,
+      expose = _ref.expose;
     var columns = computed(function () {
       return Object.keys(props.items[0]);
     });
@@ -9690,14 +9712,16 @@ var __default__$6 = defineComponent({
     var sortDirection = ref('asc');
     var currentSortedColumn = ref('');
     var currentPage = ref(1);
-    var maxPageAmount = ref();
+    var maxPageAmount = computed(function () {
+      if (props.totalAmount && props.pageSize) {
+        return Math.ceil(props.totalAmount / props.pageSize);
+      }
+      return undefined;
+    });
     onMounted(function () {
       if (Number(props.autoSortColumn) >= 0) {
         sortColumn(columns.value[Number(props.autoSortColumn)], false);
       }
-      if (props.totalAmount && props.pageSize) {
-        maxPageAmount.value = Math.ceil(props.totalAmount / props.pageSize);
-      }
     });
     var _useColours = useColours(),
       bgHoverColor = _useColours.primaryFade5;
@@ -9711,7 +9735,7 @@ var __default__$6 = defineComponent({
         sortBy.value = column;
         sortDirection.value = columnInitSort(column);
       }
-      if (isAction) ctx.emit('columnSorted', column, sortDirection.value);
+      if (isAction) emit('columnSorted', column, sortDirection.value);
     };
     var sortedData = computed(function () {
       if (!sortBy.value) {
@@ -9765,12 +9789,19 @@ var __default__$6 = defineComponent({
       return false;
     };
     var rowClicked = function rowClicked(row) {
-      if (props.clickableRows) ctx.emit('rowClicked', row);
+      if (props.clickableRows) emit('rowClicked', row);
     };
     var pageArrowClick = function pageArrowClick(next) {
       currentPage.value = currentPage.value + (next ? 1 : -1);
-      ctx.emit('pageChanged', next);
+      emit('pageChanged', next);
+    };
+    var resetPage = function resetPage() {
+      currentPage.value = 1;
+    };
+    var exposeApi = {
+      resetPage: resetPage
     };
+    expose(exposeApi);
     return {
       columns: columns,
       sortBy: sortBy,
@@ -9793,7 +9824,7 @@ var __default__$6 = defineComponent({
 var __injectCSSVars__$5 = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "73ca01a2": _ctx.bgHoverColor
+      "59fbcffe": _ctx.bgHoverColor
     };
   });
 };
@@ -9804,7 +9835,7 @@ __default__$6.setup = __setup__$5 ? function (props, ctx) {
 } : __injectCSSVars__$5;
 
 var _withScopeId$4 = function _withScopeId(n) {
-  return pushScopeId("data-v-b2774452"), n = n(), popScopeId(), n;
+  return pushScopeId("data-v-a1dc6c66"), n = n(), popScopeId(), n;
 };
 var _hoisted_1$p = {
   "class": "flex flex-col"
@@ -9954,12 +9985,12 @@ function render$h(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["disabled"])])) : createCommentVNode("", true)]);
 }
 
-var css_248z$b = ".fw-table-head--sortable[data-v-b2774452]:hover{background-color:var(--73ca01a2)}.fw-table-row[data-v-b2774452]:hover{background-color:var(--73ca01a2)}";
-var stylesheet$b = ".fw-table-head--sortable[data-v-b2774452]:hover{background-color:var(--73ca01a2)}.fw-table-row[data-v-b2774452]:hover{background-color:var(--73ca01a2)}";
+var css_248z$b = ".fw-table-head--sortable[data-v-a1dc6c66]:hover{background-color:var(--59fbcffe)}.fw-table-row[data-v-a1dc6c66]:hover{background-color:var(--59fbcffe)}";
+var stylesheet$b = ".fw-table-head--sortable[data-v-a1dc6c66]:hover{background-color:var(--59fbcffe)}.fw-table-row[data-v-a1dc6c66]:hover{background-color:var(--59fbcffe)}";
 styleInject(css_248z$b);
 
 __default__$6.render = render$h;
-__default__$6.__scopeId = "data-v-b2774452";
+__default__$6.__scopeId = "data-v-a1dc6c66";
 
 var script$b = defineComponent({
   name: 'FwTableHead'
@@ -34683,7 +34714,7 @@ function usePage() {
     "Page context missing. Please verify this component is nested within a valid context provider."
   );
 }
-const _hoisted_1$5$1 = { class: "vc-nav-header" };
+const _hoisted_1$5 = { class: "vc-nav-header" };
 const _hoisted_2$4$1 = ["disabled"];
 const _hoisted_3$3 = ["disabled"];
 const _hoisted_4$2$1 = { class: "vc-nav-items" };
@@ -34833,7 +34864,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         ref_key: "navContainer",
         ref: navContainer
       }, [
-        createElementVNode("div", _hoisted_1$5$1, [
+        createElementVNode("div", _hoisted_1$5, [
           createElementVNode("button", {
             type: "button",
             class: "vc-nav-arrow is-left vc-focus",
@@ -36675,7 +36706,7 @@ __default__$3.setup = __setup__$3 ? function (props, ctx) {
   return __setup__$3(props, ctx);
 } : __injectCSSVars__$3;
 
-var _hoisted_1$5 = {
+var _hoisted_1$4 = {
   "class": "fw-date-picker w-full"
 };
 var _hoisted_2$4 = {
@@ -36724,7 +36755,7 @@ var _hoisted_18 = {
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_CalendarDaySvg = resolveComponent("CalendarDaySvg");
   var _component_DatePicker = resolveComponent("DatePicker");
-  return openBlock(), createElementBlock("div", _hoisted_1$5, [createVNode(_component_DatePicker, {
+  return openBlock(), createElementBlock("div", _hoisted_1$4, [createVNode(_component_DatePicker, {
     modelValue: _ctx.dateModel,
     "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
       return _ctx.dateModel = $event;
@@ -37059,7 +37090,7 @@ __default__$2.setup = __setup__$2 ? function (props, ctx) {
 var _withScopeId$2 = function _withScopeId(n) {
   return pushScopeId("data-v-6df01fae"), n = n(), popScopeId(), n;
 };
-var _hoisted_1$4 = ["id", "aria-hidden"];
+var _hoisted_1$3 = ["id", "aria-hidden"];
 var _hoisted_2$3 = {
   key: 0,
   "data-popper-arrow": "",
@@ -37099,7 +37130,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, [renderSlot(_ctx.$slots, "content", {}, function () {
     return [createTextVNode(toDisplayString(_ctx.title), 1)];
-  }), _ctx.showArrow ? (openBlock(), createElementBlock("span", _hoisted_2$3)) : createCommentVNode("", true)], 10, _hoisted_1$4)], 2);
+  }), _ctx.showArrow ? (openBlock(), createElementBlock("span", _hoisted_2$3)) : createCommentVNode("", true)], 10, _hoisted_1$3)], 2);
 }
 
 var css_248z$3 = ".fw-popover__content[data-v-6df01fae]{opacity:0;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;white-space:normal;z-index:9999}.fw-popover__content--center[data-v-6df01fae]{text-align:center}.fw-popover__content--left[data-v-6df01fae]{text-align:left}.fw-popover__content--right[data-v-6df01fae]{text-align:right}.fw-popover--visible .fw-popover__content[data-v-6df01fae]{opacity:1;pointer-events:all}.fw-popover__arrow[data-v-6df01fae]:after{height:var(--bf2f5546);left:0;top:0;-webkit-transform:translate(-50%,-50%) rotate(45deg);-moz-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:var(--bf2f5546)}.fw-popover__content[data-popper-placement^=top][data-v-6df01fae]{margin-bottom:var(--bf2f5546)!important}.fw-popover__content[data-popper-placement^=right][data-v-6df01fae]{margin-left:var(--bf2f5546)!important}.fw-popover__content[data-popper-placement^=bottom][data-v-6df01fae]{margin-top:var(--bf2f5546)!important}.fw-popover__content[data-popper-placement^=left][data-v-6df01fae]{margin-right:var(--bf2f5546)!important}.fw-popover__content[data-popper-placement^=top] .fw-popover__arrow[data-v-6df01fae]{bottom:0}.fw-popover__content[data-popper-placement^=right] .fw-popover__arrow[data-v-6df01fae]{left:0}.fw-popover__content[data-popper-placement^=bottom] .fw-popover__arrow[data-v-6df01fae]{top:0}.fw-popover__content[data-popper-placement^=left] .fw-popover__arrow[data-v-6df01fae]{right:0}.fw-popover__content[data-popper-placement^=top] .fw-popover__arrow[data-v-6df01fae]{bottom:-1px}.fw-popover__content[data-popper-placement^=top] .fw-popover__arrow[data-v-6df01fae]:after{border-left:none;border-top:none}.fw-popover__content[data-popper-placement^=right] .fw-popover__arrow[data-v-6df01fae]{left:-1px}.fw-popover__content[data-popper-placement^=right] .fw-popover__arrow[data-v-6df01fae]:after{border-right:none;border-top:none}.fw-popover__content[data-popper-placement^=bottom] .fw-popover__arrow[data-v-6df01fae]{top:-1px}.fw-popover__content[data-popper-placement^=bottom] .fw-popover__arrow[data-v-6df01fae]:after{border-bottom:none;border-right:none}.fw-popover__content[data-popper-placement^=left] .fw-popover__arrow[data-v-6df01fae]{right:-1px}.fw-popover__content[data-popper-placement^=left] .fw-popover__arrow[data-v-6df01fae]:after{border-bottom:none;border-left:none}";
@@ -37135,6 +37166,10 @@ var script$1 = defineComponent({
       validator: function validator(value) {
         return ['sm', 'md', 'lg', 'xl', '2xl'].includes(value);
       }
+    },
+    disabled: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props, ctx) {
@@ -37156,27 +37191,28 @@ var script$1 = defineComponent({
   }
 });
 
-var _hoisted_1$3 = {
-  "class": "fw-period-selector w-fit bg-grey-light bg-opacity-10 border-grey-light border-2 border-opacity-40 gap-x-1"
-};
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_FwButton = resolveComponent("FwButton");
-  return openBlock(), createElementBlock("div", _hoisted_1$3, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.periodOptions, function (period) {
+  return openBlock(), createElementBlock("div", {
+    "class": normalizeClass(["fw-period-selector w-fit bg-grey-light bg-opacity-10 border-grey-light border-2 border-opacity-40 gap-x-1", _ctx.disabled === true ? 'hover:none cursor:none pointer-events-none' : ''])
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.periodOptions, function (period) {
     return openBlock(), createBlock(_component_FwButton, {
       key: period,
-      variant: _ctx.selectedPeriod === period ? 'tertiary' : 'transparent',
+      variant: _ctx.selectedPeriod === period ? _ctx.disabled ? 'disabled' : 'tertiary' : 'transparent',
       "class": "hover:!border-button-primary-bg -m-[2px] flex-1",
       size: _ctx.size,
       onClick: function onClick($event) {
         return _ctx.selectedPeriod = period;
-      }
+      },
+      disabled: _ctx.disabled,
+      active: _ctx.disabled && _ctx.selectedPeriod === period
     }, {
       "default": withCtx(function () {
         return [createTextVNode(toDisplayString(_ctx.generateButtonLabel(period)), 1)];
       }),
       _: 2
-    }, 1032, ["variant", "size", "onClick"]);
-  }), 128))]);
+    }, 1032, ["variant", "size", "onClick", "disabled", "active"]);
+  }), 128))], 2);
 }
 
 var css_248z$2 = ".fw-period-selector{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-moz-box-orient:horizontal;-moz-box-direction:normal;border-radius:9999px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}";

package/index.d.ts

@@ -608,7 +608,7 @@ declare const _default$l: vue.DefineComponent<{
     isBordered: boolean;
 }, {}>;
 
-type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'link' | 'text' | 'transparent';
+type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'link' | 'text' | 'transparent' | 'disabled';
 declare interface ButtonDefinition {
     text: string;
     background: string;
@@ -634,6 +634,8 @@ declare interface FwButtonProps {
     rounded?: boolean;
     loading?: boolean;
     external?: boolean;
+    disabled?: boolean;
+    active?: boolean;
 }
 
 declare const _default$k: vue.DefineComponent<{
@@ -708,6 +710,20 @@ declare const _default$k: vue.DefineComponent<{
     external: {
         type: BooleanConstructor;
     };
+    /**
+     * Whether the button is disabled or not
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether the button is preselected or not
+     */
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     baseClass: vue.Ref<string>;
     textColorClass: vue.ComputedRef<string>;
@@ -808,6 +824,20 @@ declare const _default$k: vue.DefineComponent<{
     external: {
         type: BooleanConstructor;
     };
+    /**
+     * Whether the button is disabled or not
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether the button is preselected or not
+     */
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onMouseover?: ((...args: any[]) => any) | undefined;
@@ -816,12 +846,14 @@ declare const _default$k: vue.DefineComponent<{
     onFocusout?: ((...args: any[]) => any) | undefined;
 }, {
     size: ButtonSize;
+    disabled: boolean;
     variant: ButtonVariantName;
     buttonType: ButtonTypeAttribute;
     animation: ButtonAnimation;
     rounded: boolean;
     loading: boolean;
     external: boolean;
+    active: boolean;
 }, {}>;
 
 declare interface NavMenuItem {
@@ -1299,6 +1331,9 @@ declare interface FwTableProps {
     totalAmount?: number;
     pageSize?: number;
 }
+declare type FwTableApi = {
+    resetPage: () => void;
+};
 
 declare interface FwAccordionProps {
     title?: string;
@@ -1558,7 +1593,7 @@ declare const __default__$5: vue.DefineComponent<{
     rowClicked: (row: FwTableItem) => void;
     bgHoverColor: string;
     currentPage: vue.Ref<number>;
-    maxPageAmount: vue.Ref<number | undefined>;
+    maxPageAmount: vue.ComputedRef<number | undefined>;
     pageArrowClick: (next: boolean) => void;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("rowClicked" | "columnSorted" | "pageChanged")[], "rowClicked" | "columnSorted" | "pageChanged", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     items: {
@@ -2893,6 +2928,10 @@ declare const _default$2: vue.DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     generateButtonLabel: (month: number) => string;
     selectedPeriod: vue.WritableComputedRef<number | undefined>;
@@ -2914,10 +2953,15 @@ declare const _default$2: vue.DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: ButtonSize;
+    disabled: boolean;
 }, {}>;
 
 declare const _default$1: vue.DefineComponent<{
@@ -3104,4 +3148,4 @@ declare const install: Exclude<Plugin['install'], undefined>;
 
 declare module '@frollo/frollo-web-ui/icons' { }
 
-export { type ButtonAnimation, type ButtonDefinition, type ButtonDefinitionList, type ButtonSize, type ButtonSizes, type ButtonTypeAttribute, type ButtonVariantName, __default__$4 as FwAccordion, type FwAccordionProps, _default$6 as FwBarChart, type FwBarChartProps, type FwBarGraphData, _default$k as FwButton, type FwButtonProps, _default$l as FwCard, type FwCardProps, _default$n as FwCheckbox, type FwCheckboxProps, __default__$3 as FwDatePicker, type FwDatePickerProps, _default$4 as FwDrawer, type FwDrawerProps, _default$m as FwDropdown, type FwDropdownOption, type FwDropdownProps, __default__$1 as FwEmailPulse, _default$c as FwImage, type FwImageProps, _default$o as FwInput, type FwInputProps, type FwInputType, _default$b as FwLoadingBar, _default$a as FwLoadingCard, _default as FwLoadingSpinner, _default$9 as FwLoadingTable, _default$1 as FwMediaPicker, type FwMediaPickerProps, _default$g as FwModal, type FwModalProps, _default$j as FwNavigationMenu, _default$2 as FwPeriodSelector, __default__$2 as FwPopover, type FwPopoverProps, _default$f as FwProgressBar, _default$3 as FwProviderList, type FwProviderListItem, type FwProviderListProps, _default$5 as FwSidebarMenu, type FwSidebarMenuItem, __default__ as FwSuccessPulse, _default$h as FwTab, __default__$5 as FwTable, type FwTableFormatFunction, _default$e as FwTableHead, type FwTableItem, type FwTableItemOptions, type FwTableProps, _default$d as FwTableRow, type FwTableSort, _default$i as FwTabs, type FwTabsProps, __default__$6 as FwTag, type FwTagProps, _default$8 as FwToast, type FwToastProps, _default$7 as FwTransactionsCard, type FwTransactionsCardProps, type ModalServiceProps, type NavMenuItem, type ProgressBarStep, type TabsState, type TagDefinition, type TagDefinitionList, type TagSize, type TagSizes, type TagVariantName, type ToastPosition, type ToastServiceProps, type ToastType, type ToastTypes, install as default, modalService, toastService };
+export { type ButtonAnimation, type ButtonDefinition, type ButtonDefinitionList, type ButtonSize, type ButtonSizes, type ButtonTypeAttribute, type ButtonVariantName, __default__$4 as FwAccordion, type FwAccordionProps, _default$6 as FwBarChart, type FwBarChartProps, type FwBarGraphData, _default$k as FwButton, type FwButtonProps, _default$l as FwCard, type FwCardProps, _default$n as FwCheckbox, type FwCheckboxProps, __default__$3 as FwDatePicker, type FwDatePickerProps, _default$4 as FwDrawer, type FwDrawerProps, _default$m as FwDropdown, type FwDropdownOption, type FwDropdownProps, __default__$1 as FwEmailPulse, _default$c as FwImage, type FwImageProps, _default$o as FwInput, type FwInputProps, type FwInputType, _default$b as FwLoadingBar, _default$a as FwLoadingCard, _default as FwLoadingSpinner, _default$9 as FwLoadingTable, _default$1 as FwMediaPicker, type FwMediaPickerProps, _default$g as FwModal, type FwModalProps, _default$j as FwNavigationMenu, _default$2 as FwPeriodSelector, __default__$2 as FwPopover, type FwPopoverProps, _default$f as FwProgressBar, _default$3 as FwProviderList, type FwProviderListItem, type FwProviderListProps, _default$5 as FwSidebarMenu, type FwSidebarMenuItem, __default__ as FwSuccessPulse, _default$h as FwTab, __default__$5 as FwTable, type FwTableApi, type FwTableFormatFunction, _default$e as FwTableHead, type FwTableItem, type FwTableItemOptions, type FwTableProps, _default$d as FwTableRow, type FwTableSort, _default$i as FwTabs, type FwTabsProps, __default__$6 as FwTag, type FwTagProps, _default$8 as FwToast, type FwToastProps, _default$7 as FwTransactionsCard, type FwTransactionsCardProps, type ModalServiceProps, type NavMenuItem, type ProgressBarStep, type TabsState, type TagDefinition, type TagDefinitionList, type TagSize, type TagSizes, type TagVariantName, type ToastPosition, type ToastServiceProps, type ToastType, type ToastTypes, install as default, modalService, toastService };

package/package.json

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

package/styles/tailwind.scss

@@ -24,12 +24,11 @@
   --colorButtonTertiary: #ffffff;
   --colorButtonTertiaryText: #6923ff;
 
+  --colorButtonDisabled: #ffffff;
+  --colorButtonDisabledText: #4B4B4B;
+
   --fontFamily: 'Montserrat';
 }
-/* 
-* Default font family
-*/
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');
 
 /** Typography */
 

package/tailwind.config.js

@@ -22,6 +22,10 @@ module.exports = {
         tertiary: {
           bg: 'var(--colorButtonTertiary)',
           text: 'var(--colorButtonTertiaryText)'
+        },
+        disabled: {
+          bg: 'var(--colorButtonDisabled)',
+          text: 'var(--colorButtonDisabledText)'
         }
       },
       grey: {

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

@@ -72,6 +72,20 @@ declare const _default: import("vue").DefineComponent<{
     external: {
         type: BooleanConstructor;
     };
+    /**
+     * Whether the button is disabled or not
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether the button is preselected or not
+     */
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     baseClass: import("vue").Ref<string>;
     textColorClass: import("vue").ComputedRef<string>;
@@ -172,6 +186,20 @@ declare const _default: import("vue").DefineComponent<{
     external: {
         type: BooleanConstructor;
     };
+    /**
+     * Whether the button is disabled or not
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether the button is preselected or not
+     */
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onMouseover?: ((...args: any[]) => any) | undefined;
@@ -180,11 +208,13 @@ declare const _default: import("vue").DefineComponent<{
     onFocusout?: ((...args: any[]) => any) | undefined;
 }, {
     size: ButtonSize;
+    disabled: boolean;
     variant: ButtonVariantName;
     buttonType: ButtonTypeAttribute;
     animation: ButtonAnimation;
     rounded: boolean;
     loading: boolean;
     external: boolean;
+    active: boolean;
 }, {}>;
 export default _default;

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

@@ -1,4 +1,4 @@
-export type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'link' | 'text' | 'transparent';
+export type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'link' | 'text' | 'transparent' | 'disabled';
 export declare interface ButtonDefinition {
     text: string;
     background: string;
@@ -24,4 +24,6 @@ export declare interface FwButtonProps {
     rounded?: boolean;
     loading?: boolean;
     external?: boolean;
+    disabled?: boolean;
+    active?: boolean;
 }

package/types/components/fw-period-selector/fw-period-selector.vue.d.ts

@@ -18,6 +18,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     generateButtonLabel: (month: number) => string;
     selectedPeriod: import("vue").WritableComputedRef<number | undefined>;
@@ -39,9 +43,14 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: ButtonSize;
+    disabled: boolean;
 }, {}>;
 export default _default;

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

@@ -48,7 +48,7 @@ declare const __default__: import("vue").DefineComponent<{
     rowClicked: (row: FwTableItem) => void;
     bgHoverColor: string;
     currentPage: import("vue").Ref<number>;
-    maxPageAmount: import("vue").Ref<number | undefined>;
+    maxPageAmount: import("vue").ComputedRef<number | undefined>;
     pageArrowClick: (next: boolean) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("rowClicked" | "columnSorted" | "pageChanged")[], "rowClicked" | "columnSorted" | "pageChanged", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {

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

@@ -17,3 +17,6 @@ export declare interface FwTableProps {
     totalAmount?: number;
     pageSize?: number;
 }
+export declare type FwTableApi = {
+    resetPage: () => void;
+};