@frollo/frollo-web-ui 8.3.0 → 8.4.0

package/cjs/index.js

@@ -36635,11 +36635,14 @@ styleInject(css_248z$3);__default__$2.render = render$4;
 __default__$2.__scopeId = "data-v-6df01fae";var script$1 = vue.defineComponent({
   name: 'FwPeriodSelector',
   emits: [/** Fired on Click */
-  'periodSelected'],
+  'update:modelValue'],
   components: {
     FwButton: script$h
   },
   props: {
+    modelValue: {
+      type: Number
+    },
     /**
      * The available periods to be chosen in months.
      */
@@ -36657,18 +36660,20 @@ __default__$2.__scopeId = "data-v-6df01fae";var script$1 = vue.defineComponent({
       }
     }
   },
-  setup: function setup(_props, ctx) {
-    var selectedPeriod = vue.ref();
+  setup: function setup(props, ctx) {
     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);
-    };
+    var selectedPeriod = vue.computed({
+      get: function get() {
+        return props.modelValue;
+      },
+      set: function set(period) {
+        ctx.emit('update:modelValue', period);
+      }
+    });
     return {
       generateButtonLabel: generateButtonLabel,
-      onClick: onClick,
       selectedPeriod: selectedPeriod
     };
   }
@@ -36684,7 +36689,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       "class": "hover:!border-button-primary-bg -m-[2px] flex-1",
       size: _ctx.size,
       onClick: function onClick($event) {
-        return _ctx.onClick(period);
+        return _ctx.selectedPeriod = period;
       }
     }, {
       "default": vue.withCtx(function () {

package/esm/fw-period-selector.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString } from 'vue';
 import './fw-button.js';
 import { s as script$1 } from './fw-button-LhSQ6Fx_.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
@@ -9,11 +9,14 @@ import './check--YD4Ts6g.js';
 var script = defineComponent({
   name: 'FwPeriodSelector',
   emits: [/** Fired on Click */
-  'periodSelected'],
+  'update:modelValue'],
   components: {
     FwButton: script$1
   },
   props: {
+    modelValue: {
+      type: Number
+    },
     /**
      * The available periods to be chosen in months.
      */
@@ -31,18 +34,20 @@ var script = defineComponent({
       }
     }
   },
-  setup: function setup(_props, ctx) {
-    var selectedPeriod = ref();
+  setup: function setup(props, ctx) {
     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);
-    };
+    var selectedPeriod = computed({
+      get: function get() {
+        return props.modelValue;
+      },
+      set: function set(period) {
+        ctx.emit('update:modelValue', period);
+      }
+    });
     return {
       generateButtonLabel: generateButtonLabel,
-      onClick: onClick,
       selectedPeriod: selectedPeriod
     };
   }
@@ -60,7 +65,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "class": "hover:!border-button-primary-bg -m-[2px] flex-1",
       size: _ctx.size,
       onClick: function onClick($event) {
-        return _ctx.onClick(period);
+        return _ctx.selectedPeriod = period;
       }
     }, {
       "default": withCtx(function () {

package/frollo-web-ui.esm.js

@@ -37098,11 +37098,14 @@ __default__$2.__scopeId = "data-v-6df01fae";
 var script$1 = defineComponent({
   name: 'FwPeriodSelector',
   emits: [/** Fired on Click */
-  'periodSelected'],
+  'update:modelValue'],
   components: {
     FwButton: script$h
   },
   props: {
+    modelValue: {
+      type: Number
+    },
     /**
      * The available periods to be chosen in months.
      */
@@ -37120,18 +37123,20 @@ var script$1 = defineComponent({
       }
     }
   },
-  setup: function setup(_props, ctx) {
-    var selectedPeriod = ref();
+  setup: function setup(props, ctx) {
     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);
-    };
+    var selectedPeriod = computed({
+      get: function get() {
+        return props.modelValue;
+      },
+      set: function set(period) {
+        ctx.emit('update:modelValue', period);
+      }
+    });
     return {
       generateButtonLabel: generateButtonLabel,
-      onClick: onClick,
       selectedPeriod: selectedPeriod
     };
   }
@@ -37149,7 +37154,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       "class": "hover:!border-button-primary-bg -m-[2px] flex-1",
       size: _ctx.size,
       onClick: function onClick($event) {
-        return _ctx.onClick(period);
+        return _ctx.selectedPeriod = period;
       }
     }, {
       "default": withCtx(function () {

package/index.d.ts

@@ -2872,6 +2872,9 @@ declare const __default__$2: vue.DefineComponent<{
 }, {}>;
 
 declare const _default$2: vue.DefineComponent<{
+    modelValue: {
+        type: PropType<number | undefined>;
+    };
     /**
      * The available periods to be chosen in months.
      */
@@ -2888,9 +2891,11 @@ declare const _default$2: vue.DefineComponent<{
     };
 }, {
     generateButtonLabel: (month: number) => string;
-    onClick: (period: number) => void;
-    selectedPeriod: vue.Ref<number | undefined>;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "periodSelected"[], "periodSelected", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    selectedPeriod: vue.WritableComputedRef<number | undefined>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    modelValue: {
+        type: PropType<number | undefined>;
+    };
     /**
      * The available periods to be chosen in months.
      */
@@ -2906,7 +2911,7 @@ declare const _default$2: vue.DefineComponent<{
         validator: (value: string) => boolean;
     };
 }>> & {
-    onPeriodSelected?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: ButtonSize;
 }, {}>;

package/package.json

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

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

@@ -1,6 +1,9 @@
 import { PropType } from 'vue';
 import { ButtonSize } from '../fw-button/index.types';
 declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: PropType<number | undefined>;
+    };
     /**
      * The available periods to be chosen in months.
      */
@@ -17,9 +20,11 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     generateButtonLabel: (month: number) => string;
-    onClick: (period: number) => void;
-    selectedPeriod: import("vue").Ref<number | undefined>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "periodSelected"[], "periodSelected", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    selectedPeriod: import("vue").WritableComputedRef<number | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<number | undefined>;
+    };
     /**
      * The available periods to be chosen in months.
      */
@@ -35,7 +40,7 @@ declare const _default: import("vue").DefineComponent<{
         validator: (value: string) => boolean;
     };
 }>> & {
-    onPeriodSelected?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: ButtonSize;
 }, {}>;

package/web-components/index.js

@@ -48661,11 +48661,14 @@ Expected function or array of functions, received type ${typeof value}.`
   var script$1 = defineComponent({
     name: 'FwPeriodSelector',
     emits: [/** Fired on Click */
-    'periodSelected'],
+    'update:modelValue'],
     components: {
       FwButton: script$h
     },
     props: {
+      modelValue: {
+        type: Number
+      },
       /**
        * The available periods to be chosen in months.
        */
@@ -48683,18 +48686,20 @@ Expected function or array of functions, received type ${typeof value}.`
         }
       }
     },
-    setup: function setup(_props, ctx) {
-      var selectedPeriod = ref();
+    setup: function setup(props, ctx) {
       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);
-      };
+      var selectedPeriod = computed({
+        get: function get() {
+          return props.modelValue;
+        },
+        set: function set(period) {
+          ctx.emit('update:modelValue', period);
+        }
+      });
       return {
         generateButtonLabel: generateButtonLabel,
-        onClick: onClick,
         selectedPeriod: selectedPeriod
       };
     }
@@ -48712,7 +48717,7 @@ Expected function or array of functions, received type ${typeof value}.`
         "class": "hover:!border-button-primary-bg -m-[2px] flex-1",
         size: _ctx.size,
         onClick: function onClick($event) {
-          return _ctx.onClick(period);
+          return _ctx.selectedPeriod = period;
         }
       }, {
         "default": withCtx(function () {