@frollo/frollo-web-ui 7.0.1 → 8.0.0

package/esm/fw-drawer.js

@@ -1,15 +1,10 @@
-import './es.array.includes-08e25019.js';
 import { defineComponent, ref, computed, onMounted, resolveComponent, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, createElementBlock, renderSlot, createCommentVNode, createVNode, createTextVNode, toDisplayString, vShow } from 'vue';
-import { s as script$1 } from './fw-button-c8502414.js';
-import { u as uniqueId } from './uniqueId-fe08534a.js';
-import { c as render$1 } from './index-bced3b35.js';
-import { s as styleInject } from './style-inject.es-1f59c1d0.js';
-import './is-forced-7cb3ee8f.js';
-import './export-10c4adbc.js';
-import './add-to-unscopables-ee05b58f.js';
-import './object-create-51bf02dc.js';
-import './fw-loading-spinner-72d70258.js';
-import './check-94a5917a.js';
+import { s as script$1 } from './fw-button-4QLZlu0U.js';
+import { u as uniqueId } from './uniqueId-DK6xzFd8.js';
+import { b as render$1 } from './index-CUPvK0Aa.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import './fw-loading-spinner-Dn52RI5h.js';
+import './check--YD4Ts6g.js';
 
 var script = defineComponent({
   name: 'FwDrawer',
@@ -17,56 +12,58 @@ var script = defineComponent({
     FwButton: script$1,
     XMarkSvg: render$1
   },
-  emits: ['update:modelValue', 'cancel', 'confirm'],
+  emits: ['update:modelValue', /** Fired when cancel button is clicked */
+  'cancel', /** Fired when confirm button is clicked */
+  'confirm'],
   props: {
-    /**
-     * The drawer's v-model. Controls the visibility of the drawer.
+    /**
+     * The drawer's v-model. Controls the visibility of the drawer.
      */
     modelValue: {
       type: Boolean
     },
-    /**
-     * The header title of the drawer
+    /**
+     * The header title of the drawer
      */
     header: {
       type: String
     },
-    /**
-     * The body description of the drawer
+    /**
+     * The body description of the drawer
      */
     body: {
       type: String
     },
-    /**
-     * The aria role of the drawer container. Defaults to `dialog`
+    /**
+     * The aria role of the drawer container. Defaults to `dialog`
      */
     role: {
       type: String,
       "default": 'dialog'
     },
-    /**
-     * Whether to show the cancel button
+    /**
+     * Whether to show the cancel button
      */
     showCancel: {
       type: Boolean,
       "default": false
     },
-    /**
-     * Whether to show the confirm button
+    /**
+     * Whether to show the confirm button
      */
     showConfirm: {
       type: Boolean,
       "default": true
     },
-    /**
-     * Custom text for the cancel button
+    /**
+     * Custom text for the cancel button
      */
     cancelButtonText: {
       type: String,
       "default": 'Cancel'
     },
-    /**
-     * Button variant for the cancel button
+    /**
+     * Button variant for the cancel button
      */
     cancelButtonType: {
       type: String,
@@ -75,15 +72,15 @@ var script = defineComponent({
         return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text', 'transparent'].includes(value);
       }
     },
-    /**
-     * Custom text for the confirm button
+    /**
+     * Custom text for the confirm button
      */
     confirmButtonText: {
       type: String,
       "default": 'Confirm'
     },
-    /**
-     * Button variant for the confirm button
+    /**
+     * Button variant for the confirm button
      */
     confirmButtonType: {
       type: String,
@@ -214,8 +211,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   });
 }
 
-var css_248z = ".clip-top-shadow{-webkit-clip-path:inset(-4px 0 0 0);clip-path:inset(-4px 0 0 0)}.drawerSlideInOut-enter-active{-webkit-animation:drawerSlideInOut .4s;animation:drawerSlideInOut .4s;-webkit-transition:all .4s ease-in;transition:all .4s ease-in}.drawerSlideInOut-leave-active{animation:drawerSlideInOut .4s reverse;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}@-webkit-keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}";
-var stylesheet = ".clip-top-shadow{-webkit-clip-path:inset(-4px 0 0 0);clip-path:inset(-4px 0 0 0)}.drawerSlideInOut-enter-active{-webkit-animation:drawerSlideInOut .4s;animation:drawerSlideInOut .4s;-webkit-transition:all .4s ease-in;transition:all .4s ease-in}.drawerSlideInOut-leave-active{animation:drawerSlideInOut .4s reverse;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}@-webkit-keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}";
+var css_248z = ".clip-top-shadow{-webkit-clip-path:inset(-4px 0 0 0);clip-path:inset(-4px 0 0 0)}.drawerSlideInOut-enter-active{-webkit-animation:drawerSlideInOut .4s;-moz-animation:drawerSlideInOut .4s;animation:drawerSlideInOut .4s;-webkit-transition:all .4s ease-in;-moz-transition:all .4s ease-in;transition:all .4s ease-in}.drawerSlideInOut-leave-active{animation:drawerSlideInOut .4s reverse;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;transition:all .4s ease-in-out}@-webkit-keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes drawerSlideInOut{0%{opacity:0;-moz-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-moz-transform:translateX(0);transform:translateX(0)}}@keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}}";
+var stylesheet = ".clip-top-shadow{-webkit-clip-path:inset(-4px 0 0 0);clip-path:inset(-4px 0 0 0)}.drawerSlideInOut-enter-active{-webkit-animation:drawerSlideInOut .4s;-moz-animation:drawerSlideInOut .4s;animation:drawerSlideInOut .4s;-webkit-transition:all .4s ease-in;-moz-transition:all .4s ease-in;transition:all .4s ease-in}.drawerSlideInOut-leave-active{animation:drawerSlideInOut .4s reverse;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;transition:all .4s ease-in-out}@-webkit-keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes drawerSlideInOut{0%{opacity:0;-moz-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-moz-transform:translateX(0);transform:translateX(0)}}@keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}}";
 styleInject(css_248z);
 
 script.render = render;

package/esm/fw-dropdown-nLtzu2fS.js

@@ -0,0 +1,277 @@
+import { defineComponent, toRef, ref, computed, watch, onMounted, onBeforeUnmount, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, normalizeClass, createBlock, renderSlot, createVNode, Transition, withCtx, withDirectives, Fragment, renderList, vShow } from 'vue';
+import { u as useField } from './vee-validate.esm-3ptvCDR1.js';
+import { r as render$1 } from './index-CUPvK0Aa.js';
+import { s as script$1 } from './fw-image-DOgM8i8X.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var script = defineComponent({
+  name: 'FwDropdown',
+  emits: ['update:modelValue'],
+  components: {
+    ChevronDownSvg: render$1,
+    FwImage: script$1
+  },
+  props: {
+    /**
+     * The select v-model
+     */
+    modelValue: {
+      type: String
+    },
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+      type: String,
+      required: true
+    },
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+      type: String
+    },
+    /**
+     * Validation rules. Accepts an object, string schema or validation function.
+     */
+    rules: {
+      type: [Object, String, Function]
+    },
+    /**
+     * An array of options for the dropdown menu.
+     */
+    options: {
+      type: Array,
+      required: true
+    },
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+      type: String
+    },
+    /**
+     * Custom placeholder text
+     */
+    placeholder: {
+      type: String,
+      required: false,
+      "default": 'Select'
+    },
+    /**
+     * Enable the error section UI.
+     * Defaults to true
+     */
+    enableErrors: {
+      type: Boolean,
+      "default": true
+    },
+    /**
+     * Enables the required asterisk. (UI only)
+     * Use the field validation rule to validate input.
+     */
+    required: {
+      type: Boolean,
+      "default": false
+    }
+  },
+  setup: function setup(props, ctx) {
+    var menuButtonClass = "inline-flex w-full justify-between items-center rounded-md border-2 bg-white px-4 py-3\n      shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
+    var menuClass = "absolute left-0 mt-1 w-full text-left z-10 origin-top-left rounded-md bg-grey-20 drop-shadow-lg\n      ring-1 ring-black ring-opacity-5 focus:outline-none";
+    var menuItemClass = "block px-4 py-3 my-1 cursor-pointer hover:bg-white first:rounded-t-md last:rounded-b-md\n      first:mt-0 last:mb-0";
+    var nameRef = toRef(props, 'name');
+    var _useField = useField(nameRef, props.rules),
+      errors = _useField.errors,
+      errorMessage = _useField.errorMessage,
+      meta = _useField.meta,
+      fieldVal = _useField.value;
+    var selectedOption = ref(null);
+    var selectValue = computed({
+      get: function get() {
+        return props.modelValue;
+      },
+      set: function set(state) {
+        fieldVal.value = state;
+        ctx.emit('update:modelValue', state);
+      }
+    });
+    var isOpen = ref(false);
+    var selectOption = function selectOption(option) {
+      selectValue.value = option.value;
+      selectedOption.value = option;
+      isOpen.value = false;
+    };
+    var onEscape = function onEscape(e) {
+      if (e.key === 'Esc' || e.key === 'Escape') {
+        isOpen.value = false;
+      }
+    };
+    var menuItemActiveClass = function menuItemActiveClass(option) {
+      var _selectedOption$value;
+      if (((_selectedOption$value = selectedOption.value) === null || _selectedOption$value === void 0 ? void 0 : _selectedOption$value.value) === option.value) {
+        return 'bg-white';
+      }
+      return 'bg-none';
+    };
+    watch(selectValue, function (newValue) {
+      if (newValue) {
+        var foundOption = props.options.find(function (option) {
+          return option.value === newValue;
+        });
+        if (foundOption) selectedOption.value = foundOption;
+      } else {
+        selectedOption.value = null;
+      }
+    }, {
+      immediate: true
+    });
+    onMounted(function () {
+      document.addEventListener('keydown', onEscape);
+    });
+    onBeforeUnmount(function () {
+      document.removeEventListener('keydown', onEscape);
+    });
+    return {
+      menuButtonClass: menuButtonClass,
+      menuClass: menuClass,
+      menuItemClass: menuItemClass,
+      menuItemActiveClass: menuItemActiveClass,
+      errors: errors,
+      errorMessage: errorMessage,
+      meta: meta,
+      fieldVal: fieldVal,
+      isOpen: isOpen,
+      selectValue: selectValue,
+      selectOption: selectOption,
+      selectedOption: selectedOption
+    };
+  }
+});
+
+var _withScopeId = function _withScopeId(n) {
+  return pushScopeId("data-v-72f0ebf0"), n = n(), popScopeId(), n;
+};
+var _hoisted_1 = {
+  "class": "fw-dropdown relative"
+};
+var _hoisted_2 = {
+  key: 0,
+  "class": "block mb-1 font-medium text-left"
+};
+var _hoisted_3 = {
+  key: 0,
+  "class": "text-error ml-0.5"
+};
+var _hoisted_4 = ["id", "aria-expanded"];
+var _hoisted_5 = {
+  key: 0,
+  "class": "flex items-center gap-x-2"
+};
+var _hoisted_6 = {
+  "class": "flex flex-col text-left"
+};
+var _hoisted_7 = {
+  "class": "font-medium"
+};
+var _hoisted_8 = {
+  key: 0,
+  "class": "text-p-small"
+};
+var _hoisted_9 = {
+  key: 1,
+  "class": "flex flex-row items-center gap-x-2 text-grey-light"
+};
+var _hoisted_10 = {
+  "class": ""
+};
+var _hoisted_11 = ["aria-labelledby"];
+var _hoisted_12 = ["onClick"];
+var _hoisted_13 = {
+  "class": "flex items-center gap-x-2"
+};
+var _hoisted_14 = {
+  "class": "flex flex-col text-left"
+};
+var _hoisted_15 = {
+  key: 0,
+  "class": "text-p-small"
+};
+var _hoisted_16 = {
+  key: 1,
+  "class": "text-left text-sm min-h-[21px]"
+};
+var _hoisted_17 = {
+  key: 0,
+  "class": "text-error"
+};
+var _hoisted_18 = {
+  key: 1,
+  "class": "text-grey-base"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _ctx$selectedOption, _ctx$selectedOption2, _ctx$selectedOption3, _ctx$selectedOption4;
+  var _component_FwImage = resolveComponent("FwImage");
+  var _component_ChevronDownSvg = resolveComponent("ChevronDownSvg");
+  return openBlock(), createElementBlock("div", _hoisted_1, [_ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2, [createTextVNode(toDisplayString(_ctx.label) + " ", 1), _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_3, "*")) : createCommentVNode("", true)])) : createCommentVNode("", true), createElementVNode("button", {
+    type: "button",
+    "class": normalizeClass([_ctx.menuButtonClass, _ctx.isOpen ? 'border-primary' : 'border-grey-40 hover:border-grey-60']),
+    onClick: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.isOpen = !_ctx.isOpen;
+    }),
+    id: "".concat(_ctx.name, "-fw-dropdown--button"),
+    "aria-expanded": _ctx.isOpen,
+    "aria-haspopup": "true"
+  }, [(_ctx$selectedOption = _ctx.selectedOption) !== null && _ctx$selectedOption !== void 0 && _ctx$selectedOption.label ? (openBlock(), createElementBlock("div", _hoisted_5, [_ctx.selectedOption.image_url ? (openBlock(), createBlock(_component_FwImage, {
+    key: 0,
+    src: _ctx.selectedOption.image_url,
+    "class": "w-6 h-6"
+  }, null, 8, ["src"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_6, [createElementVNode("span", _hoisted_7, toDisplayString((_ctx$selectedOption2 = _ctx.selectedOption) === null || _ctx$selectedOption2 === void 0 ? void 0 : _ctx$selectedOption2.label), 1), (_ctx$selectedOption3 = _ctx.selectedOption) !== null && _ctx$selectedOption3 !== void 0 && _ctx$selectedOption3.description ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString((_ctx$selectedOption4 = _ctx.selectedOption) === null || _ctx$selectedOption4 === void 0 ? void 0 : _ctx$selectedOption4.description), 1)) : createCommentVNode("", true)])])) : (openBlock(), createElementBlock("div", _hoisted_9, [_ctx.$slots.placeholderIcon ? renderSlot(_ctx.$slots, "placeholderIcon", {
+    key: 0
+  }) : createCommentVNode("", true), createElementVNode("span", _hoisted_10, toDisplayString(_ctx.placeholder), 1)])), createVNode(_component_ChevronDownSvg, {
+    "class": normalizeClass(["w-6 text-primary transition-transform duration-300", _ctx.isOpen ? 'rotate-180' : ''])
+  }, null, 8, ["class"])], 10, _hoisted_4), createVNode(Transition, {
+    name: "slideUpDown"
+  }, {
+    "default": withCtx(function () {
+      return [withDirectives(createElementVNode("ul", {
+        "class": normalizeClass(_ctx.menuClass),
+        role: "menu",
+        "aria-orientation": "vertical",
+        "aria-labelledby": "".concat(_ctx.name, "-fw-dropdown--button"),
+        tabindex: "-1"
+      }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, function (option) {
+        return openBlock(), createElementBlock("li", {
+          key: option.value,
+          "class": normalizeClass([_ctx.menuItemClass, _ctx.menuItemActiveClass(option)]),
+          role: "menuitem",
+          tabindex: "0",
+          onClick: function onClick($event) {
+            return _ctx.selectOption(option);
+          }
+        }, [createElementVNode("div", _hoisted_13, [option.image_url ? (openBlock(), createBlock(_component_FwImage, {
+          key: 0,
+          src: option.image_url,
+          "class": "w-[20px] h-[20px]"
+        }, null, 8, ["src"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_14, [createElementVNode("span", null, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(option.description), 1)) : createCommentVNode("", true)])])], 10, _hoisted_12);
+      }), 128))], 10, _hoisted_11), [[vShow, _ctx.isOpen]])];
+    }),
+    _: 1
+  }), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_16, [createVNode(Transition, {
+    name: "fwFadeIn",
+    mode: "out-in"
+  }, {
+    "default": withCtx(function () {
+      return [(_ctx.errorMessage || _ctx.errors[0]) && _ctx.meta.touched ? (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(_ctx.errorMessage || _ctx.errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_18, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
+    }),
+    _: 1
+  })])) : createCommentVNode("", true)]);
+}
+
+var css_248z = ".slideUpDown-enter-active[data-v-72f0ebf0]{-webkit-animation:slideUpDown-72f0ebf0 .3s;-moz-animation:slideUpDown-72f0ebf0 .3s;animation:slideUpDown-72f0ebf0 .3s;-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in}.slideUpDown-leave-active[data-v-72f0ebf0]{animation:slideUpDown-72f0ebf0 .3s reverse;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}@-webkit-keyframes slideUpDown-72f0ebf0{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@-moz-keyframes slideUpDown-72f0ebf0{0%{opacity:0;-moz-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-moz-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideUpDown-72f0ebf0{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);-moz-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0)}}";
+var stylesheet = ".slideUpDown-enter-active[data-v-72f0ebf0]{-webkit-animation:slideUpDown-72f0ebf0 .3s;-moz-animation:slideUpDown-72f0ebf0 .3s;animation:slideUpDown-72f0ebf0 .3s;-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in}.slideUpDown-leave-active[data-v-72f0ebf0]{animation:slideUpDown-72f0ebf0 .3s reverse;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}@-webkit-keyframes slideUpDown-72f0ebf0{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@-moz-keyframes slideUpDown-72f0ebf0{0%{opacity:0;-moz-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-moz-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideUpDown-72f0ebf0{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);-moz-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0)}}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-72f0ebf0";
+
+export { script as s };

package/esm/fw-dropdown.js

@@ -1,16 +1,8 @@
-export { s as FwDropdown } from './fw-dropdown-6856e66e.js';
-import './es.array.find-1ded15d5.js';
-import './is-forced-7cb3ee8f.js';
-import './export-10c4adbc.js';
-import './array-iteration-8267bf22.js';
-import './array-species-create-1c67e297.js';
-import './classof-d44bf093.js';
-import './add-to-unscopables-ee05b58f.js';
-import './object-create-51bf02dc.js';
-import './es.object.to-string-4b07c4d1.js';
+export { s as FwDropdown } from './fw-dropdown-nLtzu2fS.js';
 import 'vue';
-import './vee-validate.esm-a17a23c3.js';
-import './index-bced3b35.js';
-import './check-94a5917a.js';
-import './es.function.name-6cafd747.js';
-import './style-inject.es-1f59c1d0.js';
+import './vee-validate.esm-3ptvCDR1.js';
+import './index-CUPvK0Aa.js';
+import './check--YD4Ts6g.js';
+import './fw-image-DOgM8i8X.js';
+import './fw-loading-bar-DThRjdw1.js';
+import './style-inject.es-tgCJW-Cu.js';

package/esm/fw-form.js

@@ -1,2 +1,2 @@
-export { F as FwForm } from './vee-validate.esm-a17a23c3.js';
+export { F as FwForm } from './vee-validate.esm-3ptvCDR1.js';
 import 'vue';

package/esm/fw-image-DOgM8i8X.js

@@ -0,0 +1,200 @@
+import { defineComponent, computed, ref, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, withKeys, createElementVNode, createVNode, createBlock, createCommentVNode, renderSlot } from 'vue';
+import { s as script$1 } from './fw-loading-bar-DThRjdw1.js';
+import { k as render$1 } from './index-CUPvK0Aa.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var handleIntersect = function handleIntersect(entries, observer) {
+  entries.forEach(function (entry) {
+    if (entry.isIntersecting) {
+      loadImage(entry.target);
+      observer.unobserve(entry.target);
+    }
+  });
+};
+var createObserver = function createObserver(el) {
+  var options = {
+    root: null,
+    threshold: Number(el.getAttribute('threshold')) || 0
+  };
+  var observer = new IntersectionObserver(handleIntersect, options);
+  observer.observe(el);
+};
+var loadImage = function loadImage(el) {
+  var imageElement = Array.from(el.children).find(function (element) {
+    return element.nodeName === 'IMG';
+  });
+  if (imageElement) {
+    var type = el.getAttribute('type');
+    var url = imageElement.dataset.url;
+    var setImgError = function setImgError() {
+      setTimeout(function () {
+        return el.classList.add('fw-image--loaded-error');
+      }, 100);
+      setTimeout(function () {
+        var _el$querySelector;
+        return (_el$querySelector = el.querySelector('.fw-image--loading')) === null || _el$querySelector === void 0 ? void 0 : _el$querySelector.remove();
+      }, 600);
+    };
+    if (url) {
+      imageElement.src = url;
+    } else {
+      setImgError();
+    }
+    imageElement.addEventListener('load', function () {
+      setTimeout(function () {
+        return el.classList.add('fw-image--loaded');
+      }, 100);
+      setTimeout(function () {
+        var _el$querySelector2;
+        return (_el$querySelector2 = el.querySelector('.fw-image--loading')) === null || _el$querySelector2 === void 0 ? void 0 : _el$querySelector2.remove();
+      }, 600);
+    });
+    imageElement.addEventListener('error', function () {
+      setImgError();
+    });
+    if (type === 'background') {
+      el.style.backgroundImage = "url('".concat(url, "')");
+      imageElement.classList.add('!invisible');
+    }
+  }
+};
+var lazyLoadDirective = {
+  mounted: function mounted(el) {
+    if (window.IntersectionObserver) {
+      createObserver(el);
+    } else {
+      loadImage(el);
+    }
+  }
+};
+
+var script = defineComponent({
+  name: 'FwImage',
+  directives: {
+    lazyload: lazyLoadDirective
+  },
+  emits: ['click', 'mouseover', 'mouseout'],
+  components: {
+    FwLoadingBar: script$1,
+    FileExclamationSvg: render$1
+  },
+  props: {
+    /**
+     * The src attribute of the image
+     */
+    src: String,
+    /**
+     * The alt attribute of the image
+     */
+    alt: String,
+    /**
+     * The type of component. Accepts 'background' and defaults to the native html5 element.
+     */
+    type: {
+      type: String,
+      "default": 'native',
+      validator: function validator(value) {
+        return ['native', 'background'].includes(value);
+      }
+    },
+    /**
+     * Whether the loading bar and error state are rounded.
+     */
+    rounded: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * The class for the native image element
+     */
+    imageClass: {
+      type: String
+    },
+    /**
+     * Controls the threshold before the component triggers the src url.
+     */
+    threshold: {
+      type: Number,
+      "default": 0
+    },
+    /**
+     * Controls the error UI when an image src is unavailable.
+     */
+    enableErrors: {
+      type: Boolean,
+      "default": true
+    }
+  },
+  setup: function setup(props) {
+    var isBackground = computed(function () {
+      return props.type === 'background';
+    });
+    var fwImageRef = ref(null);
+    return {
+      fwImageRef: fwImageRef,
+      isBackground: isBackground
+    };
+  }
+});
+
+var _hoisted_1 = ["type", "threshold"];
+var _hoisted_2 = ["data-url", "alt"];
+var _hoisted_3 = {
+  "class": "fw-image--error-wrapper flex flex-col items-center justify-center"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
+  var _component_FileExclamationSvg = resolveComponent("FileExclamationSvg");
+  var _directive_lazyload = resolveDirective("lazyload");
+  return withDirectives((openBlock(), createElementBlock("div", {
+    ref: "fwImageRef",
+    type: _ctx.type,
+    threshold: _ctx.threshold,
+    "class": normalizeClass(["fw-image", {
+      'fw-image--background': _ctx.isBackground,
+      'rounded-full': _ctx.rounded
+    }]),
+    onClick: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.$emit('click', $event);
+    }),
+    onKeyup: _cache[1] || (_cache[1] = withKeys(function ($event) {
+      return _ctx.$emit('click', $event);
+    }, ["enter"])),
+    onMouseover: _cache[2] || (_cache[2] = function ($event) {
+      return _ctx.$emit('mouseover');
+    }),
+    onMouseout: _cache[3] || (_cache[3] = function ($event) {
+      return _ctx.$emit('mouseout');
+    }),
+    onFocusin: _cache[4] || (_cache[4] = function ($event) {
+      return _ctx.$emit('mouseover');
+    }),
+    onFocusout: _cache[5] || (_cache[5] = function ($event) {
+      return _ctx.$emit('mouseout');
+    })
+  }, [createElementVNode("img", {
+    "data-url": _ctx.src,
+    alt: _ctx.alt,
+    loading: "lazy",
+    "class": normalizeClass([_ctx.rounded ? 'rounded-full' : '', _ctx.imageClass])
+  }, null, 10, _hoisted_2), createVNode(_component_FwLoadingBar, {
+    "class": normalizeClass(["fw-image--loading w-full h-full", {
+      'rounded-full': _ctx.rounded
+    }])
+  }, null, 8, ["class"]), createElementVNode("div", {
+    "class": normalizeClass(["fw-image--error rounded bg-grey-20", {
+      'rounded-full': _ctx.rounded
+    }])
+  }, [createElementVNode("div", _hoisted_3, [_ctx.enableErrors ? (openBlock(), createBlock(_component_FileExclamationSvg, {
+    key: 0,
+    "class": "w-full h-full scale-[0.25] opacity-40 text-alert max-w-[150px]"
+  })) : createCommentVNode("", true)])], 2), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1)), [[_directive_lazyload]]);
+}
+
+var css_248z = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;-moz-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
+var stylesheet = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;-moz-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { script as s };

package/esm/fw-image.js

@@ -1,22 +1,6 @@
-export { s as FwImage } from './fw-image-aca2c61d.js';
-import './es.array.includes-08e25019.js';
-import './is-forced-7cb3ee8f.js';
-import './export-10c4adbc.js';
-import './add-to-unscopables-ee05b58f.js';
-import './object-create-51bf02dc.js';
-import './es.number.constructor-fb16fe05.js';
-import './classof-d44bf093.js';
+export { s as FwImage } from './fw-image-DOgM8i8X.js';
 import 'vue';
-import './array-iteration-8267bf22.js';
-import './array-species-create-1c67e297.js';
-import './array-method-is-strict-d313436f.js';
-import './es.object.to-string-4b07c4d1.js';
-import './es.array.find-1ded15d5.js';
-import './es.string.iterator-25db8cd2.js';
-import './create-property-eb329361.js';
-import './web.timers-e406c8e6.js';
-import './function-apply-e17cf65b.js';
-import './fw-loading-bar-f5ca605c.js';
-import './style-inject.es-1f59c1d0.js';
-import './index-bced3b35.js';
-import './check-94a5917a.js';
+import './fw-loading-bar-DThRjdw1.js';
+import './style-inject.es-tgCJW-Cu.js';
+import './index-CUPvK0Aa.js';
+import './check--YD4Ts6g.js';