@frollo/frollo-web-ui 8.1.2 → 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/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-CBQBV4yq.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 };