@frollo/frollo-web-ui 0.0.9 → 0.0.12

package/cjs/index.js

@@ -1496,7 +1496,18 @@ addToUnscopables('includes');var script$2 = vue.defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'text'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text'].includes(value);
+      }
+    },
+
+    /**
+     * The type attribute of the button
+     */
+    buttonType: {
+      type: String,
+      "default": 'button',
+      validator: function validator(value) {
+        return ['button', 'submit', 'reset'].includes(value);
       }
     }
   },
@@ -1505,32 +1516,37 @@ addToUnscopables('includes');var script$2 = vue.defineComponent({
       primary: {
         text: 'text-tertiary hover:text-primary active:text-primary',
         background: 'bg-primary hover:bg-tertiary active:bg-tertiary',
-        border: 'border-primary focus:ring-primary'
+        border: 'border-primary focus-visible:ring-primary'
       },
       secondary: {
         text: 'text-primary hover:text-tertiary active:text-tertiary',
         background: 'bg-tertiary hover:bg-primary active:bg-primary',
-        border: 'border-primary focus:ring-primary'
+        border: 'border-primary focus-visible:ring-primary'
       },
       tertiary: {
         text: 'text-tertiary hover:text-secondary active:text-secondary',
         background: 'bg-secondary hover:bg-tertiary active:bg-tertiary',
-        border: 'border-tertiary focus:ring-tertiary'
+        border: 'border-secondary focus-visible:ring-secondary'
       },
       success: {
         text: 'text-white hover:text-success active:text-success',
         background: 'bg-success hover:bg-white active:bg-white',
-        border: 'border-success focus:ring-success'
+        border: 'border-success focus-visible:ring-success'
       },
       error: {
         text: 'text-white hover:text-error active:text-error',
         background: 'bg-error hover:bg-white active:bg-white',
-        border: 'border-error focus:ring-error'
+        border: 'border-error focus-visible:ring-error'
+      },
+      link: {
+        text: 'text-primary font-normal underline hover:no-underline active:no-underline focus-visible:no-underline',
+        background: '',
+        border: 'border-none rounded-none focus-visible:ring-primary'
       },
       text: {
         text: 'text-body font-medium hover:text-white active:text-white',
         background: 'bg-white hover:bg-body active:bg-body',
-        border: 'border-transparent focus:ring-body'
+        border: 'border-transparent focus-visible:ring-body'
       }
     });
     var sizes = vue.ref({
@@ -1612,8 +1628,8 @@ addToUnscopables('includes');var script$2 = vue.defineComponent({
   }
 });function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tagName), {
-    "class": vue.normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
-    type: _ctx.tagName === 'button' ? _ctx.tagName : null,
+    "class": vue.normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-0 focus-visible:outline-0 focus:ring-none ring-offset-2 focus-visible:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0' : '']]),
+    type: _ctx.tagName === 'button' ? _ctx.buttonType : null,
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
     tabindex: _ctx.to ? 0 : null,
@@ -1737,7 +1753,7 @@ var _hoisted_11$1 = {
   key: 0,
   "class": "fw-nav-menu--mobile min-h-screen top-0 left-0 pt-20 absolute w-full flex flex-col justify-between px-2 bg-white shadow-md pb-3 space-y-1"
 };
-var _hoisted_12 = {
+var _hoisted_12$1 = {
   "class": "w-full flex flex-col"
 };
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
@@ -1788,7 +1804,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     "default": vue.withCtx(function () {
       var _ctx$menuItems2;
 
-      return [((_ctx$menuItems2 = _ctx.menuItems) === null || _ctx$menuItems2 === void 0 ? void 0 : _ctx$menuItems2.length) > 0 && _ctx.isMobileMenuOpen ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, [vue.createElementVNode("div", _hoisted_12, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
+      return [((_ctx$menuItems2 = _ctx.menuItems) === null || _ctx$menuItems2 === void 0 ? void 0 : _ctx$menuItems2.length) > 0 && _ctx.isMobileMenuOpen ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, [vue.createElementVNode("div", _hoisted_12$1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
         return vue.openBlock(), vue.createBlock(_component_FwButton, {
           key: i,
           "class": "w-full rounded-md px-2",
@@ -4999,6 +5015,21 @@ function useSubmitForm(cb) {
      */
     rules: {
       type: [String, Object, Function]
+    },
+
+    /**
+     * Converts the input into a readonly disabled field
+     */
+    readonly: {
+      type: Boolean,
+      "default": false
+    },
+
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+      type: String
     }
   },
   setup: function setup(props, ctx) {
@@ -5044,21 +5075,23 @@ if (DESCRIPTORS && !FUNCTION_NAME_EXISTS) {
 var _hoisted_2 = {
   "class": "flex flex-col"
 };
-var _hoisted_3 = ["for"];
-var _hoisted_4 = {
-  "class": "relative"
+var _hoisted_3 = {
+  "class": "flex flex-row justify-between"
 };
+var _hoisted_4 = ["for"];
 var _hoisted_5 = {
-  key: 0,
-  "class": "flex text-grey-base absolute w-9 h-full inset-y-0 left-0 items-center pl-3 pointer-events-none"
+  key: 1
+};
+var _hoisted_6 = {
+  "class": "relative"
 };
-var _hoisted_6 = ["placeholder", "type"];
 var _hoisted_7 = {
   key: 0,
-  "class": "flex text-error absolute w-9 h-full inset-y-0 right-0 items-center pr-3 pointer-events-none"
+  "class": "flex text-black absolute w-9 h-full inset-y-0 left-0 items-center pl-3 pointer-events-none"
 };
+var _hoisted_8 = ["placeholder", "type", "readonly", "disabled"];
 
-var _hoisted_8 = /*#__PURE__*/vue.createElementVNode("svg", {
+var _hoisted_9 = /*#__PURE__*/vue.createElementVNode("svg", {
   fill: "currentColor",
   "aria-hidden": "true",
   focusable: "false",
@@ -5069,12 +5102,20 @@ var _hoisted_8 = /*#__PURE__*/vue.createElementVNode("svg", {
   d: "M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8\n                  242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36\n                  0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4\n                  400 256 400z"
 })], -1);
 
-var _hoisted_9 = [_hoisted_8];
-var _hoisted_10 = {
-  "class": "text-error text-right text-sm font-medium mt-2 min-h-[21px]"
-};
+var _hoisted_10 = [_hoisted_9];
 var _hoisted_11 = {
-  key: 0
+  key: 1,
+  "class": "flex text-black absolute w-10 h-full inset-y-0 right-0 items-center pr-3"
+};
+var _hoisted_12 = {
+  "class": "italic text-right text-sm font-medium mt-2 min-h-[21px]"
+};
+var _hoisted_13 = {
+  key: 0,
+  "class": "text-error"
+};
+var _hoisted_14 = {
+  key: 1
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = vue.resolveComponent("InputField");
@@ -5089,39 +5130,47 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     "default": vue.withCtx(function (_ref) {
       var field = _ref.field,
+          errors = _ref.errors,
           errorMessage = _ref.errorMessage,
           meta = _ref.meta;
-      return [vue.createElementVNode("div", _hoisted_2, [_ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
+      return [vue.createElementVNode("div", _hoisted_2, [vue.createElementVNode("div", _hoisted_3, [_ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
         key: 0,
         "for": _ctx.name,
         "class": "block mb-2"
-      }, vue.toDisplayString(_ctx.label), 9, _hoisted_3)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_4, [_ctx.$slots.prefixIcon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "prefixIcon")])) : vue.createCommentVNode("", true), vue.createElementVNode("input", vue.mergeProps(field, {
+      }, vue.toDisplayString(_ctx.label), 9, _hoisted_4)) : vue.createCommentVNode("", true), _ctx.$slots.action ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "action")])) : vue.createCommentVNode("", true)]), vue.createElementVNode("div", _hoisted_6, [_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [vue.renderSlot(_ctx.$slots, "prefix")])) : vue.createCommentVNode("", true), vue.createElementVNode("input", vue.mergeProps(field, {
         placeholder: _ctx.placeholder,
         type: _ctx.type,
+        readonly: _ctx.readonly,
+        disabled: _ctx.readonly,
         "class": ["border-2 border-grey-lightest rounded-lg focus:outline-none focus:ring-2 focus:ring-primary block w-full p-2.5", {
-          'pl-10': !!_ctx.$slots.prefixIcon
+          'pl-10': !!_ctx.$slots.prefix,
+          'pr-20': !!_ctx.$slots.suffix
         }]
-      }), null, 16, _hoisted_6), vue.createVNode(vue.Transition, {
-        name: "errorFadeIn"
+      }), null, 16, _hoisted_8), vue.createVNode(vue.Transition, {
+        name: "fwFadeIn"
       }, {
         "default": vue.withCtx(function () {
-          return [errorMessage && meta.touched ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, _hoisted_9)) : vue.createCommentVNode("", true)];
+          return [(errorMessage || errors[0]) && meta.touched ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            "class": vue.normalizeClass(["flex text-error absolute w-9 h-full inset-y-0 right-0 items-center pr-3 pointer-events-none", _ctx.$slots.suffix ? 'mr-8' : ''])
+          }, _hoisted_10, 2)) : vue.createCommentVNode("", true)];
         }),
         _: 2
-      }, 1024)]), vue.createElementVNode("div", _hoisted_10, [vue.createVNode(vue.Transition, {
-        name: "errorFadeIn"
+      }, 1024), _ctx.$slots.suffix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, [vue.renderSlot(_ctx.$slots, "suffix")])) : vue.createCommentVNode("", true)]), vue.createElementVNode("div", _hoisted_12, [vue.createVNode(vue.Transition, {
+        name: "fwFadeIn",
+        mode: "out-in"
       }, {
         "default": vue.withCtx(function () {
-          return [errorMessage && meta.touched ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11, vue.toDisplayString(errorMessage), 1)) : vue.createCommentVNode("", true)];
+          return [(errorMessage || errors[0]) && meta.touched ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_13, vue.toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, vue.toDisplayString(_ctx.hint), 1)) : vue.createCommentVNode("", true)];
         }),
         _: 2
       }, 1024)])])];
     }),
     _: 3
   }, 8, ["modelValue", "name", "rules"])]);
-}var css_248z = ".errorFadeIn-enter-active{-webkit-animation:errorFadeIn .35s;animation:errorFadeIn .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.errorFadeIn-leave-active{animation:errorFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes errorFadeIn{0%{opacity:0}to{opacity:1}}@keyframes errorFadeIn{0%{opacity:0}to{opacity:1}}";
-var stylesheet = ".errorFadeIn-enter-active{-webkit-animation:errorFadeIn .35s;animation:errorFadeIn .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.errorFadeIn-leave-active{animation:errorFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes errorFadeIn{0%{opacity:0}to{opacity:1}}@keyframes errorFadeIn{0%{opacity:0}to{opacity:1}}";
-styleInject(css_248z);script.render = render;var components$1=/*#__PURE__*/Object.freeze({__proto__:null,FwCard:script$3,FwButton:script$2,FwNavigationMenu:script$1,FwInput:script});var install = function install(app) {
+}var css_248z = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}";
+var stylesheet = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}";
+styleInject(css_248z);script.render = render;var components$1=/*#__PURE__*/Object.freeze({__proto__:null,FwCard:script$3,FwButton:script$2,FwNavigationMenu:script$1,FwForm:Form,FwInput:script});var install = function install(app) {
   Object.entries(components$1).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         componentName = _ref2[0],
@@ -5129,7 +5178,7 @@ styleInject(css_248z);script.render = render;var components$1=/*#__PURE__*/Objec
 
     app.component(componentName, component);
   });
-};var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,FwCard:script$3,FwButton:script$2,FwNavigationMenu:script$1,FwInput:script});Object.entries(components).forEach(function (_ref) {
+};var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,FwCard:script$3,FwButton:script$2,FwNavigationMenu:script$1,FwForm:Form,FwInput:script});Object.entries(components).forEach(function (_ref) {
   var _ref2 = _slicedToArray(_ref, 2),
       componentName = _ref2[0],
       component = _ref2[1];

package/esm/{fw-button-02fc3f47.js → fw-button-54999a6e.js}

@@ -36,7 +36,18 @@ var script = defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'text'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text'].includes(value);
+      }
+    },
+
+    /**
+     * The type attribute of the button
+     */
+    buttonType: {
+      type: String,
+      "default": 'button',
+      validator: function validator(value) {
+        return ['button', 'submit', 'reset'].includes(value);
       }
     }
   },
@@ -45,32 +56,37 @@ var script = defineComponent({
       primary: {
         text: 'text-tertiary hover:text-primary active:text-primary',
         background: 'bg-primary hover:bg-tertiary active:bg-tertiary',
-        border: 'border-primary focus:ring-primary'
+        border: 'border-primary focus-visible:ring-primary'
       },
       secondary: {
         text: 'text-primary hover:text-tertiary active:text-tertiary',
         background: 'bg-tertiary hover:bg-primary active:bg-primary',
-        border: 'border-primary focus:ring-primary'
+        border: 'border-primary focus-visible:ring-primary'
       },
       tertiary: {
         text: 'text-tertiary hover:text-secondary active:text-secondary',
         background: 'bg-secondary hover:bg-tertiary active:bg-tertiary',
-        border: 'border-tertiary focus:ring-tertiary'
+        border: 'border-secondary focus-visible:ring-secondary'
       },
       success: {
         text: 'text-white hover:text-success active:text-success',
         background: 'bg-success hover:bg-white active:bg-white',
-        border: 'border-success focus:ring-success'
+        border: 'border-success focus-visible:ring-success'
       },
       error: {
         text: 'text-white hover:text-error active:text-error',
         background: 'bg-error hover:bg-white active:bg-white',
-        border: 'border-error focus:ring-error'
+        border: 'border-error focus-visible:ring-error'
+      },
+      link: {
+        text: 'text-primary font-normal underline hover:no-underline active:no-underline focus-visible:no-underline',
+        background: '',
+        border: 'border-none rounded-none focus-visible:ring-primary'
       },
       text: {
         text: 'text-body font-medium hover:text-white active:text-white',
         background: 'bg-white hover:bg-body active:bg-body',
-        border: 'border-transparent focus:ring-body'
+        border: 'border-transparent focus-visible:ring-body'
       }
     });
     var sizes = ref({
@@ -154,8 +170,8 @@ var script = defineComponent({
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
-    "class": normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
-    type: _ctx.tagName === 'button' ? _ctx.tagName : null,
+    "class": normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-0 focus-visible:outline-0 focus:ring-none ring-offset-2 focus-visible:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0' : '']]),
+    type: _ctx.tagName === 'button' ? _ctx.buttonType : null,
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
     tabindex: _ctx.to ? 0 : null,

package/esm/fw-button.js

@@ -1,3 +1,3 @@
-export { s as FwButton } from './fw-button-02fc3f47.js';
+export { s as FwButton } from './fw-button-54999a6e.js';
 import './style-inject.es-da8f7768.js';
 import 'vue';

package/esm/fw-form.js

@@ -0,0 +1,2 @@
+export { F as FwForm } from './vee-validate.esm-028c6424.js';
+import 'vue';