@frollo/frollo-web-ui 8.0.4 → 8.1.1

package/esm/{fw-table-row-7vke3KXB.js → fw-table-row-Cianlk0N.js}

@@ -1,7 +1,8 @@
-import { g as render$3, h as render$4 } from './index-B-9TSbb0.js';
-import { defineComponent, computed, ref, onMounted, useCssVars, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createCommentVNode, Fragment, renderList, withKeys, toDisplayString, createBlock, createVNode } from 'vue';
+import { g as render$3, h as render$4, i as render$5, f as render$6 } from './index-svDiDkSU.js';
+import { defineComponent, computed, ref, onMounted, useCssVars, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, renderSlot, createCommentVNode, Fragment, renderList, withKeys, toDisplayString, createBlock, createVNode, withCtx } from 'vue';
 import { u as useColours } from './get-root-colours-DYEoJPEb.js';
 import { s as script$2 } from './fw-loading-bar-DThRjdw1.js';
+import { s as script$3 } from './fw-button-DdxvSBFa.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var __default__ = defineComponent({
@@ -9,11 +10,15 @@ var __default__ = defineComponent({
   components: {
     ArrowSortSvg: render$3,
     ArrowDownSvg: render$4,
-    FwLoadingBar: script$2
+    ChevronLeftSvg: render$5,
+    ChevronRightSvg: render$6,
+    FwLoadingBar: script$2,
+    FwButton: script$3
   },
   emits: [/** Fired when a row is clicked with row data */
   'rowClicked', /** Fired when a column is sorted */
-  'columnSorted'],
+  'columnSorted', /** Fired when a page number or arrow is clicked */
+  'pageChanged'],
   props: {
     items: {
       type: Array,
@@ -37,6 +42,16 @@ var __default__ = defineComponent({
     },
     autoSortColumn: {
       type: Number
+    },
+    enablePagination: {
+      type: Boolean,
+      "default": false
+    },
+    totalAmount: {
+      type: Number
+    },
+    pageSize: {
+      type: Number
     }
   },
   setup: function setup(props, ctx) {
@@ -46,10 +61,15 @@ var __default__ = defineComponent({
     var sortBy = ref('');
     var sortDirection = ref('asc');
     var currentSortedColumn = ref('');
+    var currentPage = ref(1);
+    var maxPageAmount = ref();
     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;
@@ -119,6 +139,10 @@ var __default__ = defineComponent({
     var rowClicked = function rowClicked(row) {
       if (props.clickableRows) ctx.emit('rowClicked', row);
     };
+    var pageArrowClick = function pageArrowClick(next) {
+      currentPage.value = currentPage.value + (next ? 1 : -1);
+      ctx.emit('pageChanged', next);
+    };
     return {
       columns: columns,
       sortBy: sortBy,
@@ -131,14 +155,17 @@ var __default__ = defineComponent({
       isColumnSortable: isColumnSortable,
       isDisabled: isDisabled,
       rowClicked: rowClicked,
-      bgHoverColor: bgHoverColor
+      bgHoverColor: bgHoverColor,
+      currentPage: currentPage,
+      maxPageAmount: maxPageAmount,
+      pageArrowClick: pageArrowClick
     };
   }
 });
 var __injectCSSVars__ = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "d606643a": _ctx.bgHoverColor
+      "11c7ec1c": _ctx.bgHoverColor
     };
   });
 };
@@ -149,42 +176,52 @@ __default__.setup = __setup__ ? function (props, ctx) {
 } : __injectCSSVars__;
 
 var _withScopeId = function _withScopeId(n) {
-  return pushScopeId("data-v-46577d1a"), n = n(), popScopeId(), n;
+  return pushScopeId("data-v-b7ffd9d4"), n = n(), popScopeId(), n;
+};
+var _hoisted_1$2 = {
+  "class": "flex flex-col"
 };
-var _hoisted_1$2 = ["aria-busy"];
-var _hoisted_2$1 = {
+var _hoisted_2$1 = ["aria-busy"];
+var _hoisted_3$1 = {
   "class": "text-p2 border-b border-grey-40"
 };
-var _hoisted_3$1 = ["tabindex", "onKeydown", "onClick"];
-var _hoisted_4 = {
+var _hoisted_4 = ["tabindex", "onKeydown", "onClick"];
+var _hoisted_5 = {
   "class": "flex flex-row items-center"
 };
-var _hoisted_5 = {
+var _hoisted_6 = {
   key: 0,
   "class": "ml-1 flex items-center justify-center w-5"
 };
-var _hoisted_6 = {
+var _hoisted_7 = {
   "class": "text-p2 bg-white font-light"
 };
-var _hoisted_7 = {
+var _hoisted_8 = {
   key: 0,
   "class": "py-4 pl-5 pr-3 text-left"
 };
-var _hoisted_8 = {
+var _hoisted_9 = {
   key: 0,
   "class": "py-4 pl-5 pr-3 text-left"
 };
-var _hoisted_9 = ["onClick", "tabindex", "onKeydown"];
-var _hoisted_10 = ["innerHTML"];
+var _hoisted_10 = ["onClick", "tabindex", "onKeydown"];
+var _hoisted_11 = ["innerHTML"];
+var _hoisted_12 = {
+  key: 0,
+  "class": "flex flex-row justify-center h-[44px] mt-8 space-x-2 mb-[40px]"
+};
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ArrowSortSvg = resolveComponent("ArrowSortSvg");
   var _component_ArrowDownSvg = resolveComponent("ArrowDownSvg");
   var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
-  return openBlock(), createElementBlock("table", {
-    "class": normalizeClass(["fw-table table-auto table-responsive rounded-md shadow-card", _ctx.loading ? 'cursor-wait' : '']),
+  var _component_ChevronLeftSvg = resolveComponent("ChevronLeftSvg");
+  var _component_FwButton = resolveComponent("FwButton");
+  var _component_ChevronRightSvg = resolveComponent("ChevronRightSvg");
+  return openBlock(), createElementBlock("div", _hoisted_1$2, [createElementVNode("table", {
+    "class": normalizeClass(["fw-table table-auto table-responsive rounded-md shadow-card flex-1", _ctx.loading ? 'cursor-wait' : '']),
     "aria-live": "polite",
     "aria-busy": _ctx.loading
-  }, [createElementVNode("thead", _hoisted_2$1, [createElementVNode("tr", null, [_ctx.$slots.preHead ? renderSlot(_ctx.$slots, "preHead", {
+  }, [createElementVNode("thead", _hoisted_3$1, [createElementVNode("tr", null, [_ctx.$slots.preHead ? renderSlot(_ctx.$slots, "preHead", {
     key: 0
   }) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, thKey) {
     return openBlock(), createElementBlock(Fragment, {
@@ -199,9 +236,9 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: function onClick($event) {
         return _ctx.sortColumn(column);
       }
-    }, [createElementVNode("div", _hoisted_4, [createElementVNode("span", {
+    }, [createElementVNode("div", _hoisted_5, [createElementVNode("span", {
       "class": normalizeClass(_ctx.sortedIcon('asc', column) || _ctx.sortedIcon('desc', column) ? 'text-primary' : '')
-    }, toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_5, [!_ctx.sortedIcon('asc', column) && !_ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowSortSvg, {
+    }, toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_6, [!_ctx.sortedIcon('asc', column) && !_ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowSortSvg, {
       key: 0,
       "class": "inline-block w-full text-grey-base"
     })) : createCommentVNode("", true), _ctx.sortedIcon('asc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
@@ -210,10 +247,10 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     })) : createCommentVNode("", true), _ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
       key: 2,
       "class": "inline-block w-4 text-primary"
-    })) : createCommentVNode("", true)])) : createCommentVNode("", true)])], 42, _hoisted_3$1)) : createCommentVNode("", true)], 64);
+    })) : createCommentVNode("", true)])) : createCommentVNode("", true)])], 42, _hoisted_4)) : createCommentVNode("", true)], 64);
   }), 128)), _ctx.$slots.head ? renderSlot(_ctx.$slots, "head", {
     key: 1
-  }) : createCommentVNode("", true)])]), createElementVNode("tbody", _hoisted_6, [_ctx.loading ? (openBlock(true), createElementBlock(Fragment, {
+  }) : createCommentVNode("", true)])]), createElementVNode("tbody", _hoisted_7, [_ctx.loading ? (openBlock(true), createElementBlock(Fragment, {
     key: 0
   }, renderList(_ctx.sortedData, function (row, trKey) {
     return openBlock(), createElementBlock("tr", {
@@ -221,10 +258,10 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, colKey) {
       return openBlock(), createElementBlock(Fragment, {
         key: colKey
-      }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("td", _hoisted_7, [createVNode(_component_FwLoadingBar, {
+      }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("td", _hoisted_8, [createVNode(_component_FwLoadingBar, {
         "class": "w-full h-7"
       })])) : createCommentVNode("", true)], 64);
-    }), 128)), _ctx.$slots.row ? (openBlock(), createElementBlock("td", _hoisted_8, [createVNode(_component_FwLoadingBar, {
+    }), 128)), _ctx.$slots.row ? (openBlock(), createElementBlock("td", _hoisted_9, [createVNode(_component_FwLoadingBar, {
       "class": "w-full h-7"
     })])) : createCommentVNode("", true)]);
   }), 128)) : (openBlock(true), createElementBlock(Fragment, {
@@ -250,20 +287,51 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "class": "py-2 pl-5 pr-3 text-left",
         innerHTML: _ctx.formattedText(row, column)
-      }, null, 8, _hoisted_10)) : createCommentVNode("", true)], 64);
+      }, null, 8, _hoisted_11)) : createCommentVNode("", true)], 64);
     }), 128)), _ctx.$slots.row ? renderSlot(_ctx.$slots, "row", {
       key: 1,
       row: row
-    }) : createCommentVNode("", true)], 42, _hoisted_9);
-  }), 128))])], 10, _hoisted_1$2);
+    }) : createCommentVNode("", true)], 42, _hoisted_10);
+  }), 128))])], 10, _hoisted_2$1), _ctx.enablePagination ? (openBlock(), createElementBlock("div", _hoisted_12, [createVNode(_component_FwButton, {
+    variant: 'tertiary',
+    disabled: _ctx.currentPage === 1,
+    size: "sm",
+    "class": "border-grey-40",
+    onClick: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.pageArrowClick(false);
+    })
+  }, {
+    "default": withCtx(function () {
+      return [createVNode(_component_ChevronLeftSvg, {
+        "class": "h-4 w-4",
+        "stroke-width": "3"
+      })];
+    }),
+    _: 1
+  }, 8, ["disabled"]), renderSlot(_ctx.$slots, "page"), createVNode(_component_FwButton, {
+    variant: 'tertiary',
+    disabled: _ctx.currentPage === _ctx.maxPageAmount,
+    size: "sm",
+    "class": "border-grey-40",
+    onClick: _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.pageArrowClick(true);
+    })
+  }, {
+    "default": withCtx(function () {
+      return [createVNode(_component_ChevronRightSvg, {
+        "class": "h-4 w-4"
+      })];
+    }),
+    _: 1
+  }, 8, ["disabled"])])) : createCommentVNode("", true)]);
 }
 
-var css_248z = ".fw-table-head--sortable[data-v-46577d1a]:hover{background-color:var(--d606643a)}.fw-table-row[data-v-46577d1a]:hover{background-color:var(--d606643a)}";
-var stylesheet = ".fw-table-head--sortable[data-v-46577d1a]:hover{background-color:var(--d606643a)}.fw-table-row[data-v-46577d1a]:hover{background-color:var(--d606643a)}";
+var css_248z = ".fw-table-head--sortable[data-v-b7ffd9d4]:hover{background-color:var(--11c7ec1c)}.fw-table-row[data-v-b7ffd9d4]:hover{background-color:var(--11c7ec1c)}";
+var stylesheet = ".fw-table-head--sortable[data-v-b7ffd9d4]:hover{background-color:var(--11c7ec1c)}.fw-table-row[data-v-b7ffd9d4]:hover{background-color:var(--11c7ec1c)}";
 styleInject(css_248z);
 
 __default__.render = render$2;
-__default__.__scopeId = "data-v-46577d1a";
+__default__.__scopeId = "data-v-b7ffd9d4";
 
 var script$1 = defineComponent({
   name: 'FwTableHead'

package/esm/fw-table.js

@@ -1,7 +1,9 @@
-export { _ as FwTable, s as FwTableHead, a as FwTableRow } from './fw-table-row-7vke3KXB.js';
-import './index-B-9TSbb0.js';
+export { _ as FwTable, s as FwTableHead, a as FwTableRow } from './fw-table-row-Cianlk0N.js';
+import './index-svDiDkSU.js';
 import 'vue';
 import './check--YD4Ts6g.js';
 import './get-root-colours-DYEoJPEb.js';
 import './fw-loading-bar-DThRjdw1.js';
 import './style-inject.es-tgCJW-Cu.js';
+import './fw-button-DdxvSBFa.js';
+import './fw-loading-spinner-BEzZf1xe.js';

package/esm/{fw-tag-BVEv8PMh.js → fw-tag-508OLlZR.js}

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed, useCssVars, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, renderSlot, createCommentVNode, createBlock, withCtx, createVNode } from 'vue';
 import './fw-button.js';
-import { b as render$1 } from './index-B-9TSbb0.js';
+import { b as render$1 } from './index-svDiDkSU.js';
 import { u as useColours } from './get-root-colours-DYEoJPEb.js';
-import { s as script } from './fw-button-D8GUq_wg.js';
+import { s as script } from './fw-button-DdxvSBFa.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var __default__ = defineComponent({

package/esm/fw-tag.js

@@ -1,9 +1,9 @@
-export { _ as FwTag } from './fw-tag-BVEv8PMh.js';
+export { _ as FwTag } from './fw-tag-508OLlZR.js';
 import 'vue';
 import './fw-button.js';
-import './fw-button-D8GUq_wg.js';
-import './fw-loading-spinner-AsWqai_A.js';
-import './index-B-9TSbb0.js';
+import './fw-button-DdxvSBFa.js';
+import './fw-loading-spinner-BEzZf1xe.js';
+import './index-svDiDkSU.js';
 import './check--YD4Ts6g.js';
 import './style-inject.es-tgCJW-Cu.js';
 import './get-root-colours-DYEoJPEb.js';

package/esm/fw-toast.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, onMounted, watchEffect, openBlock, createElementBlock, Fragment, createBlock, Teleport, createVNode, TransitionGroup, createCommentVNode, Transition, withCtx, normalizeClass, createElementVNode, resolveDynamicComponent, renderSlot } from 'vue';
 import { u as uniqueId } from './uniqueId-DK6xzFd8.js';
-import { c as render$1, d as render$2, j as render$3 } from './index-B-9TSbb0.js';
+import { c as render$1, d as render$2, k as render$3 } from './index-svDiDkSU.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 import './check--YD4Ts6g.js';
 

package/esm/fw-transactions-card.js

@@ -1,9 +1,9 @@
 import { defineComponent, createElementVNode, resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, toDisplayString, createElementBlock } from 'vue';
 import { s as script$1 } from './fw-card-bsYbpPmW.js';
-import { s as script$2 } from './fw-image-DAUZLkf4.js';
+import { s as script$2 } from './fw-image-DedhILQL.js';
 import './fw-loading-bar-DThRjdw1.js';
 import './style-inject.es-tgCJW-Cu.js';
-import './index-B-9TSbb0.js';
+import './index-svDiDkSU.js';
 import './check--YD4Ts6g.js';
 
 var script = defineComponent({

package/esm/{index-B-9TSbb0.js → index-svDiDkSU.js}

@@ -583,4 +583,4 @@ function render(_ctx, _cache) {
   return (openBlock(), createElementBlock("svg", _hoisted_1, [..._hoisted_3]))
 }
 
-export { render$3 as a, render$6 as b, render$b as c, render$a as d, render$7 as e, render$n as f, render$9 as g, render$8 as h, render$d as i, render$l as j, render$s as k, render$o as r };
+export { render$3 as a, render$6 as b, render$b as c, render$a as d, render$7 as e, render$n as f, render$9 as g, render$8 as h, render$m as i, render$d as j, render$l as k, render$s as l, render$o as r };

package/esm/index.js

@@ -24,19 +24,19 @@ import { FwDatePicker as __default__$1 } from './fw-date-picker.js';
 import { FwPopover as __default__$3 } from './fw-popover.js';
 import { FwEmailPulse as __default__$2, FwSuccessPulse as __default__$4 } from './fw-animations.js';
 import { F as Form } from './vee-validate.esm-3ptvCDR1.js';
-import { s as script$7 } from './fw-input-CPU_C8IU.js';
-import { s as script$5 } from './fw-dropdown-YXj5yyty.js';
+import { s as script$7 } from './fw-input-BPFFMpc2.js';
+import { s as script$5 } from './fw-dropdown-BcnKbaW1.js';
 import { s as script$2 } from './fw-card-bsYbpPmW.js';
-import { s as script$1 } from './fw-button-D8GUq_wg.js';
-import { _ as __default__$6 } from './fw-tag-BVEv8PMh.js';
-import { _ as __default__$5, s as script$i, a as script$j } from './fw-table-row-7vke3KXB.js';
-import { s as script$6 } from './fw-image-DAUZLkf4.js';
+import { s as script$1 } from './fw-button-DdxvSBFa.js';
+import { _ as __default__$6 } from './fw-tag-508OLlZR.js';
+import { _ as __default__$5, s as script$i, a as script$j } from './fw-table-row-Cianlk0N.js';
+import { s as script$6 } from './fw-image-DedhILQL.js';
 import { s as script$8 } from './fw-loading-bar-DThRjdw1.js';
-import { s as script$a } from './fw-loading-spinner-AsWqai_A.js';
+import { s as script$a } from './fw-loading-spinner-BEzZf1xe.js';
 import { reactive, createApp, h } from 'vue';
 import './uniqueId-DK6xzFd8.js';
 import './style-inject.es-tgCJW-Cu.js';
-import './index-B-9TSbb0.js';
+import './index-svDiDkSU.js';
 import './check--YD4Ts6g.js';
 import './get-root-colours-DYEoJPEb.js';
 import './index-BVcOAKar.js';