@frollo/frollo-web-ui 0.2.4 → 0.3.2

package/esm/fw-tag.js

@@ -0,0 +1,89 @@
+import './es.array.includes-33e186c4.js';
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import './function-name-3bda6320.js';
+import './add-to-unscopables-82352072.js';
+import './is-forced-3323c994.js';
+
+var script = defineComponent({
+  name: 'FwTag',
+  props: {
+    /**
+     * The size of the tag. Accepts: 'xs' & 'sm'
+     */
+    size: {
+      type: String,
+      "default": 'xs',
+      validator: function validator(value) {
+        return ['xs', 'sm'].includes(value);
+      }
+    },
+
+    /**
+     * The colour variant of the tag.
+     * Accepts 'primary', 'alert', 'error', 'success'
+     */
+    variant: {
+      type: String,
+      "default": 'primary',
+      validator: function validator(value) {
+        return ['primary', 'alert', 'error', 'success'].includes(value);
+      }
+    }
+  },
+  setup: function setup(props) {
+    var baseClass = ref( // eslint-disable-next-line max-len
+    "inline-block font-medium text-center whitespace-nowrap rounded-full");
+    var tagClasses = ref({
+      primary: {
+        text: 'text-tertiary',
+        background: 'bg-primary'
+      },
+      alert: {
+        text: 'text-white',
+        background: 'bg-alert'
+      },
+      success: {
+        text: 'text-white',
+        background: 'bg-success'
+      },
+      error: {
+        text: 'text-white',
+        background: 'bg-error'
+      }
+    });
+    var sizes = ref({
+      xs: 'px-2 py-px text-xs',
+      sm: 'px-4 py-1 text-xs'
+    });
+    var textColorClass = computed(function () {
+      return tagClasses.value[props.variant].text;
+    });
+    var bgColorClass = computed(function () {
+      return tagClasses.value[props.variant].background;
+    });
+    var sizeClass = computed(function () {
+      return sizes.value[props.size];
+    });
+    return {
+      baseClass: baseClass,
+      textColorClass: textColorClass,
+      bgColorClass: bgColorClass,
+      sizeClass: sizeClass
+    };
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", {
+    "class": normalizeClass(["fw-tag", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass]])
+  }, [renderSlot(_ctx.$slots, "default")], 2);
+}
+
+var css_248z = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
+var stylesheet = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { script as FwTag };

package/esm/index.js

@@ -18,6 +18,8 @@ import { s as script$7, u as uniqueId } from './index-59d76908.js';
 export { s as FwModal } from './index-59d76908.js';
 import { FwProgressBar as script$8 } from './fw-progress-bar.js';
 export { FwProgressBar } from './fw-progress-bar.js';
+import { FwTag as script$9 } from './fw-tag.js';
+export { FwTag } from './fw-tag.js';
 import { FwEmailPulse as __default__, FwSuccessPulse as __default__$1 } from './fw-animations.js';
 export { FwEmailPulse, FwSuccessPulse } from './fw-animations.js';
 import { F as Form } from './vee-validate.esm-b64acab1.js';
@@ -282,6 +284,7 @@ var components = /*#__PURE__*/Object.freeze({
   FwTab: script$6,
   FwModal: script$7,
   FwProgressBar: script$8,
+  FwTag: script$9,
   FwEmailPulse: __default__,
   FwSuccessPulse: __default__$1
 });