@frollo/frollo-web-ui 8.1.0 → 8.1.2

package/frollo-web-ui.esm.js

@@ -8302,10 +8302,10 @@ var _hoisted_10$4 = {
 };
 var _hoisted_11$2 = ["aria-labelledby"];
 var _hoisted_12$2 = ["onClick"];
-var _hoisted_13$2 = {
+var _hoisted_13$1 = {
   "class": "flex items-center gap-x-2"
 };
-var _hoisted_14$2 = {
+var _hoisted_14$1 = {
   "class": "flex flex-col text-left"
 };
 var _hoisted_15$1 = {
@@ -8364,11 +8364,11 @@ function render$p(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: function onClick($event) {
             return _ctx.selectOption(option);
           }
-        }, [createElementVNode("div", _hoisted_13$2, [option.image_url ? (openBlock(), createBlock(_component_FwImage, {
+        }, [createElementVNode("div", _hoisted_13$1, [option.image_url ? (openBlock(), createBlock(_component_FwImage, {
           key: 0,
           src: option.image_url,
           "class": "w-[20px] h-[20px]"
-        }, null, 8, ["src"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_14$2, [createElementVNode("span", null, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_15$1, toDisplayString(option.description), 1)) : createCommentVNode("", true)])])], 10, _hoisted_12$2);
+        }, null, 8, ["src"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_14$1, [createElementVNode("span", null, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_15$1, toDisplayString(option.description), 1)) : createCommentVNode("", true)])])], 10, _hoisted_12$2);
       }), 128))], 10, _hoisted_11$2), [[vShow, _ctx.isOpen]])];
     }),
     _: 1
@@ -9565,8 +9565,7 @@ var __default__$6 = defineComponent({
     ChevronLeftSvg: render$O,
     ChevronRightSvg: render$P,
     FwLoadingBar: script$k,
-    FwButton: script$f,
-    FwInput: script$m
+    FwButton: script$f
   },
   emits: [/** Fired when a row is clicked with row data */
   'rowClicked', /** Fired when a column is sorted */
@@ -9602,6 +9601,9 @@ var __default__$6 = defineComponent({
     },
     totalAmount: {
       type: Number
+    },
+    pageSize: {
+      type: Number
     }
   },
   setup: function setup(props, ctx) {
@@ -9611,39 +9613,15 @@ var __default__$6 = defineComponent({
     var sortBy = ref('');
     var sortDirection = ref('asc');
     var currentSortedColumn = ref('');
-    var currentPage = ref('1');
-    var maxDisplayedPages = 7;
-    var pages = computed(function () {
-      if (!props.totalAmount) return;
-      var currentPageNumber = Number(currentPage.value);
-      var pageButtons = [];
-      var pageNumberLimit = currentPageNumber + maxDisplayedPages - 1;
-      var maxPageNumber = props.totalAmount - currentPageNumber < maxDisplayedPages ? props.totalAmount : pageNumberLimit + 1;
-      for (var i = currentPageNumber; i < maxPageNumber + 1; i++) {
-        pageButtons.push({
-          pageNumber: i.toString(),
-          selected: i.toString() === currentPage.value
-        });
-      }
-      if (props.totalAmount === maxDisplayedPages) {
-        return pageButtons;
-      }
-      if (props.totalAmount - currentPageNumber > maxDisplayedPages) {
-        pageButtons.push({
-          pageNumber: '...',
-          selected: false
-        }, {
-          pageNumber: props.totalAmount.toString(),
-          selected: false
-        });
-      }
-      ctx.emit('pageChanged', currentPage.value);
-      return pageButtons;
-    });
+    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;
@@ -9713,15 +9691,9 @@ var __default__$6 = defineComponent({
     var rowClicked = function rowClicked(row) {
       if (props.clickableRows) ctx.emit('rowClicked', row);
     };
-    var pageNumberClick = function pageNumberClick(pageNumber) {
-      if (pageNumber === '...') {
-        currentPage.value = (Number(currentPage.value) + maxDisplayedPages + 1).toString();
-        return;
-      }
-      currentPage.value = pageNumber;
-    };
     var pageArrowClick = function pageArrowClick(next) {
-      currentPage.value = Number(currentPage.value) + (next ? 1 : -1).toString();
+      currentPage.value = currentPage.value + (next ? 1 : -1);
+      ctx.emit('pageChanged', next);
     };
     return {
       columns: columns,
@@ -9737,8 +9709,7 @@ var __default__$6 = defineComponent({
       rowClicked: rowClicked,
       bgHoverColor: bgHoverColor,
       currentPage: currentPage,
-      pages: pages,
-      pageNumberClick: pageNumberClick,
+      maxPageAmount: maxPageAmount,
       pageArrowClick: pageArrowClick
     };
   }
@@ -9746,7 +9717,7 @@ var __default__$6 = defineComponent({
 var __injectCSSVars__$5 = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "c795d904": _ctx.bgHoverColor
+      "73ca01a2": _ctx.bgHoverColor
     };
   });
 };
@@ -9757,7 +9728,7 @@ __default__$6.setup = __setup__$5 ? function (props, ctx) {
 } : __injectCSSVars__$5;
 
 var _withScopeId$4 = function _withScopeId(n) {
-  return pushScopeId("data-v-84c515f0"), n = n(), popScopeId(), n;
+  return pushScopeId("data-v-b2774452"), n = n(), popScopeId(), n;
 };
 var _hoisted_1$p = {
   "class": "flex flex-col"
@@ -9789,30 +9760,20 @@ var _hoisted_10$1 = ["onClick", "tabindex", "onKeydown"];
 var _hoisted_11$1 = ["innerHTML"];
 var _hoisted_12$1 = {
   key: 0,
-  "class": "flex flex-row h-[44px] mt-8 px-64 space-x-2"
-};
-var _hoisted_13$1 = {
-  "class": "h-4 w-4"
+  "class": "flex flex-row justify-center h-[44px] mt-8 space-x-2 mb-[40px]"
 };
-var _hoisted_14$1 = /*#__PURE__*/_withScopeId$4(function () {
-  return /*#__PURE__*/createElementVNode("strong", {
-    "class": "whitespace-nowrap px-4 self-center"
-  }, "Go to", -1);
-});
 function render$f(_ctx, _cache, $props, $setup, $data, $options) {
-  var _ctx$options;
   var _component_ArrowSortSvg = resolveComponent("ArrowSortSvg");
   var _component_ArrowDownSvg = resolveComponent("ArrowDownSvg");
   var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
   var _component_ChevronLeftSvg = resolveComponent("ChevronLeftSvg");
   var _component_FwButton = resolveComponent("FwButton");
   var _component_ChevronRightSvg = resolveComponent("ChevronRightSvg");
-  var _component_FwInput = resolveComponent("FwInput");
-  return openBlock(), createElementBlock("div", _hoisted_1$p, [createElementVNode("table", {
-    "class": normalizeClass(["fw-table table-auto table-responsive rounded-md shadow-card flex-1", _ctx.loading ? 'cursor-wait' : '']),
+  return openBlock(), createElementBlock("div", _hoisted_1$p, [createElementVNode("table", mergeProps(_ctx.$attrs, {
+    "class": ["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_3$j, [createElementVNode("tr", null, [_ctx.$slots.preHead ? renderSlot(_ctx.$slots, "preHead", {
+  }), [createElementVNode("thead", _hoisted_3$j, [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, {
@@ -9883,9 +9844,9 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
       key: 1,
       row: row
     }) : createCommentVNode("", true)], 42, _hoisted_10$1);
-  }), 128))])], 10, _hoisted_2$n), _ctx.enablePagination || (_ctx$options = _ctx.options) !== null && _ctx$options !== void 0 && _ctx$options.enablePagination ? (openBlock(), createElementBlock("div", _hoisted_12$1, [createVNode(_component_FwButton, {
+  }), 128))])], 16, _hoisted_2$n), _ctx.enablePagination ? (openBlock(), createElementBlock("div", _hoisted_12$1, [createVNode(_component_FwButton, {
     variant: 'tertiary',
-    disabled: _ctx.currentPage === '1',
+    disabled: _ctx.currentPage === 1,
     size: "sm",
     "class": "border-grey-40",
     onClick: _cache[0] || (_cache[0] = function ($event) {
@@ -9894,33 +9855,14 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     "default": withCtx(function () {
       return [createVNode(_component_ChevronLeftSvg, {
-        "class": "h-4 w-4 text-red-500",
+        "class": "h-4 w-4",
         "stroke-width": "3"
       })];
     }),
     _: 1
-  }, 8, ["disabled"]), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.pages, function (page) {
-    return openBlock(), createBlock(_component_FwButton, {
-      rounded: "",
-      size: "sm",
-      key: page.pageNumber,
-      variant: page.selected ? 'tertiary' : 'secondary',
-      "class": normalizeClass({
-        'border-none': !page.selected,
-        'bg-transparent': true
-      }),
-      onClick: function onClick($event) {
-        return _ctx.pageNumberClick(page.pageNumber);
-      }
-    }, {
-      "default": withCtx(function () {
-        return [createElementVNode("div", _hoisted_13$1, [createElementVNode("strong", null, toDisplayString(page.pageNumber), 1)])];
-      }),
-      _: 2
-    }, 1032, ["variant", "class", "onClick"]);
-  }), 128)), createVNode(_component_FwButton, {
+  }, 8, ["disabled"]), renderSlot(_ctx.$slots, "page"), createVNode(_component_FwButton, {
     variant: 'tertiary',
-    disabled: _ctx.totalAmount && Number(_ctx.currentPage) === _ctx.totalAmount,
+    disabled: _ctx.currentPage === _ctx.maxPageAmount,
     size: "sm",
     "class": "border-grey-40",
     onClick: _cache[1] || (_cache[1] = function ($event) {
@@ -9933,24 +9875,15 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
       })];
     }),
     _: 1
-  }, 8, ["disabled"]), _hoisted_14$1, createVNode(_component_FwInput, {
-    "center-align-input": "",
-    "class": "max-w-[66px] p-0 text-center",
-    name: "page",
-    modelValue: _ctx.currentPage,
-    "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
-      return _ctx.currentPage = $event;
-    }),
-    type: "tel"
-  }, null, 8, ["modelValue"])])) : createCommentVNode("", true)]);
+  }, 8, ["disabled"])])) : createCommentVNode("", true)]);
 }
 
-var css_248z$a = ".fw-table-head--sortable[data-v-84c515f0]:hover{background-color:var(--c795d904)}.fw-table-row[data-v-84c515f0]:hover{background-color:var(--c795d904)}";
-var stylesheet$a = ".fw-table-head--sortable[data-v-84c515f0]:hover{background-color:var(--c795d904)}.fw-table-row[data-v-84c515f0]:hover{background-color:var(--c795d904)}";
+var css_248z$a = ".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$a = ".fw-table-head--sortable[data-v-b2774452]:hover{background-color:var(--73ca01a2)}.fw-table-row[data-v-b2774452]:hover{background-color:var(--73ca01a2)}";
 styleInject(css_248z$a);
 
 __default__$6.render = render$f;
-__default__$6.__scopeId = "data-v-84c515f0";
+__default__$6.__scopeId = "data-v-b2774452";
 
 var script$9 = defineComponent({
   name: 'FwTableHead'

package/index.d.ts

@@ -1293,6 +1293,7 @@ declare interface FwTableProps {
     autoSortColumn?: number;
     enablePagination?: boolean;
     totalAmount?: number;
+    pageSize?: number;
 }
 
 declare interface FwAccordionProps {
@@ -1496,10 +1497,6 @@ declare const __default__$6: vue.DefineComponent<{
     dismissable: boolean;
 }, {}>;
 
-interface PageButton {
-    pageNumber: string;
-    selected: boolean;
-}
 declare const __default__$5: vue.DefineComponent<{
     items: {
         type: PropType<FwTableItem[]>;
@@ -1531,6 +1528,9 @@ declare const __default__$5: vue.DefineComponent<{
     totalAmount: {
         type: NumberConstructor;
     };
+    pageSize: {
+        type: NumberConstructor;
+    };
 }, {
     columns: vue.ComputedRef<string[]>;
     sortBy: vue.Ref<string>;
@@ -1544,9 +1544,8 @@ declare const __default__$5: vue.DefineComponent<{
     isDisabled: (column: string) => boolean;
     rowClicked: (row: FwTableItem) => void;
     bgHoverColor: string;
-    currentPage: vue.Ref<string>;
-    pages: vue.ComputedRef<PageButton[] | undefined>;
-    pageNumberClick: (pageNumber: string) => void;
+    currentPage: vue.Ref<number>;
+    maxPageAmount: vue.Ref<number | undefined>;
     pageArrowClick: (next: boolean) => void;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("rowClicked" | "columnSorted" | "pageChanged")[], "rowClicked" | "columnSorted" | "pageChanged", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     items: {
@@ -1579,6 +1578,9 @@ declare const __default__$5: vue.DefineComponent<{
     totalAmount: {
         type: NumberConstructor;
     };
+    pageSize: {
+        type: NumberConstructor;
+    };
 }>> & {
     onRowClicked?: ((...args: any[]) => any) | undefined;
     onColumnSorted?: ((...args: any[]) => any) | undefined;

package/package.json

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

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

@@ -1,9 +1,5 @@
 import { PropType } from 'vue';
 import { FwTableItem, FwTableSort } from './index.types';
-interface PageButton {
-    pageNumber: string;
-    selected: boolean;
-}
 declare const __default__: import("vue").DefineComponent<{
     items: {
         type: PropType<FwTableItem[]>;
@@ -35,6 +31,9 @@ declare const __default__: import("vue").DefineComponent<{
     totalAmount: {
         type: NumberConstructor;
     };
+    pageSize: {
+        type: NumberConstructor;
+    };
 }, {
     columns: import("vue").ComputedRef<string[]>;
     sortBy: import("vue").Ref<string>;
@@ -48,9 +47,8 @@ declare const __default__: import("vue").DefineComponent<{
     isDisabled: (column: string) => boolean;
     rowClicked: (row: FwTableItem) => void;
     bgHoverColor: string;
-    currentPage: import("vue").Ref<string>;
-    pages: import("vue").ComputedRef<PageButton[] | undefined>;
-    pageNumberClick: (pageNumber: string) => void;
+    currentPage: import("vue").Ref<number>;
+    maxPageAmount: import("vue").Ref<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: {
@@ -83,6 +81,9 @@ declare const __default__: import("vue").DefineComponent<{
     totalAmount: {
         type: NumberConstructor;
     };
+    pageSize: {
+        type: NumberConstructor;
+    };
 }>> & {
     onRowClicked?: ((...args: any[]) => any) | undefined;
     onColumnSorted?: ((...args: any[]) => any) | undefined;

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

@@ -15,4 +15,5 @@ export declare interface FwTableProps {
     autoSortColumn?: number;
     enablePagination?: boolean;
     totalAmount?: number;
+    pageSize?: number;
 }