@frollo/frollo-web-ui 0.0.7 → 0.0.8

package/esm/fw-button-02fc3f47.js

@@ -0,0 +1,181 @@
+import { u as styleInject } from './style-inject.es-da8f7768.js';
+import { defineComponent, ref, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
+
+var script = defineComponent({
+  name: 'FwButton',
+  emits: ['click', 'mouseover', 'mouseout', 'focusin', 'focusout'],
+  props: {
+    /**
+     * A `router-link` path or object
+     */
+    to: {
+      type: [String, Object]
+    },
+
+    /**
+     * A URL to link to using a native anchor element
+     */
+    href: String,
+
+    /**
+     * The size of 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);
+      }
+    },
+
+    /**
+     * The colour variant of the button.
+     * Accepts 'primary', 'secondary', 'tertiary', 'error', 'success'
+     */
+    variant: {
+      type: String,
+      "default": 'primary',
+      validator: function validator(value) {
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'text'].includes(value);
+      }
+    }
+  },
+  setup: function setup(props, ctx) {
+    var buttonClasses = ref({
+      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'
+      },
+      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'
+      },
+      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'
+      },
+      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'
+      },
+      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'
+      },
+      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'
+      }
+    });
+    var sizes = ref({
+      sm: 'px-2 py-0.5 text-sm',
+      md: 'px-6 py-1 text-md',
+      lg: 'px-10 py-2 text-lg',
+      xl: 'px-12 py-3 text-xl',
+      '2xl': 'px-16 py-4 text-2xl'
+    });
+    var textColorClass = computed(function () {
+      return buttonClasses.value[props.variant].text;
+    });
+    var bgColorClass = computed(function () {
+      return buttonClasses.value[props.variant].background;
+    });
+    var sizeClass = computed(function () {
+      return sizes.value[props.size];
+    });
+    var borderClass = computed(function () {
+      return buttonClasses.value[props.variant].border;
+    });
+    /**
+     * @event Click - Native click
+     */
+
+    var onClick = function onClick(e) {
+      return ctx.emit('click', e);
+    };
+    /**
+     * @event mouseover - Native hover
+     */
+
+
+    var onMouseover = function onMouseover(e) {
+      return ctx.emit('mouseover', e);
+    };
+    /**
+     * @event mouseout - Native hover out
+     */
+
+
+    var onMouseout = function onMouseout(e) {
+      return ctx.emit('mouseout', e);
+    };
+    /**
+     * @event focusin - Native focusin
+     */
+
+
+    var onFocusin = function onFocusin(e) {
+      return ctx.emit('focusin', e);
+    };
+    /**
+     * @event focusout - Native focusout
+     */
+
+
+    var onFocusout = function onFocusout(e) {
+      return ctx.emit('focusout', e);
+    };
+
+    var tagName = computed(function () {
+      if (props.to) return 'router-link';
+      if (props.href) return 'a';
+      return 'button';
+    });
+    return {
+      textColorClass: textColorClass,
+      bgColorClass: bgColorClass,
+      sizeClass: sizeClass,
+      borderClass: borderClass,
+      onClick: onClick,
+      onMouseover: onMouseover,
+      onMouseout: onMouseout,
+      onFocusin: onFocusin,
+      onFocusout: onFocusout,
+      tagName: tagName
+    };
+  }
+});
+
+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,
+    to: _ctx.to ? _ctx.to : null,
+    href: _ctx.href ? _ctx.href : null,
+    tabindex: _ctx.to ? 0 : null,
+    onClick: _ctx.onClick,
+    onFocusin: _ctx.onFocusin,
+    onFocusout: _ctx.onFocusout,
+    onMouseover: _ctx.onMouseover,
+    onMouseout: _ctx.onMouseout
+  }, {
+    "default": withCtx(function () {
+      return [renderSlot(_ctx.$slots, "default")];
+    }),
+    _: 3
+  }, 8, ["class", "type", "to", "href", "tabindex", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
+}
+
+var css_248z = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
+var stylesheet = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { script as s };

package/esm/fw-button.js

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

package/esm/fw-card.js

@@ -60,13 +60,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.componentName), {
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
-    "class": normalizeClass(["fw-card shadow-card rounded-lg", _ctx.to || _ctx.href ? 'block focus:outline-none ring-offset-3 focus:ring focus:ring-primary transform-none transition-transform hover:-translate-y-1' : ''])
+    tabindex: _ctx.to ? 0 : null,
+    "class": normalizeClass(["fw-card shadow-card rounded-lg", _ctx.to || _ctx.href ? 'block cursor-pointer focus:outline-none ring-offset-3 focus:ring focus:ring-primary transform-none transition-transform hover:-translate-y-1' : ''])
   }, {
     "default": withCtx(function () {
       return [_ctx.title || _ctx.prefixTitle ? (openBlock(), createElementBlock("h4", _hoisted_1, [_ctx.prefixTitle ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.prefixTitle), 1)) : createCommentVNode("", true), _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)];
     }),
     _: 3
-  }, 8, ["to", "href", "class"]);
+  }, 8, ["to", "href", "tabindex", "class"]);
 }
 
 script.render = render;