@frollo/frollo-web-ui 8.1.1 → 8.2.0

package/esm/fw-period-selector.js

@@ -0,0 +1,76 @@
+import { defineComponent, ref, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString } from 'vue';
+import './fw-button.js';
+import { s as script$1 } from './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';
+
+var script = defineComponent({
+  name: 'FwPeriodSelector',
+  emits: [/** Fired on Click */
+  'periodSelected'],
+  components: {
+    FwButton: script$1
+  },
+  props: {
+    /**
+     * The available periods to be chosen in months.
+     */
+    periodOptions: {
+      type: Array
+    },
+    /**
+     * A size that will be propogated down to the button. Accepts: 'sm', 'md', 'lg', 'xl', '2xl'
+     */
+    size: {
+      type: String,
+      "default": 'lg',
+      validator: function validator(value) {
+        return ['sm', 'md', 'lg', 'xl', '2xl'].includes(value);
+      }
+    }
+  },
+  setup: function setup(_props, ctx) {
+    var selectedPeriod = ref();
+    var generateButtonLabel = function generateButtonLabel(month) {
+      return month === 1 ? month.toString() + ' month' : month.toString() + ' months';
+    };
+    var onClick = function onClick(period) {
+      selectedPeriod.value = period;
+      ctx.emit('periodSelected', period);
+    };
+    return {
+      generateButtonLabel: generateButtonLabel,
+      onClick: onClick,
+      selectedPeriod: selectedPeriod
+    };
+  }
+});
+
+var _hoisted_1 = {
+  "class": "flex flex-row w-fit bg-grey-light bg-opacity-10 border-grey-light border-2 border-opacity-40 rounded-full"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_FwButton = resolveComponent("FwButton");
+  return openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.periodOptions, function (period) {
+    return openBlock(), createBlock(_component_FwButton, {
+      key: period,
+      variant: _ctx.selectedPeriod === period ? 'tertiary' : 'transparent',
+      "class": "scale-105 hover:!border-button-primary-bg mx-[3px]",
+      size: _ctx.size,
+      onClick: function onClick($event) {
+        return _ctx.onClick(period);
+      }
+    }, {
+      "default": withCtx(function () {
+        return [createTextVNode(toDisplayString(_ctx.generateButtonLabel(period)), 1)];
+      }),
+      _: 2
+    }, 1032, ["variant", "size", "onClick"]);
+  }), 128))]);
+}
+
+script.render = render;
+
+export { script as FwPeriodSelector };

package/esm/fw-provider-list.js

@@ -1,6 +1,6 @@
 import { e as _defineProperty } from './_rollupPluginBabelHelpers-DpC_oIQV.js';
 import { defineComponent, ref, computed, createElementVNode, resolveComponent, openBlock, createElementBlock, toDisplayString, createVNode, withCtx, createBlock, createCommentVNode, createTextVNode } from 'vue';
-import { _ as __default__, s as script$4, a as script$5 } from './fw-table-row-Cianlk0N.js';
+import { _ as __default__, s as script$4, a as script$5 } from './fw-table-row-CBQBV4yq.js';
 import { s as script$1 } from './fw-input-BPFFMpc2.js';
 import { _ as __default__$1 } from './fw-tag-508OLlZR.js';
 import { s as script$3 } from './fw-button-DdxvSBFa.js';

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

@@ -1,5 +1,5 @@
 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 { defineComponent, computed, ref, onMounted, useCssVars, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, createElementVNode, mergeProps, renderSlot, createCommentVNode, Fragment, renderList, normalizeClass, 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';
@@ -165,7 +165,7 @@ var __default__ = defineComponent({
 var __injectCSSVars__ = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "11c7ec1c": _ctx.bgHoverColor
+      "73ca01a2": _ctx.bgHoverColor
     };
   });
 };
@@ -176,7 +176,7 @@ __default__.setup = __setup__ ? function (props, ctx) {
 } : __injectCSSVars__;
 
 var _withScopeId = function _withScopeId(n) {
-  return pushScopeId("data-v-b7ffd9d4"), n = n(), popScopeId(), n;
+  return pushScopeId("data-v-b2774452"), n = n(), popScopeId(), n;
 };
 var _hoisted_1$2 = {
   "class": "flex flex-col"
@@ -217,11 +217,11 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   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' : '']),
+  return openBlock(), createElementBlock("div", _hoisted_1$2, [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$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, {
@@ -292,7 +292,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       key: 1,
       row: row
     }) : createCommentVNode("", true)], 42, _hoisted_10);
-  }), 128))])], 10, _hoisted_2$1), _ctx.enablePagination ? (openBlock(), createElementBlock("div", _hoisted_12, [createVNode(_component_FwButton, {
+  }), 128))])], 16, _hoisted_2$1), _ctx.enablePagination ? (openBlock(), createElementBlock("div", _hoisted_12, [createVNode(_component_FwButton, {
     variant: 'tertiary',
     disabled: _ctx.currentPage === 1,
     size: "sm",
@@ -326,12 +326,12 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["disabled"])])) : createCommentVNode("", true)]);
 }
 
-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)}";
+var css_248z = ".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 = ".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);
 
 __default__.render = render$2;
-__default__.__scopeId = "data-v-b7ffd9d4";
+__default__.__scopeId = "data-v-b2774452";
 
 var script$1 = defineComponent({
   name: 'FwTableHead'

package/esm/fw-table.js

@@ -1,4 +1,4 @@
-export { _ as FwTable, s as FwTableHead, a as FwTableRow } from './fw-table-row-Cianlk0N.js';
+export { _ as FwTable, s as FwTableHead, a as FwTableRow } from './fw-table-row-CBQBV4yq.js';
 import './index-svDiDkSU.js';
 import 'vue';
 import './check--YD4Ts6g.js';

package/esm/index.js

@@ -6,22 +6,23 @@ import './fw-dropdown.js';
 import './fw-card.js';
 import './fw-button.js';
 import { FwNavigationMenu as script$d } from './fw-navigation-menu.js';
-import { FwTab as script$h, FwTabs as script$k } from './fw-tabs.js';
+import { FwTab as script$i, FwTabs as script$l } from './fw-tabs.js';
 import { FwModal as script$c } from './fw-modal.js';
-import { FwProgressBar as script$e } from './fw-progress-bar.js';
+import { FwProgressBar as script$f } from './fw-progress-bar.js';
 import './fw-tag.js';
 import './fw-table.js';
 import { FwAccordion as __default__ } from './fw-accordion.js';
 import './fw-image.js';
 import { FwLoadingCard as script$9, FwLoadingTable as script$b } from './fw-loading.js';
-import { FwToast as script$l } from './fw-toast.js';
-import { FwTransactionsCard as script$m } from './fw-transactions-card.js';
+import { FwToast as script$m } from './fw-toast.js';
+import { FwTransactionsCard as script$n } from './fw-transactions-card.js';
 import { FwBarChart as script } from './fw-bar-chart.js';
-import { FwSidebarMenu as script$g } from './fw-sidebar-menu.js';
+import { FwSidebarMenu as script$h } from './fw-sidebar-menu.js';
 import { FwDrawer as script$4 } from './fw-drawer.js';
-import { FwProviderList as script$f } from './fw-provider-list.js';
+import { FwProviderList as script$g } from './fw-provider-list.js';
 import { FwDatePicker as __default__$1 } from './fw-date-picker.js';
 import { FwPopover as __default__$3 } from './fw-popover.js';
+import { FwPeriodSelector as script$e } from './fw-period-selector.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-BPFFMpc2.js';
@@ -29,7 +30,7 @@ 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-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 { _ as __default__$5, s as script$j, a as script$k } from './fw-table-row-CBQBV4yq.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-BEzZf1xe.js';
@@ -63,19 +64,20 @@ var components = /*#__PURE__*/Object.freeze({
   FwLoadingTable: script$b,
   FwModal: script$c,
   FwNavigationMenu: script$d,
+  FwPeriodSelector: script$e,
   FwPopover: __default__$3,
-  FwProgressBar: script$e,
-  FwProviderList: script$f,
-  FwSidebarMenu: script$g,
+  FwProgressBar: script$f,
+  FwProviderList: script$g,
+  FwSidebarMenu: script$h,
   FwSuccessPulse: __default__$4,
-  FwTab: script$h,
+  FwTab: script$i,
   FwTable: __default__$5,
-  FwTableHead: script$i,
-  FwTableRow: script$j,
-  FwTabs: script$k,
+  FwTableHead: script$j,
+  FwTableRow: script$k,
+  FwTabs: script$l,
   FwTag: __default__$6,
-  FwToast: script$l,
-  FwTransactionsCard: script$m
+  FwToast: script$m,
+  FwTransactionsCard: script$n
 });
 
 var modalService = function modalService(options) {
@@ -109,7 +111,7 @@ var toastService = function toastService() {
     }));
     createApp({
       render: function render() {
-        return h(script$l, props);
+        return h(script$m, props);
       }
     }).mount(elementToMount);
   };
@@ -138,4 +140,4 @@ var install = function install(app) {
   });
 };
 
-export { __default__ as FwAccordion, script as FwBarChart, script$1 as FwButton, script$2 as FwCard, script$3 as FwCheckbox, __default__$1 as FwDatePicker, script$4 as FwDrawer, script$5 as FwDropdown, __default__$2 as FwEmailPulse, Form as FwForm, script$6 as FwImage, script$7 as FwInput, script$8 as FwLoadingBar, script$9 as FwLoadingCard, script$a as FwLoadingSpinner, script$b as FwLoadingTable, script$c as FwModal, script$d as FwNavigationMenu, __default__$3 as FwPopover, script$e as FwProgressBar, script$f as FwProviderList, script$g as FwSidebarMenu, __default__$4 as FwSuccessPulse, script$h as FwTab, __default__$5 as FwTable, script$i as FwTableHead, script$j as FwTableRow, script$k as FwTabs, __default__$6 as FwTag, script$l as FwToast, script$m as FwTransactionsCard, install as default, modalService, toastService };
+export { __default__ as FwAccordion, script as FwBarChart, script$1 as FwButton, script$2 as FwCard, script$3 as FwCheckbox, __default__$1 as FwDatePicker, script$4 as FwDrawer, script$5 as FwDropdown, __default__$2 as FwEmailPulse, Form as FwForm, script$6 as FwImage, script$7 as FwInput, script$8 as FwLoadingBar, script$9 as FwLoadingCard, script$a as FwLoadingSpinner, script$b as FwLoadingTable, script$c as FwModal, script$d as FwNavigationMenu, script$e as FwPeriodSelector, __default__$3 as FwPopover, script$f as FwProgressBar, script$g as FwProviderList, script$h as FwSidebarMenu, __default__$4 as FwSuccessPulse, script$i as FwTab, __default__$5 as FwTable, script$j as FwTableHead, script$k as FwTableRow, script$l as FwTabs, __default__$6 as FwTag, script$m as FwToast, script$n as FwTransactionsCard, install as default, modalService, toastService };