@frollo/frollo-web-ui 1.2.6 → 1.2.7

package/esm/{fw-button-d5d2cf19.js → fw-button-ac0fbc7a.js}

@@ -1,10 +1,31 @@
 import './es.array.includes-9a6e4066.js';
-import { defineComponent, ref, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, renderSlot, createCommentVNode } from 'vue';
+import { defineComponent, resolveComponent, openBlock, createBlock, ref, computed, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, createElementVNode, renderSlot, createVNode, createCommentVNode } from 'vue';
+import { b as render$2 } from './index-ec267913.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
+var script$1 = defineComponent({
+  name: 'FwLoadingSpinner',
+  components: {
+    LoadingSvg: render$2
+  }
+});
+
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_LoadingSvg = resolveComponent("LoadingSvg");
+
+  return openBlock(), createBlock(_component_LoadingSvg, {
+    "class": "fw-loading-spinner animate-spin"
+  });
+}
+
+script$1.render = render$1;
+
 var script = defineComponent({
   name: 'FwButton',
   emits: ['click', 'mouseover', 'mouseout', 'focusin', 'focusout'],
+  components: {
+    FwLoadingSpinner: script$1
+  },
   props: {
     /**
      * A `router-link` path or object
@@ -70,11 +91,19 @@ var script = defineComponent({
     rounded: {
       type: Boolean,
       "default": true
+    },
+
+    /**
+     * Whether the loading animation is shown or not
+     */
+    loading: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props, ctx) {
     var baseClass = ref( // eslint-disable-next-line max-len
-    'inline-block text-center cursor-pointer whitespace-nowrap focus:outline-0 border-2 focus-visible:outline-0 focus:ring-none ring-offset-2 focus-visible:ring');
+    'inline-block text-center whitespace-nowrap transition-colors ease-in-out duration-300 focus:outline-0 border-2 focus-visible:outline-0 focus:ring-none ring-offset-2 focus-visible:ring');
     var buttonClasses = ref({
       primary: {
         text: '',
@@ -119,6 +148,28 @@ var script = defineComponent({
       xl: 'px-12 py-3 text-xl',
       '2xl': 'px-16 py-4 text-2xl'
     });
+    var loadingSizes = ref({
+      sm: {
+        spacing: 'pr-[3px] -ml-[3px]',
+        size: 'w-2.5 h-2.5'
+      },
+      md: {
+        spacing: 'pr-[4px] -ml-[4px]',
+        size: 'w-4 h-4'
+      },
+      lg: {
+        spacing: 'pr-[8px] -ml-[8px]',
+        size: 'w-6 h-6'
+      },
+      xl: {
+        spacing: 'pr-[10px] -ml-[10px]',
+        size: 'w-7 h-7'
+      },
+      '2xl': {
+        spacing: 'pr-[14px] -ml-[14px]',
+        size: 'w-8 h-8'
+      }
+    });
     var textColorClass = computed(function () {
       return buttonClasses.value[props.variant].text;
     });
@@ -131,10 +182,12 @@ var script = defineComponent({
     var borderClass = computed(function () {
       return buttonClasses.value[props.variant].border;
     });
+    var loadingSize = computed(function () {
+      return loadingSizes.value[props.size];
+    });
     /**
      * @event Click - Native click
      */
-    // eslint-disable-next-line no-undef
 
     var onClick = function onClick(e) {
       return ctx.emit('click', e);
@@ -142,7 +195,6 @@ var script = defineComponent({
     /**
      * @event mouseover - Native hover
      */
-    // eslint-disable-next-line no-undef
 
 
     var onMouseover = function onMouseover(e) {
@@ -151,7 +203,6 @@ var script = defineComponent({
     /**
      * @event mouseout - Native hover out
      */
-    // eslint-disable-next-line no-undef
 
 
     var onMouseout = function onMouseout(e) {
@@ -160,7 +211,6 @@ var script = defineComponent({
     /**
      * @event focusin - Native focusin
      */
-    // eslint-disable-next-line no-undef
 
 
     var onFocusin = function onFocusin(e) {
@@ -169,7 +219,6 @@ var script = defineComponent({
     /**
      * @event focusout - Native focusout
      */
-    // eslint-disable-next-line no-undef
 
 
     var onFocusout = function onFocusout(e) {
@@ -192,22 +241,26 @@ var script = defineComponent({
       onMouseout: onMouseout,
       onFocusin: onFocusin,
       onFocusout: onFocusout,
-      tagName: tagName
+      tagName: tagName,
+      loadingSize: loadingSize
     };
   }
 });
 
 var _hoisted_1 = {
   key: 0,
-  "class": "fw-button--label"
+  "class": "fw-button--label relative"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_FwLoadingSpinner = resolveComponent("FwLoadingSpinner");
+
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
-    "class": normalizeClass(["fw-button", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.rounded && _ctx.variant !== 'link' ? 'rounded-full' : 'rounded', _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0 font-normal rounded-1' : 'font-semibold', _ctx.animation === 'fade' ? 'animation--fade' : 'animation--alternate']]),
+    "class": normalizeClass(["fw-button", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.rounded && _ctx.variant !== 'link' ? 'rounded-full' : 'rounded', _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0 font-normal rounded-1' : 'font-semibold', _ctx.animation === 'fade' ? 'animation--fade' : 'animation--alternate', _ctx.loading === true ? 'fw-button--loading cursor-progress' : 'cursor-pointer']]),
     type: _ctx.tagName === 'button' ? _ctx.buttonType : null,
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
     tabindex: _ctx.to ? 0 : null,
+    disabled: _ctx.loading,
     onClick: _ctx.onClick,
     onFocusin: _ctx.onFocusin,
     onFocusout: _ctx.onFocusout,
@@ -215,14 +268,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onMouseout: _ctx.onMouseout
   }, {
     "default": withCtx(function () {
-      return [_ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)];
+      return [_ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
+        "class": normalizeClass(["fw-button--label-wrapper", _ctx.loading ? _ctx.loadingSize.spacing : 'pr-0 ml-0'])
+      }, [renderSlot(_ctx.$slots, "default")], 2), _ctx.loading ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        "class": normalizeClass([_ctx.loadingSize.size, "inline-flex absolute top-2/4 -translate-y-2/4 left-full"])
+      }, [createVNode(_component_FwLoadingSpinner, {
+        "class": "w-full h-full"
+      })], 2)) : createCommentVNode("", true)])) : createCommentVNode("", true)];
     }),
     _: 3
-  }, 40, ["class", "type", "to", "href", "tabindex", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
+  }, 40, ["class", "type", "to", "href", "tabindex", "disabled", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
 }
 
-var css_248z = ".fw-button{line-height:normal;-webkit-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-button--primary{background:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary:hover{background:var(--colorButtonPrimaryFade)}.fw-button--secondary{background:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate:hover{background:var(--colorButtonSecondaryText);color:var(--colorButtonSecondary)}.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary{background:var(--colorButtonTertiary);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate:hover{background:var(--colorButtonTertiaryText);color:var(--colorButtonTertiary)}.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}";
-var stylesheet = ".fw-button{line-height:normal;-webkit-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-button--primary{background:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary:hover{background:var(--colorButtonPrimaryFade)}.fw-button--secondary{background:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate:hover{background:var(--colorButtonSecondaryText);color:var(--colorButtonSecondary)}.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary{background:var(--colorButtonTertiary);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate:hover{background:var(--colorButtonTertiaryText);color:var(--colorButtonTertiary)}.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}";
+var css_248z = ".fw-button{line-height:normal}.fw-button--label-wrapper{-webkit-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:margin,padding;-o-transition-property:margin,padding;transition-property:margin,padding;-webkit-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.fw-button--primary{background:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary.fw-button--loading,.fw-button--primary:hover{background:var(--colorButtonPrimaryFade);border-color:var(--colorButtonPrimaryFade)}.fw-button--secondary{background:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate.fw-button--loading,.fw-button--secondary.animation--alternate:hover{background:var(--colorButtonSecondaryText);color:var(--colorButtonSecondary)}.fw-button--secondary.animation--fade.fw-button--loading,.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary{background:var(--colorButtonTertiary);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate.fw-button--loading,.fw-button--tertiary.animation--alternate:hover{background:var(--colorButtonTertiaryText);color:var(--colorButtonTertiary)}.fw-button--tertiary.animation--fade.fw-button--loading,.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}";
+var stylesheet = ".fw-button{line-height:normal}.fw-button--label-wrapper{-webkit-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:margin,padding;-o-transition-property:margin,padding;transition-property:margin,padding;-webkit-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.fw-button--primary{background:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary.fw-button--loading,.fw-button--primary:hover{background:var(--colorButtonPrimaryFade);border-color:var(--colorButtonPrimaryFade)}.fw-button--secondary{background:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate.fw-button--loading,.fw-button--secondary.animation--alternate:hover{background:var(--colorButtonSecondaryText);color:var(--colorButtonSecondary)}.fw-button--secondary.animation--fade.fw-button--loading,.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary{background:var(--colorButtonTertiary);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate.fw-button--loading,.fw-button--tertiary.animation--alternate:hover{background:var(--colorButtonTertiaryText);color:var(--colorButtonTertiary)}.fw-button--tertiary.animation--fade.fw-button--loading,.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}";
 styleInject(css_248z);
 
 script.render = render;

package/esm/fw-button.js

@@ -1,8 +1,10 @@
-export { s as FwButton } from './fw-button-d5d2cf19.js';
+export { s as FwButton } from './fw-button-ac0fbc7a.js';
 import './es.array.includes-9a6e4066.js';
 import './function-name-c49146fc.js';
 import './object-keys-3c73c404.js';
 import './is-forced-fd46b5f2.js';
 import './add-to-unscopables-a5032b1d.js';
 import 'vue';
+import './index-ec267913.js';
+import './check-94a5917a.js';
 import './style-inject.es-1f59c1d0.js';

package/esm/fw-dropdown.js

@@ -1,7 +1,7 @@
 import './es.array.find-54b8f84b.js';
 import { defineComponent, toRef, ref, computed, onMounted, onBeforeUnmount, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, normalizeClass, createVNode, Transition, withCtx, Fragment, renderList } from 'vue';
 import { u as useField } from './vee-validate.esm-a17a23c3.js';
-import { a as render$1 } from './index-b3aa1664.js';
+import { a as render$1 } from './index-ec267913.js';
 import './es.function.name-2fa3a718.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './function-name-c49146fc.js';

package/esm/fw-image.js

@@ -11,7 +11,7 @@ import { c as classof$1 } from './classof-088c9833.js';
 import { t as toString$2 } from './to-string-c2bd1f4d.js';
 import { o as objectCreate } from './add-to-unscopables-a5032b1d.js';
 import { s as script$1 } from './fw-loading-bar-da7d53fb.js';
-import { r as render$1 } from './index-b3aa1664.js';
+import { r as render$1 } from './index-ec267913.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './check-94a5917a.js';
 

package/esm/fw-modal.js

@@ -1,9 +1,11 @@
-export { s as FwModal } from './index-7d8c95be.js';
+export { s as FwModal } from './index-d589fca1.js';
 import './es.array.includes-9a6e4066.js';
 import './function-name-c49146fc.js';
 import './object-keys-3c73c404.js';
 import './is-forced-fd46b5f2.js';
 import './add-to-unscopables-a5032b1d.js';
 import 'vue';
-import './fw-button-d5d2cf19.js';
+import './fw-button-ac0fbc7a.js';
+import './index-ec267913.js';
+import './check-94a5917a.js';
 import './style-inject.es-1f59c1d0.js';

package/esm/fw-navigation-menu.js

@@ -1,11 +1,13 @@
 import { defineComponent, ref, createElementVNode, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
-import { s as script$1 } from './fw-button-d5d2cf19.js';
+import { s as script$1 } from './fw-button-ac0fbc7a.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './es.array.includes-9a6e4066.js';
 import './function-name-c49146fc.js';
 import './object-keys-3c73c404.js';
 import './is-forced-fd46b5f2.js';
 import './add-to-unscopables-a5032b1d.js';
+import './index-ec267913.js';
+import './check-94a5917a.js';
 
 var script = defineComponent({
   name: 'FwNavigationMenu',

package/esm/fw-table.js

@@ -3,7 +3,7 @@ import { _ as _export, o as objectKeys } from './object-keys-3c73c404.js';
 import { e as toAbsoluteIndex$1, l as lengthOfArrayLike$2 } from './is-forced-fd46b5f2.js';
 import { t as toString$1 } from './to-string-c2bd1f4d.js';
 import { c as createProperty$1, a as arrayMethodIsStrict$1 } from './create-property-da6d232b.js';
-import { b as render$3 } from './index-b3aa1664.js';
+import { c as render$3 } from './index-ec267913.js';
 import { defineComponent, computed, ref, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, withKeys, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';
 import { s as script$3 } from './fw-loading-bar-da7d53fb.js';
 import './classof-088c9833.js';

package/esm/{index-7d8c95be.js → index-d589fca1.js}

@@ -1,6 +1,6 @@
 import './es.array.includes-9a6e4066.js';
 import { defineComponent, pushScopeId, popScopeId, resolveComponent, openBlock, createBlock, Transition, withCtx, createElementVNode, createElementBlock, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from 'vue';
-import { s as script$1 } from './fw-button-d5d2cf19.js';
+import { s as script$1 } from './fw-button-ac0fbc7a.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
 /** Detect free variable `global` from Node.js. */