@bildvitta/quasar-ui-asteroid 3.0.0-beta.9 → 3.0.0

package/dist/asteroid.umd.js

@@ -1,13 +1,13 @@
 /*!
-* @bildvitta/quasar-ui-asteroid v3.0.0-beta.9
+* @bildvitta/quasar-ui-asteroid v3.0.0
 * (c) 2022 Bild & Vitta <systemteam@bild.com.br>
 * Released under the MIT License.
 */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue'), require('humps'), require('date-fns'), require('date-fns/locale'), require('quasar'), require('lodash-es'), require('autonumeric'), require('pica'), require('signature_pad'), require('vue-router'), require('fuse.js'), require('sortablejs'), require('@fawmi/vue-google-maps')) :
-  typeof define === 'function' && define.amd ? define(['vue', 'humps', 'date-fns', 'date-fns/locale', 'quasar', 'lodash-es', 'autonumeric', 'pica', 'signature_pad', 'vue-router', 'fuse.js', 'sortablejs', '@fawmi/vue-google-maps'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global["{{ umdExportName }}"] = factory(global.Vue, global.humps, global.dateFns, global.dateFnsLocale, global.Quasar, global._, global.AutoNumeric, global.Pica, global.SignaturePad, global.VueRouter, global.Fuse, global.Sortable, global.VueGoogleMaps));
-})(this, (function (vue, humps, dateFns, locale, quasar, lodashEs, AutoNumeric, Pica, SignaturePad, vueRouter, Fuse, Sortable, VueGoogleMaps) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue'), require('humps'), require('date-fns'), require('date-fns/locale'), require('quasar'), require('lodash-es'), require('autonumeric'), require('pica'), require('signature_pad'), require('vue-router'), require('lodash'), require('fuse.js'), require('sortablejs'), require('@fawmi/vue-google-maps')) :
+  typeof define === 'function' && define.amd ? define(['vue', 'humps', 'date-fns', 'date-fns/locale', 'quasar', 'lodash-es', 'autonumeric', 'pica', 'signature_pad', 'vue-router', 'lodash', 'fuse.js', 'sortablejs', '@fawmi/vue-google-maps'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global["{{ umdExportName }}"] = factory(global.Vue, global.humps, global.dateFns, global.dateFnsLocale, global.Quasar, global._, global.AutoNumeric, global.Pica, global.SignaturePad, global.VueRouter, global.lodash, global.Fuse, global.Sortable, global.VueGoogleMaps));
+})(this, (function (vue, humps, dateFns, locale, quasar, lodashEs, AutoNumeric, Pica, SignaturePad, vueRouter, lodash, Fuse, Sortable, VueGoogleMaps) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -46,14 +46,14 @@
     }
   };
 
-  const _hoisted_1$s = { class: "col-12 col-sm-auto" };
+  const _hoisted_1$t = { class: "col-12 col-sm-auto" };
   const _hoisted_2$l = { class: "col-12 col-sm-auto" };
 
   function render$L(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("div", {
       class: vue.normalizeClass($options.classes)
     }, [
-      vue.createElementVNode("div", _hoisted_1$s, [
+      vue.createElementVNode("div", _hoisted_1$t, [
         vue.renderSlot(_ctx.$slots, "secondary")
       ]),
       vue.createElementVNode("div", _hoisted_2$l, [
@@ -69,13 +69,14 @@
     name: 'QasBtn',
 
     props: {
-      hideLabelOnSmallScreen: {
+      useLabelOnSmallScreen: {
+        default: true,
         type: Boolean
       },
 
       label: {
-        type: String,
-        default: ''
+        default: '',
+        type: String
       }
     },
 
@@ -87,12 +88,8 @@
         }
       },
 
-      hasLabel () {
-        return !!this.label
-      },
-
       showLabel () {
-        return this.hasLabel && !(this.hideLabelOnSmallScreen && this.$qas.screen.isSmall)
+        return this.useLabelOnSmallScreen || !this.$qas.screen.isSmall
       },
 
       slots () {
@@ -168,8 +165,6 @@
       }
     },
 
-    emits: ['delete-success'],
-
     computed: {
       hasDelete () {
         return !!Object.keys(this.deleteProps).length
@@ -182,15 +177,11 @@
           const { handler, ...filtered } = item;
           item.handler(filtered);
         }
-      },
-
-      onDeleteSuccess () {
-        this.$emit('delete-success');
       }
     }
   };
 
-  const _hoisted_1$r = { class: "flex items-center justify-center q-gutter-x-md" };
+  const _hoisted_1$s = { class: "flex items-center justify-center q-gutter-x-md" };
   const _hoisted_2$k = { class: "flex items-center justify-center q-gutter-x-sm" };
 
   function render$J(_ctx, _cache, $props, $setup, $data, $options) {
@@ -205,11 +196,11 @@
     return (vue.openBlock(), vue.createBlock(_component_qas_btn, {
       class: "qas-actions-menu",
       color: "primary",
-      "hide-label-on-small-screen": "",
       icon: $props.icon,
       label: $props.label,
       outline: "",
-      padding: "md"
+      padding: "md",
+      "use-label-on-small-screen": ""
     }, {
       default: vue.withCtx(() => [
         vue.createVNode(_component_q_menu, { class: "qas-actions-menu__menu" }, {
@@ -231,7 +222,7 @@
                       default: vue.withCtx(() => [
                         vue.createVNode(_component_q_item_section, null, {
                           default: vue.withCtx(() => [
-                            vue.createElementVNode("div", _hoisted_1$r, [
+                            vue.createElementVNode("div", _hoisted_1$s, [
                               vue.createVNode(_component_q_icon, {
                                 name: item.icon,
                                 size: "sm"
@@ -250,8 +241,7 @@
                   ? (vue.openBlock(), vue.createBlock(_component_qas_delete, vue.mergeProps({ key: 0 }, $props.deleteProps, {
                       class: "text-negative",
                       clickable: "",
-                      tag: "q-item",
-                      onSuccess: $options.onDeleteSuccess
+                      tag: "q-item"
                     }), {
                       default: vue.withCtx(() => [
                         vue.createVNode(_component_q_item_section, null, {
@@ -268,7 +258,7 @@
                         })
                       ]),
                       _: 1 /* STABLE */
-                    }, 16 /* FULL_PROPS */, ["onSuccess"]))
+                    }, 16 /* FULL_PROPS */))
                   : vue.createCommentVNode("v-if", true)
               ]),
               _: 3 /* FORWARDED */
@@ -472,6 +462,41 @@
     return first
   }
 
+  function camelizeFieldsName (fields) {
+    for (const field in fields) {
+      const currentField = fields[field];
+
+      currentField.name = humps.camelize(currentField.name);
+
+      if (Object.keys(currentField.children || {}).length) {
+        camelizeFieldsName(currentField.children);
+      }
+    }
+
+    return fields
+  }
+
+  /**
+   * param {options: object[], label: string, value: string} object
+   *
+   * @example getNormalizedOptions({
+   *  options: [{ name: 'Test 1', uuid: '1' }, { name: 'Test 2', uuid: '2' }],
+   *  label: 'name'
+   *  value: 'uuid'
+   * }) // retorna [{ label: 'Test 1', value: '1' }, { label: 'Test 2', value: '2' }]
+   */
+  var getNormalizedOptions = ({ options = [], label, value }) => {
+    return options.map(option => {
+      const { [label]: labelKey, [value]: valueKey, ...payload } = option;
+
+      return {
+        label: option[label],
+        value: option[value],
+        ...payload
+      }
+    })
+  };
+
   // Private
   function __format (value, token, options = {}) {
     if (!value) {
@@ -569,6 +594,8 @@
       case 'time': return time(value)
       case 'radio': return selectLabel(field.options, value)
       case 'percent': return formatPercent(value)
+      case 'money': return money(value)
+      case 'decimal': return decimal(value)
       default: return value
     }
   }
@@ -722,7 +749,7 @@
     }
   };
 
-  const _hoisted_1$q = { class: "q-gutter-md q-mr-lg" };
+  const _hoisted_1$r = { class: "q-gutter-md q-mr-lg" };
   const _hoisted_2$j = {
     key: 0,
     class: "text-bold text-h5"
@@ -746,7 +773,7 @@
             rounded: "",
             onClick: $options.close
           }, null, 8 /* PROPS */, ["color", "onClick"]),
-          vue.createElementVNode("div", _hoisted_1$q, [
+          vue.createElementVNode("div", _hoisted_1$r, [
             vue.renderSlot(_ctx.$slots, "header", {}, () => [
               ($props.title)
                 ? (vue.openBlock(), vue.createElementBlock("h5", _hoisted_2$j, vue.toDisplayString($props.title), 1 /* TEXT */))
@@ -813,20 +840,16 @@
         }
 
         const contrastColor = this.color ? this.color : this.contrastColor;
-        // const contrastColor = this.textColor ? this.textColor : this.contrastColor
 
         return [
           this.dark
             ? `bg-${this.textColor} text-${contrastColor}`
             : `bg-${contrastColor} text-${this.textColor}`
-            // ? `bg-${this.color} text-${contrastColor}`
-            // : `bg-${contrastColor} text-${this.color}`
         ]
       },
 
       contrastColor () {
         return `${this.textColor}-contrast`
-        // return `${this.color}-contrast`
       },
 
       firstLetter () {
@@ -905,10 +928,6 @@
         type: String
       },
 
-      isAuth: {
-        type: Boolean
-      },
-
       title: {
         type: String,
         default: ''
@@ -963,6 +982,14 @@
 
       showTitle () {
         return this.title && !this.brand
+      },
+
+      hasUser () {
+        return !!Object.keys(this.user).length
+      },
+
+      userName () {
+        return this.user.name || this.user.givenName
       }
     },
 
@@ -985,7 +1012,7 @@
     }
   };
 
-  const _hoisted_1$p = ["alt", "src"];
+  const _hoisted_1$q = ["alt", "src"];
   const _hoisted_2$i = {
     key: 1,
     class: "text-bold text-grey-9 text-subtitle1 text-uppercase"
@@ -1008,11 +1035,10 @@
 
   function render$F(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_q_ajax_bar = vue.resolveComponent("q-ajax-bar");
-    const _component_q_btn = vue.resolveComponent("q-btn");
+    const _component_qas_btn = vue.resolveComponent("qas-btn");
     const _component_q_badge = vue.resolveComponent("q-badge");
     const _component_q_toolbar_title = vue.resolveComponent("q-toolbar-title");
     const _component_qas_avatar = vue.resolveComponent("qas-avatar");
-    const _component_qas_btn = vue.resolveComponent("qas-btn");
     const _component_q_menu = vue.resolveComponent("q-menu");
     const _component_q_toolbar = vue.resolveComponent("q-toolbar");
     const _component_q_header = vue.resolveComponent("q-header");
@@ -1033,7 +1059,7 @@
               position: "top",
               size: "2px"
             }),
-            vue.createVNode(_component_q_btn, {
+            vue.createVNode(_component_qas_btn, {
               color: "grey-7",
               dense: "",
               flat: "",
@@ -1053,7 +1079,7 @@
                         alt: $props.title,
                         class: "q-mr-sm qas-app-bar__brand",
                         src: $props.brand
-                      }, null, 8 /* PROPS */, _hoisted_1$p))
+                      }, null, 8 /* PROPS */, _hoisted_1$q))
                     : vue.createCommentVNode("v-if", true),
                   ($options.showTitle)
                     ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$i, vue.toDisplayString($props.title), 1 /* TEXT */))
@@ -1073,7 +1099,7 @@
             }),
             ($options.hasNotifications)
               ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$e, [
-                  vue.createVNode(_component_q_btn, {
+                  vue.createVNode(_component_qas_btn, {
                     class: "q-mr-md",
                     dense: "",
                     icon: "o_notifications",
@@ -1100,11 +1126,11 @@
               : vue.createCommentVNode("v-if", true),
             vue.createElementVNode("div", _hoisted_4$a, [
               vue.renderSlot(_ctx.$slots, "tools"),
-              ($props.isAuth)
+              ($options.hasUser)
                 ? (vue.openBlock(), vue.createElementBlock("div", {
                     key: 0,
                     class: "cursor-pointer items-center q-mr-sm qas-app-bar__user rounded-borders row text-grey-9",
-                    title: $props.user.name || $props.user.givenName
+                    title: $options.userName
                   }, [
                     vue.createVNode(_component_qas_avatar, {
                       class: "rounded-borders-left",
@@ -1114,10 +1140,10 @@
                       rounded: "",
                       size: "42px",
                       "text-color": "primary",
-                      title: $props.user.name || $props.user.givenName
+                      title: $options.userName
                     }, null, 8 /* PROPS */, ["image", "title"]),
                     vue.createElementVNode("div", _hoisted_6$4, [
-                      vue.createElementVNode("div", _hoisted_7$4, vue.toDisplayString($props.user.name || $props.user.givenName), 1 /* TEXT */),
+                      vue.createElementVNode("div", _hoisted_7$4, vue.toDisplayString($options.userName), 1 /* TEXT */),
                       vue.createElementVNode("div", _hoisted_8$3, vue.toDisplayString($props.user.email), 1 /* TEXT */)
                     ]),
                     vue.createVNode(_component_q_menu, {
@@ -1137,10 +1163,10 @@
                               vue.createVNode(_component_qas_avatar, {
                                 image: $props.user.photo,
                                 size: "145px",
-                                title: $props.user.name || $props.user.givenName
+                                title: $options.userName
                               }, null, 8 /* PROPS */, ["image", "title"])
                             ]),
-                            vue.createElementVNode("div", _hoisted_11$1, vue.toDisplayString($props.user.name || $props.user.givenName), 1 /* TEXT */),
+                            vue.createElementVNode("div", _hoisted_11$1, vue.toDisplayString($options.userName), 1 /* TEXT */),
                             vue.createElementVNode("div", _hoisted_12$1, vue.toDisplayString($props.user.email), 1 /* TEXT */),
                             vue.createElementVNode("div", _hoisted_13$1, [
                               vue.createVNode(_component_qas_btn, {
@@ -1319,7 +1345,7 @@
     }
   };
 
-  const _hoisted_1$o = { class: "column flex full-height justify-between no-wrap overflow-x-hidden" };
+  const _hoisted_1$p = { class: "column flex full-height justify-between no-wrap overflow-x-hidden" };
   const _hoisted_2$h = {
     key: 0,
     class: "q-ma-md"
@@ -1352,7 +1378,7 @@
       onMiniState: $options.setMiniState
     }, {
       default: vue.withCtx(() => [
-        vue.createElementVNode("div", _hoisted_1$o, [
+        vue.createElementVNode("div", _hoisted_1$p, [
           vue.createElementVNode("div", null, [
             ($options.displayModuleSection)
               ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$h, [
@@ -1529,15 +1555,11 @@
     name: 'QasCard',
 
     props: {
-      bgImagePosition: {
+      imagePosition: {
         type: String,
         default: 'center'
       },
 
-      formMode: {
-        type: Boolean
-      },
-
       gutter: {
         type: String,
         default: 'sm'
@@ -1548,6 +1570,14 @@
         type: Array
       },
 
+      outlined: {
+        type: Boolean
+      },
+
+      unelevated: {
+        type: Boolean
+      },
+
       useHeader: {
         type: Boolean
       }
@@ -1560,12 +1590,17 @@
     },
 
     computed: {
-      bgImagePositionClass () {
-        return `bg-position-${this.bgImagePosition}`
+      imagePositionClass () {
+        return `bg-position-${this.imagePosition}`
       },
 
       cardClasses () {
-        return this.formMode ? 'bg-white border-primary no-shadow' : 'shadow-14'
+        return {
+          'shadow-14': !this.unelevated,
+          'border-primary': this.outlined,
+          'no-shadow': this.outlined,
+          'bg-white': this.outlined
+        }
       },
 
       gutterClass () {
@@ -1596,7 +1631,7 @@
     }
   };
 
-  const _hoisted_1$n = { class: "col-12 col-lg-3 col-md-4 col-sm-6" };
+  const _hoisted_1$o = { class: "col-12 col-lg-3 col-md-4 col-sm-6" };
   const _hoisted_2$g = {
     key: 0,
     class: "overflow-hidden relative-position w-full"
@@ -1614,7 +1649,7 @@
     const _component_q_card_section = vue.resolveComponent("q-card-section");
     const _component_q_card = vue.resolveComponent("q-card");
 
-    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
       vue.createVNode(_component_q_card, {
         class: vue.normalizeClass(["border-radius-lg column full-height overflow-hidden", $options.cardClasses])
       }, {
@@ -1648,7 +1683,7 @@
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.imagesList, (item, index) => {
                         return (vue.openBlock(), vue.createBlock(_component_q_carousel_slide, {
                           key: index,
-                          class: vue.normalizeClass(["bg-no-repeat", $options.bgImagePositionClass]),
+                          class: vue.normalizeClass(["bg-no-repeat", $options.imagePositionClass]),
                           "img-src": item,
                           name: index
                         }, null, 8 /* PROPS */, ["class", "img-src", "name"]))
@@ -1877,7 +1912,7 @@
     }
   };
 
-  const _hoisted_1$m = /*#__PURE__*/vue.createTextVNode("Copiar");
+  const _hoisted_1$n = /*#__PURE__*/vue.createTextVNode("Copiar");
 
   function render$A(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_q_tooltip = vue.resolveComponent("q-tooltip");
@@ -1900,7 +1935,7 @@
         default: vue.withCtx(() => [
           vue.createVNode(_component_q_tooltip, null, {
             default: vue.withCtx(() => [
-              _hoisted_1$m
+              _hoisted_1$n
             ]),
             _: 1 /* STABLE */
           })
@@ -1924,33 +1959,33 @@
         type: String
       },
 
-      dateOnly: {
-        type: Boolean
-      },
-
       dateProps: {
         default: () => ({}),
         type: Object
       },
 
-      gmt: {
-        type: Boolean
-      },
-
       timeMask: {
         default: 'HH:mm',
         type: String
       },
 
-      timeOnly: {
-        type: Boolean
-      },
-
       timeProps: {
         default: () => ({}),
         type: Object
       },
 
+      useIso: {
+        type: Boolean
+      },
+
+      useTimeOnly: {
+        type: Boolean
+      },
+
+      useDateOnly: {
+        type: Boolean
+      },
+
       modelValue: {
         default: '',
         type: String
@@ -1987,16 +2022,16 @@
       maskDate () {
         const mask = [];
 
-        if (!this.timeOnly) { mask.push(this.dateMask); }
-        if (!this.dateOnly) { mask.push(this.timeMask); }
+        if (!this.useTimeOnly) { mask.push(this.dateMask); }
+        if (!this.useDateOnly) { mask.push(this.timeMask); }
 
         return mask.join(' ')
       }
     },
 
     watch: {
-      value (current, original) {
-        if (!current || this.timeOnly) {
+      modelValue (current, original) {
+        if (!current || this.useTimeOnly) {
           this.currentValue = current;
           return
         }
@@ -2022,18 +2057,18 @@
 
       updateModelValue (value) {
         this.currentValue = value;
-        const valueLength = value.replace(/_/g, '').length;
+        const valueLength = value?.replace?.(/_/g, '')?.length;
 
         if (value === '' || valueLength === this.mask.length) {
-          this.lastValue = this.timeOnly ? value : this.toISOString(value);
+          this.lastValue = this.useTimeOnly ? value : this.toISOString(value);
           this.$emit('update:modelValue', this.lastValue);
         }
 
-        if (this.dateOnly) {
+        if (this.useDateOnly) {
           this.$refs.dateProxy.hide();
         }
 
-        if (this.timeOnly) {
+        if (this.useTimeOnly) {
           this.$refs.timeProxy.hide();
         }
       },
@@ -2043,11 +2078,11 @@
           return ''
         }
 
-        if (this.dateOnly && !this.gmt) {
+        if (this.useDateOnly && !this.useIso) {
           return date(quasar.date.extractDate(value, this.maskDate), 'yyyy-MM-dd')
         }
 
-        if (this.timeOnly && !this.gmt) {
+        if (this.useTimeOnly && !this.useIso) {
           return quasar.date.extractDate(value, 'HH:MM')
         }
 
@@ -2055,14 +2090,14 @@
       },
 
       toMask (value) {
-        if (!value || this.timeOnly) {
+        if (!value || this.useTimeOnly) {
           return value || ''
         }
 
         const newDate = new Date(value).toISOString();
 
         return quasar.date.formatDate(
-          this.dateOnly ? newDate.slice(0, 23) : newDate,
+          this.useDateOnly ? newDate.slice(0, 23) : newDate,
           this.maskDate
         )
       }
@@ -2076,75 +2111,73 @@
     const _component_q_time = vue.resolveComponent("q-time");
     const _component_qas_input = vue.resolveComponent("qas-input");
 
-    return (vue.openBlock(), vue.createElementBlock("div", null, [
-      vue.createVNode(_component_qas_input, vue.mergeProps({ ref: "input" }, $options.attributes, {
-        modelValue: $data.currentValue,
-        "onUpdate:modelValue": [
-          _cache[2] || (_cache[2] = $event => (($data.currentValue) = $event)),
-          $options.updateModelValue
-        ],
-        "unmasked-value": false
-      }), {
-        append: vue.withCtx(() => [
-          (!$props.timeOnly)
-            ? (vue.openBlock(), vue.createBlock(_component_q_icon, {
-                key: 0,
-                class: "cursor-pointer",
-                name: "o_event"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_q_popup_proxy, {
-                    ref: "dateProxy",
-                    "transition-hide": "scale",
-                    "transition-show": "scale"
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(_component_q_date, vue.mergeProps({
-                        modelValue: $data.currentValue,
-                        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($data.currentValue) = $event))
-                      }, $props.dateProps, {
-                        mask: $options.maskDate,
-                        "onUpdate:modelValue": $options.updateModelValue
-                      }), null, 16 /* FULL_PROPS */, ["modelValue", "mask", "onUpdate:modelValue"])
-                    ]),
-                    _: 1 /* STABLE */
-                  }, 512 /* NEED_PATCH */)
-                ]),
-                _: 1 /* STABLE */
-              }))
-            : vue.createCommentVNode("v-if", true),
-          (!$props.dateOnly)
-            ? (vue.openBlock(), vue.createBlock(_component_q_icon, {
-                key: 1,
-                class: "cursor-pointer q-ml-md",
-                name: "o_access_time"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_q_popup_proxy, {
-                    ref: "timeProxy",
-                    "transition-hide": "scale",
-                    "transition-show": "scale"
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(_component_q_time, vue.mergeProps({
-                        modelValue: $data.currentValue,
-                        "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.currentValue) = $event))
-                      }, $props.timeProps, {
-                        format24h: "",
-                        mask: $options.maskDate,
-                        "onUpdate:modelValue": $options.updateModelValue
-                      }), null, 16 /* FULL_PROPS */, ["modelValue", "mask", "onUpdate:modelValue"])
-                    ]),
-                    _: 1 /* STABLE */
-                  }, 512 /* NEED_PATCH */)
-                ]),
-                _: 1 /* STABLE */
-              }))
-            : vue.createCommentVNode("v-if", true)
-        ]),
-        _: 1 /* STABLE */
-      }, 16 /* FULL_PROPS */, ["modelValue", "onUpdate:modelValue"])
-    ]))
+    return (vue.openBlock(), vue.createBlock(_component_qas_input, vue.mergeProps({ ref: "input" }, $options.attributes, {
+      modelValue: $data.currentValue,
+      "onUpdate:modelValue": [
+        _cache[2] || (_cache[2] = $event => (($data.currentValue) = $event)),
+        $options.updateModelValue
+      ],
+      "unmasked-value": false
+    }), {
+      append: vue.withCtx(() => [
+        (!$props.useTimeOnly)
+          ? (vue.openBlock(), vue.createBlock(_component_q_icon, {
+              key: 0,
+              class: "cursor-pointer",
+              name: "o_event"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_q_popup_proxy, {
+                  ref: "dateProxy",
+                  "transition-hide": "scale",
+                  "transition-show": "scale"
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_q_date, vue.mergeProps({
+                      modelValue: $data.currentValue,
+                      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($data.currentValue) = $event))
+                    }, $props.dateProps, {
+                      mask: $options.maskDate,
+                      "onUpdate:modelValue": $options.updateModelValue
+                    }), null, 16 /* FULL_PROPS */, ["modelValue", "mask", "onUpdate:modelValue"])
+                  ]),
+                  _: 1 /* STABLE */
+                }, 512 /* NEED_PATCH */)
+              ]),
+              _: 1 /* STABLE */
+            }))
+          : vue.createCommentVNode("v-if", true),
+        (!$props.useDateOnly)
+          ? (vue.openBlock(), vue.createBlock(_component_q_icon, {
+              key: 1,
+              class: "cursor-pointer q-ml-md",
+              name: "o_access_time"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_q_popup_proxy, {
+                  ref: "timeProxy",
+                  "transition-hide": "scale",
+                  "transition-show": "scale"
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_q_time, vue.mergeProps({
+                      modelValue: $data.currentValue,
+                      "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.currentValue) = $event))
+                    }, $props.timeProps, {
+                      format24h: "",
+                      mask: $options.maskDate,
+                      "onUpdate:modelValue": $options.updateModelValue
+                    }), null, 16 /* FULL_PROPS */, ["modelValue", "mask", "onUpdate:modelValue"])
+                  ]),
+                  _: 1 /* STABLE */
+                }, 512 /* NEED_PATCH */)
+              ]),
+              _: 1 /* STABLE */
+            }))
+          : vue.createCommentVNode("v-if", true)
+      ]),
+      _: 1 /* STABLE */
+    }, 16 /* FULL_PROPS */, ["modelValue", "onUpdate:modelValue"]))
   }
 
   script$z.render = render$z;
@@ -2162,12 +2195,12 @@
     }
   };
 
-  const _hoisted_1$l = { class: "bg-grey-3 q-my-md q-pa-md rounded-borders" };
+  const _hoisted_1$m = { class: "bg-grey-3 q-my-md q-pa-md rounded-borders" };
   const _hoisted_2$f = /*#__PURE__*/vue.createElementVNode("summary", null, "Debugger", -1 /* HOISTED */);
   const _hoisted_3$b = { class: "row" };
 
   function render$y(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("details", _hoisted_1$l, [
+    return (vue.openBlock(), vue.createElementBlock("details", _hoisted_1$m, [
       _hoisted_2$f,
       vue.createElementVNode("div", _hoisted_3$b, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.inspect, (item, index) => {
@@ -2245,7 +2278,11 @@
         type: Boolean
       },
 
-      useCloseIcon: {
+      useCloseButton: {
+        type: Boolean
+      },
+
+      useValidationAllAtOnce: {
         type: Boolean
       }
     },
@@ -2293,7 +2330,26 @@
 
     methods: {
       async submitHandler () {
-        this.useForm && this.$emit('validate', await this.$refs.form.validate());
+        if (!this.useForm) return
+
+        if (this.useValidationAllAtOnce) {
+          let isAllComponentValid = true;
+          const components = this.$refs.form.getValidationComponents() || [];
+
+          for (const component of components) {
+            const isValid = component?.validate?.();
+
+            if (!isValid) {
+              isAllComponentValid = false;
+            }
+          }
+
+          this.$emit('validate', isAllComponentValid);
+
+          return
+        }
+
+        this.$emit('validate', await this.$refs.form.validate());
       },
 
       // método para funcionar como plugin
@@ -2312,7 +2368,7 @@
     }
   };
 
-  const _hoisted_1$k = { class: "justify-between row" };
+  const _hoisted_1$l = { class: "justify-between row" };
   const _hoisted_2$e = { class: "text-bold text-h6" };
   const _hoisted_3$a = { key: 0 };
 
@@ -2337,9 +2393,9 @@
             vue.createVNode(_component_q_card_section, null, {
               default: vue.withCtx(() => [
                 vue.renderSlot(_ctx.$slots, "header", {}, () => [
-                  vue.createElementVNode("div", _hoisted_1$k, [
+                  vue.createElementVNode("div", _hoisted_1$l, [
                     vue.createElementVNode("div", _hoisted_2$e, vue.toDisplayString($props.card.title), 1 /* TEXT */),
-                    ($props.useCloseIcon)
+                    ($props.useCloseButton)
                       ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_qas_btn, {
                           key: 0,
                           dense: "",
@@ -2423,6 +2479,51 @@
     });
   };
 
+  var Logger = () => {
+    const isDebugEnabled = process.env.DEBUGGING;
+
+    const normalizeMessage = msg => `%c ${msg}`;
+    const getStyle = isError => (
+      `
+      background: ${isError ? '#C10015 ' : '#1976d2'};
+      font-weight: bold;
+      color: white;
+      padding: 6px 20px;
+      border-radius: 4px;
+      display: block;
+      width: 100%;
+      font-size: 12px;
+    `
+    );
+
+    return {
+      group (message, payload = [], { error } = {}) {
+        if (!isDebugEnabled) return
+
+        console.groupCollapsed(normalizeMessage(message), getStyle(error));
+
+        for (const item of payload) {
+          if (typeof item === 'string') {
+            console.info(normalizeMessage(item), getStyle(error));
+            continue
+          }
+
+          console.table(item);
+        }
+
+        console.groupEnd();
+      },
+
+      info (message) {
+        isDebugEnabled && console.info(normalizeMessage(message), getStyle());
+      },
+
+      error (message) {
+        isDebugEnabled && console.info(normalizeMessage(message), getStyle(true));
+      }
+    }
+  };
+
   quasar.Notify.registerType('error', {
     color: 'negative',
     progress: true
@@ -2609,7 +2710,13 @@
         try {
           const { destroyRoutes, history } = useHistory();
 
-          await this.$store.dispatch(`${this.entity}/destroy`, { id: this.id, url: this.url });
+          const payload = { id: this.id, url: this.url };
+
+          this.$qas.logger.group(
+            `QasDelete - destroy -> Payload do parâmetro do ${this.entity}/destroy`, [payload]
+          );
+
+          await this.$store.dispatch(`${this.entity}/destroy`, payload);
 
           NotifySuccess('Item deletado com sucesso!');
 
@@ -2623,9 +2730,17 @@
           this.createDeleteSuccessEvent();
 
           this.$emit('success');
+
+          this.$qas.logger.info('QasDelete - destroy -> item deletado com sucesso!');
         } catch (error) {
           NotifyError('Ops! Não foi possível deletar o item.');
           this.$emit('error', error);
+
+          this.$qas.logger.group(
+            `QasDelete - destroy -> exceção da action ${this.entity}/destroy`,
+            [error],
+            { error: true }
+          );
         } finally {
           quasar.Loading.hide();
           this.$emit('update:deleting', false);
@@ -2767,8 +2882,8 @@
                 ($data.component)
                   ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($data.component), {
                       key: 0,
-                      dialog: "",
                       route: $data.route,
+                      "use-boundary": false,
                       onHide: $options.hide
                     }, null, 8 /* PROPS */, ["route", "onHide"]))
                   : vue.createCommentVNode("v-if", true)
@@ -2792,32 +2907,32 @@
     inheritAttrs: false,
 
     props: {
+      error: {
+        type: Boolean
+      },
+
+      errorMessage: {
+        type: String,
+        default: ''
+      },
+
       modelValue: {
         default: '',
         type: [String, Number]
       },
 
-      unmaskedValue: {
-        default: true,
-        type: Boolean
-      },
-
       outlined: {
         default: true,
         type: Boolean
       },
 
-      removeErrorOnType: {
+      unmaskedValue: {
+        default: true,
         type: Boolean
       },
 
-      error: {
+      useRemoveErrorOnType: {
         type: Boolean
-      },
-
-      errorMessage: {
-        type: String,
-        default: ''
       }
     },
 
@@ -2862,7 +2977,7 @@
         },
 
         set (value) {
-          if (this.removeErrorOnType && this.error) {
+          if (this.useRemoveErrorOnType && this.error) {
             this.errorData = false;
             this.errorMessageData = '';
           }
@@ -2874,7 +2989,7 @@
 
     watch: {
       mask () {
-        const input = this.inputReference.$el?.querySelector('input');
+        const input = this.getInput();
 
         requestAnimationFrame(() => {
           input.selectionStart = input.value ? input.value.length : '';
@@ -2908,12 +3023,30 @@
       },
 
       toggleMask (first, second) {
+        if (!this.modelValue?.length) return
+
         const length = first.split('#').length - 2;
         return this.modelValue?.length > length ? second : first
       },
 
       validate (value) {
         return this.inputReference.validate(value)
+      },
+
+      onPaste (event) {
+        if (!this.mask) return
+
+        const value = event.clipboardData.getData('text');
+        const input = this.getInput();
+
+        requestAnimationFrame(() => {
+          this.$emit('update:modelValue', value);
+          input.selectionStart = input.value ? input.value.length : '';
+        });
+      },
+
+      getInput () {
+        return this.inputReference.$el?.querySelector('input')
       }
     }
   };
@@ -2921,29 +3054,28 @@
   function render$u(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_q_input = vue.resolveComponent("q-input");
 
-    return (vue.openBlock(), vue.createElementBlock("div", null, [
-      vue.createVNode(_component_q_input, vue.mergeProps({
-        ref: "input",
-        modelValue: $options.model,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.model) = $event)),
-        "bottom-slots": "",
-        error: $data.errorData
-      }, _ctx.$attrs, {
-        "error-message": _ctx.errorMessageData,
-        mask: $options.mask,
-        outlined: $props.outlined,
-        "unmasked-value": $props.unmaskedValue
-      }), vue.createSlots({ _: 2 /* DYNAMIC */ }, [
-        vue.renderList(_ctx.$slots, (_, name) => {
-          return {
-            name: name,
-            fn: vue.withCtx((context) => [
-              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(context || {})))
-            ])
-          }
-        })
-      ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "error", "error-message", "mask", "outlined", "unmasked-value"])
-    ]))
+    return (vue.openBlock(), vue.createBlock(_component_q_input, vue.mergeProps({
+      ref: "input",
+      modelValue: $options.model,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.model) = $event)),
+      "bottom-slots": "",
+      error: $data.errorData
+    }, _ctx.$attrs, {
+      "error-message": _ctx.errorMessageData,
+      mask: $options.mask,
+      outlined: $props.outlined,
+      "unmasked-value": $props.unmaskedValue,
+      onPaste: $options.onPaste
+    }), vue.createSlots({ _: 2 /* DYNAMIC */ }, [
+      vue.renderList(_ctx.$slots, (_, name) => {
+        return {
+          name: name,
+          fn: vue.withCtx((context) => [
+            vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(context || {})))
+          ])
+        }
+      })
+    ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "error", "error-message", "mask", "outlined", "unmasked-value", "onPaste"]))
   }
 
   script$u.render = render$u;
@@ -2960,17 +3092,7 @@
     name: 'QasNumericInput',
 
     props: {
-      allowNegative: {
-        default: true,
-        type: Boolean
-      },
-
-      allowPositive: {
-        default: true,
-        type: Boolean
-      },
-
-      autonumericProps: {
+      autonumericOptions: {
         default: () => ({}),
         type: Object
       },
@@ -3002,6 +3124,16 @@
       preset: {
         default: false,
         type: [Boolean, String]
+      },
+
+      useNegative: {
+        default: true,
+        type: Boolean
+      },
+
+      usePositive: {
+        default: true,
+        type: Boolean
       }
     },
 
@@ -3045,11 +3177,11 @@
         Object.assign(options, autoNumericPredefinedOptions[value]);
       }
 
-      if (!this.allowNegative) {
+      if (!this.useNegative) {
         options.minimumValue = 0;
       }
 
-      if (!this.allowPositive) {
+      if (!this.usePositive) {
         options.maximumValue = 0;
       }
 
@@ -3057,7 +3189,7 @@
         options.decimalPlaces = this.decimalPlaces;
       }
 
-      Object.assign(options, this.autonumericProps);
+      Object.assign(options, this.autonumericOptions);
 
       this.$nextTick(() => {
         this.autoNumeric = new AutoNumeric__default["default"](this.$refs.input, options);
@@ -3087,7 +3219,7 @@
     }
   };
 
-  const _hoisted_1$j = ["id"];
+  const _hoisted_1$k = ["id"];
 
   function render$t(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_q_field = vue.resolveComponent("q-field");
@@ -3104,7 +3236,7 @@
           onBlur: _cache[0] || (_cache[0] = (...args) => ($options.emitValue && $options.emitValue(...args))),
           onClick: _cache[1] || (_cache[1] = (...args) => ($options.setSelect && $options.setSelect(...args))),
           onInput: _cache[2] || (_cache[2] = $event => ($options.emitUpdateModel($event.target.value)))
-        }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$j), [
+        }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$k), [
           [vue.vShow, floatingLabel]
         ])
       ]),
@@ -3267,13 +3399,13 @@
     }
   };
 
-  const _hoisted_1$i = { key: 0 };
+  const _hoisted_1$j = { key: 0 };
 
   function render$s(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_q_linear_progress = vue.resolveComponent("q-linear-progress");
 
     return ($options.length)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           vue.renderSlot(_ctx.$slots, "default", { level: $options.level }, () => [
             vue.createVNode(_component_q_linear_progress, {
               color: $options.level.color,
@@ -3300,8 +3432,11 @@
 
     mixins: [passwordMixin],
 
+    inheritAttrs: false,
+
     props: {
-      hideStrengthChecker: {
+      useStrengthChecker: {
+        default: true,
         type: Boolean
       },
 
@@ -3361,44 +3496,41 @@
     const _component_qas_password_strength_checker = vue.resolveComponent("qas-password-strength-checker");
     const _component_qas_input = vue.resolveComponent("qas-input");
 
-    return (vue.openBlock(), vue.createElementBlock("div", null, [
-      vue.createVNode(_component_qas_input, vue.mergeProps({
-        modelValue: $options.model,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.model) = $event)),
-        "bottom-slots": false,
-        color: "negative"
-      }, _ctx.$attrs, {
-        "remove-error-on-type": "",
-        type: $options.type
-      }), vue.createSlots({
-        append: vue.withCtx(() => [
-          vue.createVNode(_component_q_icon, {
-            class: "cursor-pointer",
-            color: $props.iconColor,
-            name: $options.icon,
-            onClick: $options.toggle
-          }, null, 8 /* PROPS */, ["color", "name", "onClick"])
-        ]),
-        _: 2 /* DYNAMIC */
-      }, [
-        vue.renderList(_ctx.$slots, (_, name) => {
-          return {
-            name: name,
-            fn: vue.withCtx((context) => [
-              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(context || {})))
+    return (vue.openBlock(), vue.createBlock(_component_qas_input, vue.mergeProps({
+      modelValue: $options.model,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.model) = $event)),
+      "bottom-slots": false
+    }, _ctx.$attrs, {
+      type: $options.type,
+      "use-remove-error-on-type": ""
+    }), vue.createSlots({
+      append: vue.withCtx(() => [
+        vue.createVNode(_component_q_icon, {
+          class: "cursor-pointer",
+          color: $props.iconColor,
+          name: $options.icon,
+          onClick: $options.toggle
+        }, null, 8 /* PROPS */, ["color", "name", "onClick"])
+      ]),
+      _: 2 /* DYNAMIC */
+    }, [
+      vue.renderList(_ctx.$slots, (_, name) => {
+        return {
+          name: name,
+          fn: vue.withCtx((context) => [
+            vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(context || {})))
+          ])
+        }
+      }),
+      ($props.useStrengthChecker)
+        ? {
+            name: "hint",
+            fn: vue.withCtx(() => [
+              vue.createVNode(_component_qas_password_strength_checker, vue.mergeProps($options.strengthCheckerProps, { password: $options.model }), null, 16 /* FULL_PROPS */, ["password"])
             ])
           }
-        }),
-        (!$props.hideStrengthChecker)
-          ? {
-              name: "hint",
-              fn: vue.withCtx(() => [
-                vue.createVNode(_component_qas_password_strength_checker, vue.mergeProps($options.strengthCheckerProps, { password: $options.model }), null, 16 /* FULL_PROPS */, ["password"])
-              ])
-            }
-          : undefined
-      ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "type"])
-    ]))
+        : undefined
+    ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "type"]))
   }
 
   script$r.render = render$r;
@@ -3472,7 +3604,11 @@
 
       uploading: {
         type: Boolean
-      }
+      },
+
+      useObjectModel: {
+        type: Boolean
+      }
     },
 
     emits: ['update:modelValue', 'update:uploading'],
@@ -3585,12 +3721,19 @@
       uploaded (response) {
         const fullPath = response.xhr.responseURL.split('?').shift();
 
-        this.$emit(
-          'update:modelValue',
-          this.isMultiple ? [...this.modelValue, fullPath] : fullPath || ''
-        );
+        const objectValue = {
+          format: response.files[0].type,
+          url: fullPath,
+          name: response.files[0].name
+        };
+
+        const model = this.useObjectModel ? objectValue : fullPath;
+
+        this.$emit('update:modelValue', this.isMultiple ? [...this.modelValue, model] : model || '');
 
         this.updateUploading(false);
+
+        this.$qas.logger.group('QasUploader - uploaded', [this.modelValue]);
       },
 
       async fetchCredentials (filename) {
@@ -3601,6 +3744,12 @@
             entity: this.entity,
             filename
           });
+
+          this.$qas.logger.group(
+            'QasUploader - fetchCredentials -> resposta de /upload-credentials/',
+            [data]
+          );
+
           return data
         } finally {
           this.isFetching = false;
@@ -3619,8 +3768,16 @@
         }
 
         const clonedValue = quasar.extend(true, [], this.modelValue);
-        const numberIndex = this.modelValue.findIndex(file => this.getFileName(file) === index);
+        const numberIndex = this.modelValue.findIndex(file => {
+          if (this.useObjectModel) {
+            return file.uuid === index || file.url.includes(index)
+          }
+
+          return this.getFileName(file) === index
+        });
+
         clonedValue.splice(numberIndex, 1);
+
         this.$emit('update:modelValue', clonedValue);
       },
 
@@ -3629,12 +3786,10 @@
       },
 
       getFilesList (uploadedFiles) {
-        const pathsList = Array.isArray(this.modelValue) ? this.modelValue : (this.modelValue ? [this.modelValue] : []);
-
         uploadedFiles = uploadedFiles.map((file, indexToDelete) => {
           return {
             isUploaded: true,
-            image: file.xhr ? file.xhr.responseURL.split('?').shift() : '',
+            url: file.xhr ? file.xhr.responseURL.split('?').shift() : '',
             name: file.name,
             progressLabel: file.__progressLabel,
             sizeLabel: file.__sizeLabel,
@@ -3643,11 +3798,20 @@
           }
         });
 
+        const pathsList = Array.isArray(this.modelValue)
+          ? this.modelValue
+          : (this.modelValue ? [this.modelValue] : []);
+
         const mergedList = [...pathsList, ...uploadedFiles];
 
         const files = {};
 
         mergedList.forEach(file => {
+          if (this.useObjectModel && file.uuid) {
+            files[file.uuid] = file;
+            return
+          }
+
           if (file.isFailed) {
             files[file.name] = file;
             return
@@ -3655,16 +3819,18 @@
 
           if (typeof file === 'string') {
             const fileName = this.getFileName(file);
-            files[fileName] = { image: file, isUploaded: false, name: fileName };
+            files[fileName] = { url: file, isUploaded: false, name: fileName };
             return
           }
 
-          if (file.image) {
-            const fileName = this.getFileName(file.image);
+          if (file.url) {
+            const fileName = this.getFileName(file.url);
             files[fileName] = file;
           }
         });
 
+        this.$qas.logger.group('QasUploader - getFilesList', [files]);
+
         return files
       },
 
@@ -3684,6 +3850,8 @@
         const filesList = Array.from(this.hiddenInputElement.files);
         const processedFiles = [];
 
+        this.$refs.hiddenInput.value = '';
+
         filesList.forEach(file => processedFiles.push(this.resizeImage(file)));
         this.uploader.addFiles(await Promise.all(processedFiles));
       },
@@ -3703,7 +3871,14 @@
           // Retorna largura e altura da original da imagem
           const { width, height } = await getImageSize(image);
 
-          if (width <= this.sizeLimit) return file
+          if (width <= this.sizeLimit) {
+            this.$qas.logger.info(`
+            QasUploader - resizeImage -> Tamanho da imagem menor que o tamanho limite,
+            sendo assim, não faz o resize
+          `);
+
+            return file
+          }
 
           // Retorna os novos tamanhos redimensionados
           const resizedDimensions = getResizeDimensions(this.sizeLimit, width, height);
@@ -3721,7 +3896,11 @@
           const resizedImage = await pica.resize(image, canvas, this.defaultPicaResizeOptions);
           const blob = await pica.toBlob(resizedImage, type, 0.90);
 
-          return new File([blob], file.name, { type })
+          const newFile = new File([blob], file.name, { type });
+
+          this.$qas.logger.group('QasUploader - resizeImage -> nova imagem', [newFile]);
+
+          return newFile
         } catch {
           // Caso não consiga redimensionar retorna o arquivo original
           return file
@@ -3734,7 +3913,7 @@
     }
   };
 
-  const _hoisted_1$h = { class: "flex flex-center full-width justify-between no-border no-wrap q-gutter-xs q-pa-sm text-white transparent" };
+  const _hoisted_1$i = { class: "flex flex-center full-width justify-between no-border no-wrap q-gutter-xs q-pa-sm text-white transparent" };
   const _hoisted_2$d = { class: "col column items-start justify-center" };
   const _hoisted_3$9 = {
     key: 0,
@@ -3744,7 +3923,7 @@
     key: 1,
     class: "q-uploader__subtitle"
   };
-  const _hoisted_5$5 = ["multiple"];
+  const _hoisted_5$5 = ["accept", "multiple"];
   const _hoisted_6$3 = { class: "col-12 q-col-gutter-md row" };
   const _hoisted_7$3 = { class: "col items-center no-wrap row" };
   const _hoisted_8$2 = {
@@ -3787,7 +3966,7 @@
         }), {
           header: vue.withCtx((scope) => [
             vue.renderSlot(_ctx.$slots, "header", { scope: scope }, () => [
-              vue.createElementVNode("div", _hoisted_1$h, [
+              vue.createElementVNode("div", _hoisted_1$i, [
                 (scope.isUploading)
                   ? (vue.openBlock(), vue.createBlock(_component_q_spinner, {
                       key: 0,
@@ -3816,6 +3995,7 @@
                   : vue.createCommentVNode("v-if", true),
                 vue.createElementVNode("input", {
                   ref: "hiddenInput",
+                  accept: $options.attributes.accept,
                   class: "qas-uploader__input",
                   multiple: $options.isMultiple,
                   type: "file"
@@ -3863,7 +4043,7 @@
                       class: "q-mr-sm",
                       color: "contrast-primary",
                       icon: "o_attach_file",
-                      image: file.image,
+                      image: file.url,
                       rounded: "",
                       "text-color": $options.getColorFileIcon(file)
                     }, null, 8 /* PROPS */, ["image", "text-color"]),
@@ -4024,7 +4204,7 @@
     }
   };
 
-  const _hoisted_1$g = {
+  const _hoisted_1$h = {
     ref: "signatureContainer",
     class: "qas-signature-pad relative-position"
   };
@@ -4034,7 +4214,7 @@
     const _component_qas_btn = vue.resolveComponent("qas-btn");
 
     return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-      vue.createElementVNode("div", _hoisted_1$g, [
+      vue.createElementVNode("div", _hoisted_1$h, [
         vue.createElementVNode("canvas", {
           id: $data.canvasId,
           ref: _ctx.$attrs.ref,
@@ -4069,6 +4249,7 @@
     name: 'QasSignatureUploader',
 
     components: {
+      QasBtn: script$K,
       QasDialog: script$x,
       QasUploader: script$q,
       QasSignaturePad: script$p
@@ -4197,7 +4378,7 @@
     }
   };
 
-  const _hoisted_1$f = { class: "col column items-start justify-center" };
+  const _hoisted_1$g = { class: "col column items-start justify-center" };
   const _hoisted_2$b = {
     key: 0,
     class: "q-uploader__title"
@@ -4205,7 +4386,7 @@
   const _hoisted_3$8 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-bold text-center" }, "Insira sua assinatura digital no campo abaixo", -1 /* HOISTED */);
 
   function render$o(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_q_btn = vue.resolveComponent("q-btn");
+    const _component_qas_btn = vue.resolveComponent("qas-btn");
     const _component_qas_uploader = vue.resolveComponent("qas-uploader");
     const _component_qas_signature_pad = vue.resolveComponent("qas-signature-pad");
     const _component_qas_dialog = vue.resolveComponent("qas-dialog");
@@ -4224,14 +4405,15 @@
             class: vue.normalizeClass(["cursor-pointer flex flex-center full-width justify-between no-border no-wrap q-gutter-xs text-white transparent", $options.headerClass]),
             onClick: _cache[0] || (_cache[0] = (...args) => ($options.openDialog && $options.openDialog(...args)))
           }, [
-            vue.createElementVNode("div", _hoisted_1$f, [
+            vue.createElementVNode("div", _hoisted_1$g, [
               ($props.uploadLabel)
                 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, vue.toDisplayString($props.uploadLabel), 1 /* TEXT */))
                 : vue.createCommentVNode("v-if", true)
             ]),
             (!$props.readonly)
-              ? (vue.openBlock(), vue.createBlock(_component_q_btn, {
+              ? (vue.openBlock(), vue.createBlock(_component_qas_btn, {
                   key: 0,
+                  color: "white",
                   dense: "",
                   flat: "",
                   icon: "o_add",
@@ -4239,12 +4421,12 @@
                   onClick: $options.openDialog
                 }, null, 8 /* PROPS */, ["onClick"]))
               : vue.createCommentVNode("v-if", true),
-            vue.createVNode(_component_q_btn, {
+            vue.createVNode(_component_qas_btn, {
               ref: "forceUpload",
               class: "hidden",
               onClick: $event => ($options.upload(scope))
             }, null, 8 /* PROPS */, ["onClick"]),
-            vue.createVNode(_component_q_btn, {
+            vue.createVNode(_component_qas_btn, {
               ref: "buttonCleanFiles",
               class: "hidden",
               onClick: scope.removeUploadedFiles
@@ -4273,7 +4455,7 @@
           ], 4 /* STYLE */)
         ]),
         actions: vue.withCtx(() => [
-          vue.createVNode(_component_q_btn, {
+          vue.createVNode(_component_qas_btn, {
             class: "full-width",
             color: "primary",
             disable: $data.isEmpty,
@@ -4281,7 +4463,7 @@
             "no-caps": "",
             onClick: $options.getSignatureData
           }, null, 8 /* PROPS */, ["disable", "onClick"]),
-          vue.createVNode(_component_q_btn, {
+          vue.createVNode(_component_qas_btn, {
             class: "full-width q-mt-sm",
             color: "primary",
             flat: "",
@@ -4317,6 +4499,8 @@
       QasSignatureUploader: script$o
     },
 
+    inheritAttrs: false,
+
     props: {
       error: {
         default: '',
@@ -4356,8 +4540,9 @@
           type,
           mask,
           maxFiles,
-          searchable,
-          gmt
+          useIso,
+          useSearch,
+          useLazyLoading
         } = this.formattedField;
 
         // Default error attributes for Quasar.
@@ -4379,11 +4564,11 @@
           minlength,
           suffix,
           prefix,
-          gmt
+          useIso
         };
 
         const numericInput = { is: 'qas-numeric-input', ...input };
-        const datetimeInput = { is: 'qas-date-time-input', gmt, ...input };
+        const datetimeInput = { is: 'qas-date-time-input', useIso, ...input };
 
         // It'll generate a list of acceptable files extensions.
         const accept = extensions && extensions.length ? extensions.map(extension => `.${extension}`).join(',') : '';
@@ -4411,9 +4596,9 @@
           money: { ...numericInput, mode: 'money' },
           percent: { ...numericInput, mode: 'percent' },
 
-          date: { ...datetimeInput, dateOnly: true },
+          date: { ...datetimeInput, useDateOnly: true },
           datetime: { ...datetimeInput },
-          time: { ...datetimeInput, timeOnly: true },
+          time: { ...datetimeInput, useTimeOnly: true },
 
           boolean: { is: 'q-toggle', label, ...error },
           checkbox: { is: 'qas-checkbox-group', label, options, ...error },
@@ -4424,7 +4609,7 @@
 
           'signature-uploader': { is: 'qas-signature-uploader', entity, uploadLabel: label, ...error },
 
-          select: { is: 'qas-select', multiple, options, searchable, ...input }
+          select: { is: 'qas-select', entity, name, multiple, options, useSearch, useLazyLoading, ...input }
         };
 
         return { ...(profiles[type] || profiles.default), ...this.$attrs }
@@ -4486,22 +4671,20 @@
   };
 
   function render$n(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("div", null, [
-      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.component.is), vue.mergeProps($options.component, {
-        "data-cy": $props.field.name,
-        "model-value": $options.formattedValue,
-        "onUpdate:modelValue": $options.updateModel
-      }), vue.createSlots({ _: 2 /* DYNAMIC */ }, [
-        vue.renderList(_ctx.$slots, (_, name) => {
-          return {
-            name: name,
-            fn: vue.withCtx((context) => [
-              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(context || {})))
-            ])
-          }
-        })
-      ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["data-cy", "model-value", "onUpdate:modelValue"]))
-    ]))
+    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.component.is), vue.mergeProps($options.component, {
+      "data-cy": $props.field.name,
+      "model-value": $options.formattedValue,
+      "onUpdate:modelValue": $options.updateModel
+    }), vue.createSlots({ _: 2 /* DYNAMIC */ }, [
+      vue.renderList(_ctx.$slots, (_, name) => {
+        return {
+          name: name,
+          fn: vue.withCtx((context) => [
+            vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(context || {})))
+          ])
+        }
+      })
+    ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["data-cy", "model-value", "onUpdate:modelValue"]))
   }
 
   script$n.render = render$n;
@@ -4520,6 +4703,7 @@
     name: 'QasFilters',
 
     components: {
+      QasBtn: script$K,
       QasField: script$n
     },
 
@@ -4561,7 +4745,7 @@
         type: String
       },
 
-      forceRefetch: {
+      useForceRefetch: {
         type: Boolean
       }
     },
@@ -4692,7 +4876,7 @@
       },
 
       async fetchFilters () {
-        if (!this.forceRefetch && (this.hasFields || !this.useFilterButton)) {
+        if (!this.useForceRefetch && (this.hasFields || !this.useFilterButton)) {
           return null
         }
 
@@ -4700,11 +4884,26 @@
         this.isFetching = true;
 
         try {
+          this.$qas.logger.group(
+            `QasFilters - fetchFilters -> Payload do parâmetro do ${this.entity}/fetchFilters`,
+            [{ url: this.url }]
+          );
+
           const response = await this.$store.dispatch(`${this.entity}/fetchFilters`, { url: this.url });
           this.$emit('fetch-success', response);
+
+          this.$qas.logger.group(
+            `QasFilters - fetchFilters -> resposta da action ${this.entity}/fetchFilters`, [response]
+          );
         } catch (error) {
           this.hasFetchError = true;
           this.$emit('fetch-error', error);
+
+          this.$qas.logger.group(
+            `QasFilters - fetchFilters -> exceção da action ${this.entity}/fetchFilters`,
+            [error],
+            { error: true }
+          );
         } finally {
           this.isFetching = false;
         }
@@ -4763,7 +4962,7 @@
     }
   };
 
-  const _hoisted_1$e = { class: "q-mb-lg" };
+  const _hoisted_1$f = { class: "q-mb-lg" };
   const _hoisted_2$a = {
     key: 0,
     class: "q-gutter-x-md row"
@@ -4787,8 +4986,8 @@
   };
 
   function render$m(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_q_btn = vue.resolveComponent("q-btn");
-    const _component_q_input = vue.resolveComponent("q-input");
+    const _component_qas_btn = vue.resolveComponent("qas-btn");
+    const _component_qas_input = vue.resolveComponent("qas-input");
     const _component_q_form = vue.resolveComponent("q-form");
     const _component_q_spinner = vue.resolveComponent("q-spinner");
     const _component_q_icon = vue.resolveComponent("q-icon");
@@ -4796,7 +4995,7 @@
     const _component_q_menu = vue.resolveComponent("q-menu");
     const _component_q_chip = vue.resolveComponent("q-chip");
 
-    return (vue.openBlock(), vue.createElementBlock("section", _hoisted_1$e, [
+    return (vue.openBlock(), vue.createElementBlock("section", _hoisted_1$f, [
       ($options.showFilters)
         ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
             ($options.showSearch)
@@ -4808,26 +5007,32 @@
                           onSubmit: _cache[2] || (_cache[2] = vue.withModifiers($event => ($options.filter()), ["prevent"]))
                         }, {
                           default: vue.withCtx(() => [
-                            vue.createVNode(_component_q_input, {
+                            vue.createVNode(_component_qas_input, {
                               modelValue: $data.search,
                               "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.search) = $event)),
                               debounce: $options.debounce,
                               dense: "",
+                              "hide-bottom-space": "",
+                              outlined: false,
                               placeholder: $props.searchPlaceholder,
                               type: "search"
                             }, {
                               append: vue.withCtx(() => [
                                 ($options.hasSearch)
-                                  ? (vue.openBlock(), vue.createBlock(_component_q_btn, {
+                                  ? (vue.openBlock(), vue.createBlock(_component_qas_btn, {
                                       key: 0,
+                                      color: "grey-9",
+                                      flat: "",
                                       icon: "o_clear",
                                       unelevated: "",
                                       onClick: $options.clearSearch
                                     }, null, 8 /* PROPS */, ["onClick"]))
                                   : vue.createCommentVNode("v-if", true),
                                 (!$options.debounce)
-                                  ? (vue.openBlock(), vue.createBlock(_component_q_btn, {
+                                  ? (vue.openBlock(), vue.createBlock(_component_qas_btn, {
                                       key: 1,
+                                      color: "grey-9",
+                                      flat: "",
                                       icon: "o_search",
                                       type: "submit",
                                       unelevated: "",
@@ -4850,7 +5055,7 @@
                   filter: $options.filter
                 }, () => [
                   ($props.useFilterButton)
-                    ? (vue.openBlock(), vue.createBlock(_component_q_btn, {
+                    ? (vue.openBlock(), vue.createBlock(_component_qas_btn, {
                         key: 0,
                         color: $options.filterButtonColor,
                         flat: "",
@@ -4895,16 +5100,19 @@
                                           ]))
                                         }), 128 /* KEYED_FRAGMENT */)),
                                         vue.createElementVNode("div", _hoisted_6$2, [
-                                          vue.createVNode(_component_q_btn, {
+                                          vue.createVNode(_component_qas_btn, {
                                             class: "q-mr-sm",
+                                            flat: "",
                                             label: "Limpar",
+                                            "no-caps": false,
                                             size: "12px",
                                             unelevated: "",
                                             onClick: $options.clearFilters
                                           }, null, 8 /* PROPS */, ["onClick"]),
-                                          vue.createVNode(_component_q_btn, {
+                                          vue.createVNode(_component_qas_btn, {
                                             color: "primary",
                                             label: "Filtrar",
+                                            "no-caps": false,
                                             size: "12px",
                                             type: "submit",
                                             unelevated: ""
@@ -4973,7 +5181,9 @@
       gutter: {
         default: 'md',
         type: [String, Boolean],
-        validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+        validator: value => {
+          return typeof value === 'boolean' || ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+        }
       }
     },
 
@@ -5022,7 +5232,13 @@
       },
 
       mx_handleColumnsByIndex (index, isGridGenerator) {
-        const fields = isGridGenerator ? this.fields : this.groupedFields.visible;
+        const fields = isGridGenerator ? this.fields : {};
+
+        if (!isGridGenerator) {
+          for (const key in this.normalizedFields) {
+            Object.assign(fields, this.normalizedFields[key].fields.visible);
+          }
+        }
 
         if (!Array.isArray(fields)) {
           index = Object.keys(fields).findIndex(field => field === index);
@@ -5072,6 +5288,19 @@
         default: () => ({}),
         required: true,
         type: Object
+      },
+
+      fieldset: {
+        default: () => ({}),
+        type: Object
+      },
+
+      fieldsetGutter: {
+        default: 'lg',
+        type: [String, Boolean],
+        validator: value => {
+          return typeof value === 'boolean' || ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+        }
       }
     },
 
@@ -5081,6 +5310,8 @@
       groupedFields () {
         const fields = { hidden: {}, visible: {} };
 
+        if (this.hasFieldset) return fields
+
         for (const key in this.fields) {
           const field = this.fields[key];
           fields[field.type === 'hidden' ? 'hidden' : 'visible'][key] = field;
@@ -5097,6 +5328,58 @@
         }
 
         return fields
+      },
+
+      normalizedFields () {
+        if (!this.hasFieldset) {
+          return {
+            default: {
+              fields: this.groupedFields
+            }
+          }
+        }
+
+        const fields = {};
+
+        for (const fieldsetKey in this.fieldset) {
+          const fieldsetItem = this.fieldset[fieldsetKey];
+
+          fields[fieldsetKey] = {
+            label: fieldsetItem.label,
+            fields: { hidden: {}, visible: {} }
+          };
+
+          for (const fieldName of fieldsetItem.fields) {
+            const field = this.fields[fieldName];
+
+            if (!field) continue
+
+            Object.assign(
+              fields[fieldsetKey].fields[
+                field.type === 'hidden' ? 'hidden' : 'visible'
+              ],
+              {
+                [fieldName]: field
+              }
+            );
+          }
+        }
+
+        return fields
+      },
+
+      hasFieldset () {
+        return !!Object.keys(this.fieldset).length
+      },
+
+      fieldsetClasses () {
+        const classes = ['row'];
+
+        if (this.fieldsetGutter) {
+          classes.push(`q-col-gutter-y-${this.fieldsetGutter}`);
+        }
+
+        return classes
       }
     },
 
@@ -5111,51 +5394,290 @@
   };
 
   function render$l(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_qas_label = vue.resolveComponent("qas-label");
     const _component_qas_field = vue.resolveComponent("qas-field");
 
-    return (vue.openBlock(), vue.createElementBlock("div", null, [
-      vue.createElementVNode("div", {
-        class: vue.normalizeClass(_ctx.mx_classes)
-      }, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.groupedFields.visible, (field, key) => {
-          return (vue.openBlock(), vue.createElementBlock("div", {
-            key: key,
-            class: vue.normalizeClass(_ctx.mx_getFieldClass(key))
-          }, [
-            vue.renderSlot(_ctx.$slots, `field-${field.name}`, { field: field }, () => [
-              vue.createVNode(_component_qas_field, vue.mergeProps($props.fieldsProps[field.name], {
-                error: $props.errors[key],
-                field: field,
-                "model-value": $props.modelValue[field.name],
-                "onUpdate:modelValue": $event => ($options.updateModelValue(field.name, $event))
-              }), null, 16 /* FULL_PROPS */, ["error", "field", "model-value", "onUpdate:modelValue"])
-            ])
-          ], 2 /* CLASS */))
-        }), 128 /* KEYED_FRAGMENT */))
-      ], 2 /* CLASS */),
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.groupedFields.hidden, (field, key) => {
-        return (vue.openBlock(), vue.createElementBlock("div", { key: key }, [
-          vue.renderSlot(_ctx.$slots, `field-${field.name}`, { field: field }, () => [
-            vue.createVNode(_component_qas_field, vue.mergeProps($props.fieldsProps[field.name], {
-              field: field,
-              "model-value": $props.modelValue[field.name],
-              "onUpdate:modelValue": $event => ($options.updateModelValue(field.name, $event))
-            }), null, 16 /* FULL_PROPS */, ["field", "model-value", "onUpdate:modelValue"])
+    return (vue.openBlock(), vue.createElementBlock("div", {
+      class: vue.normalizeClass($options.fieldsetClasses)
+    }, [
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.normalizedFields, (fieldsetItem, fieldsetItemKey) => {
+        return (vue.openBlock(), vue.createElementBlock("div", {
+          key: fieldsetItemKey,
+          class: "full-width"
+        }, [
+          (fieldsetItem.label)
+            ? vue.renderSlot(_ctx.$slots, `legend-${fieldsetItemKey}`, { key: 0 }, () => [
+                vue.createVNode(_component_qas_label, {
+                  label: fieldsetItem.label
+                }, null, 8 /* PROPS */, ["label"])
+              ])
+            : vue.createCommentVNode("v-if", true),
+          vue.createElementVNode("div", null, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(_ctx.mx_classes)
+            }, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(fieldsetItem.fields.visible, (field, key) => {
+                return (vue.openBlock(), vue.createElementBlock("div", {
+                  key: key,
+                  class: vue.normalizeClass(_ctx.mx_getFieldClass(key))
+                }, [
+                  vue.renderSlot(_ctx.$slots, `field-${field.name}`, { field: field }, () => [
+                    vue.createVNode(_component_qas_field, vue.mergeProps($props.fieldsProps[field.name], {
+                      error: $props.errors[key],
+                      field: field,
+                      "model-value": $props.modelValue[field.name],
+                      "onUpdate:modelValue": $event => ($options.updateModelValue(field.name, $event))
+                    }), null, 16 /* FULL_PROPS */, ["error", "field", "model-value", "onUpdate:modelValue"])
+                  ])
+                ], 2 /* CLASS */))
+              }), 128 /* KEYED_FRAGMENT */))
+            ], 2 /* CLASS */),
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(fieldsetItem.fields.hidden, (field, key) => {
+              return (vue.openBlock(), vue.createElementBlock("div", { key: key }, [
+                vue.renderSlot(_ctx.$slots, `field-${field.name}`, { field: field }, () => [
+                  vue.createVNode(_component_qas_field, vue.mergeProps($props.fieldsProps[field.name], {
+                    field: field,
+                    "model-value": $props.modelValue[field.name],
+                    "onUpdate:modelValue": $event => ($options.updateModelValue(field.name, $event))
+                  }), null, 16 /* FULL_PROPS */, ["field", "model-value", "onUpdate:modelValue"])
+                ])
+              ]))
+            }), 128 /* KEYED_FRAGMENT */))
           ])
         ]))
       }), 128 /* KEYED_FRAGMENT */))
-    ]))
+    ], 2 /* CLASS */))
   }
 
   script$l.render = render$l;
   script$l.__file = "src/components/form-generator/QasFormGenerator.vue";
 
-  var viewMixin = {
+  var searchFilterMixin = {
     props: {
-      dialog: {
+      entity: {
+        default: '',
+        type: String
+      },
+
+      lazyLoadingProps: {
+        default: () => ({}),
+        type: Object
+      },
+
+      name: {
+        default: '',
+        type: String
+      },
+
+      useLazyLoading: {
         type: Boolean
       },
 
+      fetching: {
+        type: Boolean
+      }
+    },
+
+    emits: [
+      'update:modelValue',
+      'update:fetching',
+      'fetch-options-success',
+      'fetch-options-error'
+    ],
+
+    data () {
+      return {
+        mx_filteredOptions: [],
+        mx_hasFetchError: false,
+        mx_isFetching: false,
+        mx_isScrolling: false,
+        mx_search: '',
+        mx_fetchCount: 0,
+        mx_pagination: {
+          page: 1,
+          lastPage: null,
+          hasCount: true,
+          hasNextPage: false
+        }
+      }
+    },
+
+    computed: {
+      mx_defaultLazyLoadingProps () {
+        const {
+          url,
+          params,
+          decamelizeFieldName
+        } = this.lazyLoadingProps;
+
+        const defaultParams = { limit: 48 };
+
+        return {
+          url: url || '',
+          params: {
+            ...defaultParams,
+            ...params
+          },
+          decamelizeFieldName: decamelizeFieldName === undefined ? true : decamelizeFieldName
+        }
+      },
+
+      mx_hasFilteredOptions () {
+        return !!this.mx_filteredOptions.length
+      },
+
+      mx_isFilterByFuse () {
+        return !this.useLazyLoading
+      }
+    },
+
+    watch: {
+      lazyLoadingProps: {
+        handler (value, oldValue) {
+          if (lodash.isEqual(value, oldValue)) return
+
+          this.mx_filterOptionsByStore('');
+          this.$emit('update:modelValue', '');
+        }
+      }
+    },
+
+    methods: {
+      async mx_filterOptionsByStore (search) {
+        this.mx_resetFilter(search);
+        await this.mx_setFetchOptions();
+      },
+
+      mx_resetFilter (search) {
+        this.mx_filteredOptions = [];
+        this.mx_search = search;
+        this.mx_pagination = {
+          page: 1,
+          lastPage: null,
+          hasCount: true,
+          hasNextPage: false
+        };
+      },
+
+      async mx_onVirtualScroll ({ index, ref }) {
+        const lastIndex = this.mx_filteredOptions.length - 1;
+
+        if (index === lastIndex && this.mx_canFetchOptions()) {
+          await this.mx_loadMoreOptions();
+
+          this.$nextTick(() => {
+            ref.reset();
+            ref.refresh(lastIndex);
+          });
+        }
+      },
+
+      async mx_loadMoreOptions () {
+        this.mx_isScrolling = true;
+
+        const options = await this.mx_fetchOptions();
+        this.mx_filteredOptions.push(...options);
+
+        // this is to prevent the virtual-scroll event to be fired again
+        this.$nextTick(() => {
+          this.mx_isScrolling = false;
+        });
+      },
+
+      async mx_fetchOptions () {
+        this.mx_fetchCount++;
+
+        try {
+          if (!this.entity) this.mx_setMissingPropsMessage('entity');
+          if (!this.name) this.mx_setMissingPropsMessage('name');
+
+          this.mx_hasFetchError = false;
+          this.mx_isFetching = true;
+
+          this.$emit('update:fetching', true);
+
+          const { url, params, decamelizeFieldName } = this.mx_defaultLazyLoadingProps;
+
+          const { data } = await this.$store.dispatch(`${this.entity}/fetchFieldOptions`, {
+            url,
+            field: decamelizeFieldName ? humps.decamelize(this.name, { separator: '-' }) : this.name,
+            params: {
+              ...params,
+              search: this.mx_search,
+              offset: (this.mx_pagination.page - 1) * params.limit
+            }
+          });
+
+          const { results, count, hasNextPage } = data;
+          const hasCount = count !== undefined;
+
+          this.mx_pagination = {
+            page: this.mx_pagination.page + 1,
+            lastPage: hasCount ? Math.ceil(count / params.limit) : null,
+            hasCount,
+            hasNextPage
+          };
+
+          this.$emit('fetch-options-success', data);
+
+          return this.mx_handleOptions(results)
+        } catch (error) {
+          this.$qas.logger.group(
+            `Mixin: searchFilterMixin - mx_fetchOptions -> exceção da action ${this.entity}/fetchFieldOptions`,
+            [error],
+            { error: true }
+          );
+
+          this.mx_hasFetchError = true;
+          this.$emit('fetch-options-error', error);
+
+          return []
+        } finally {
+          this.mx_isFetching = false;
+          this.$emit('update:fetching', false);
+        }
+      },
+
+      async mx_setFetchOptions () {
+        this.mx_filteredOptions = await this.mx_fetchOptions();
+      },
+
+      mx_canFetchOptions () {
+        const { lastPage, page, hasCount, hasNextPage } = this.mx_pagination;
+
+        const hasMorePages = hasCount ? lastPage && page <= lastPage : hasNextPage;
+
+        return hasMorePages && !this.mx_isFetching && !this.mx_isScrolling && this.useLazyLoading
+      },
+
+      mx_handleOptions (options) {
+        if (this.labelKey && this.valueKey) {
+          return getNormalizedOptions({
+            options,
+            label: this.labelKey,
+            value: this.valueKey
+          })
+        }
+
+        return options
+      },
+
+      mx_getMissingPropsMessage (prop) {
+        return `A propriedade "${prop}" é obrigatória quando a propriedade "useLazyLoading" está ativa.`
+      },
+
+      mx_setMissingPropsMessage (prop) {
+        throw new Error(this.mx_getMissingPropsMessage(prop))
+      },
+
+      mx_getNormalizedFuseResults (results = []) {
+        return results.map(({ item }) => item)
+      }
+    }
+  };
+
+  var viewMixin = {
+    props: {
       entity: {
         required: true,
         type: String
@@ -5183,6 +5705,16 @@
 
       fetching: {
         type: Boolean
+      },
+
+      useBoundary: {
+        default: true,
+        type: Boolean
+      },
+
+      beforeFetch: {
+        default: null,
+        type: Function
       }
     },
 
@@ -5198,7 +5730,7 @@
         mx_errors: {},
         mx_fields: {},
         mx_metadata: {},
-
+        mx_cancelBeforeFetch: false,
         mx_isFetching: false
       }
     },
@@ -5211,11 +5743,11 @@
 
     computed: {
       mx_componentTag () {
-        return this.dialog ? 'div' : 'q-page'
+        return this.useBoundary ? 'q-page' : 'div'
       },
 
       mx_componentClass () {
-        return !this.dialog && 'container spaced'
+        return this.useBoundary && 'container spaced'
       },
 
       mx_hasFooterSlot () {
@@ -5249,11 +5781,9 @@
       },
 
       mx_setFields (fields = {}) {
-        for (const field in fields) {
-          fields[field].name = humps.camelize(fields[field].name);
-        }
+        const camelizedFields = camelizeFieldsName(fields);
 
-        this.mx_fields = vue.markRaw(fields);
+        this.mx_fields = vue.markRaw(camelizedFields);
       },
 
       mx_setMetadata (metadata = {}) {
@@ -5266,6 +5796,22 @@
 
           this.$emit(`update:${key}`, models[key]);
         }
+      },
+
+      mx_fetchHandler (payload, resolve) {
+        const hasBeforeFetch = typeof this.beforeFetch === 'function';
+
+        if (hasBeforeFetch && !this.mx_cancelBeforeFetch) {
+          return this.beforeFetch({
+            payload,
+            resolve: payload => resolve(payload),
+            done: () => {
+              this.mx_cancelBeforeFetch = true;
+            }
+          })
+        }
+
+        resolve();
       }
     }
   };
@@ -5310,7 +5856,7 @@
         type: Object
       },
 
-      showDialogOnUnsavedChanges: {
+      useDialogOnUnsavedChanges: {
         default: true,
         type: Boolean
       },
@@ -5347,6 +5893,11 @@
       useSubmitButton: {
         default: true,
         type: Boolean
+      },
+
+      beforeSubmit: {
+        default: null,
+        type: Function
       }
     },
 
@@ -5363,7 +5914,6 @@
     data () {
       return {
         cachedResult: {},
-        hasResult: false,
         isSubmitting: false,
         showDialog: false,
         ignoreRouterGuard: false,
@@ -5420,25 +5970,17 @@
     },
 
     watch: {
-      mx_fields (fields) {
-        const models = { ...this.getModelsByFields(fields), ...this.modelValue };
-
-        this.$emit('update:modelValue', models);
-
-        if (!this.hasResult && this.showDialogOnUnsavedChanges) {
-          this.cachedResult = quasar.extend(true, {}, models);
-        }
-      },
-
       isSubmitting (value) {
         this.$emit('update:submitting', value);
       }
     },
 
     created () {
-      vueRouter.onBeforeRouteLeave(this.beforeRouteLeave);
+      this.useDialogOnUnsavedChanges && vueRouter.onBeforeRouteLeave(this.beforeRouteLeave);
+
       window.addEventListener('delete-success', this.setIgnoreRouterGuard);
-      this.fetch();
+
+      this.mx_fetchHandler({ form: true, id: this.id, url: this.fetchURL }, this.fetchSingle);
     },
 
     onUnmounted () {
@@ -5451,13 +5993,13 @@
         const clonedCachedResult = quasar.extend(true, {}, this.cachedResult);
 
         /**
-         * Se a propriedade "showDialogOnUnsavedChanges" for false ou a variável
+         * Se a propriedade "useDialogOnUnsavedChanges" for false ou a variável
          * "ignoreRouterGuard" for true, então **não** iremos checar se o usuário
          * alterou algum campo antes de sair da pagina, senão iremos validar pela função isEqualWith
          * e mostrar um dialog antes do usuário sair da página.
         */
         if (
-          !this.showDialogOnUnsavedChanges ||
+          !this.useDialogOnUnsavedChanges ||
           this.ignoreRouterGuard ||
           lodashEs.isEqualWith(
             clonedModelValue,
@@ -5468,6 +6010,11 @@
           return next()
         }
 
+        this.$qas.logger.group(
+          'QasFormView - beforeRouteLeave -> dialog chamado, modelValue diferente do cachedResult',
+          [{ modelValue: clonedModelValue, cachedResult: clonedCachedResult }]
+        );
+
         this.handleDialog(() => {
           this.ignoreRouterGuard = true;
           next();
@@ -5475,45 +6022,64 @@
       },
 
       cancel () {
-        if (!this.dialog) {
-          this.handleCancelRoute();
-        }
+        this.handleCancelRoute();
       },
 
-      async fetch (params) {
+      async fetchSingle (externalPayload = {}) {
         this.mx_isFetching = true;
 
         try {
-          const response = await this.$store.dispatch(
-            `${this.entity}/fetchSingle`, { form: true, id: this.id, params, url: this.fetchURL }
+          const payload = {
+            form: true,
+            id: this.id,
+            url: this.fetchURL,
+            ...externalPayload
+          };
+
+          this.$qas.logger.group(
+            `QasFormView - fetchSingle -> payload do parâmetro do ${this.entity}/fetchSingle`, [payload]
           );
 
+          const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, payload);
+
           const { errors, fields, metadata, result } = response.data;
 
+          const modelValue = { ...this.getModelsByFields(fields), ...this.modelValue };
+
           this.mx_setErrors(errors);
           this.mx_setFields(fields);
           this.mx_setMetadata(metadata);
 
           this.mx_updateModels({
-            errors: errors,
+            errors,
             fields: this.mx_fields,
             metadata
           });
 
-          if (result) {
-            this.hasResult = true;
+          result && Object.assign(modelValue, result);
 
-            this.$nextTick(() => {
-              this.$emit('update:modelValue', { ...this.modelValue, ...result });
-            });
+          this.$qas.logger.group(
+            `QasFormView - fetchSingle -> resposta da action ${this.entity}/fetchSingle`, [response]
+          );
 
-            this.cachedResult = this.showDialogOnUnsavedChanges && quasar.extend(true, {}, result);
+          if (this.useDialogOnUnsavedChanges) {
+            this.cachedResult = quasar.extend(true, {}, result || modelValue);
+            this.$qas.logger.group('QasFormView - fetchSingle -> cachedResult', [this.cachedResult]);
           }
 
+          this.$emit('update:modelValue', modelValue);
           this.$emit('fetch-success', response, this.modelValue);
+
+          this.$qas.logger.group('QasFormView - fetchSingle -> modelValue', [modelValue]);
         } catch (error) {
           this.mx_fetchError(error);
           this.$emit('fetch-error', error);
+
+          this.$qas.logger.group(
+            `QasFormView - fetchSingle -> exceção da action ${this.entity}/fetchSingle`,
+            [error],
+            { error: true }
+          );
         } finally {
           this.mx_isFetching = false;
         }
@@ -5550,6 +6116,7 @@
         const { addRoute } = useHistory();
 
         this.defaultDialogProps.ok.onClick = () => addRoute(this.$route);
+
         this.defaultDialogProps.cancel.onClick = next;
       },
 
@@ -5569,33 +6136,66 @@
         });
       },
 
-      async submit (event) {
-        if (this.disable) return null
-
+      /**
+       * Se existe a propriedade com callback "beforeSubmit", então o controle de quando e como chamar o método "submit"
+       * está sendo controlado fora do QasFormView, se não existir a propriedade "beforeSubmit", então o controle do método
+       * submit é feito pelo próprio QasFormView, chamado pelo evento @submit.
+      */
+      submitHandler (event) {
         if (event) {
           event.preventDefault();
         }
 
+        const hasBeforeSubmit = typeof this.beforeSubmit === 'function';
+
+        if (hasBeforeSubmit) {
+          return this.beforeSubmit({
+            payload: { id: this.id, payload: this.modelValue, url: this.url },
+            resolve: payload => this.submit(payload)
+          })
+        }
+
+        this.submit();
+      },
+
+      async submit (externalPayload = {}) {
+        if (this.disable) return null
+
         this.isSubmitting = true;
 
         try {
-          const response = await this.$store.dispatch(
-            `${this.entity}/${this.mode}`,
-            { id: this.id, payload: this.modelValue, url: this.url }
+          const payload = {
+            id: this.id,
+            payload: this.modelValue,
+            url: this.url,
+            ...externalPayload
+          };
+
+          this.$qas.logger.group(
+            `QasFormView - submit -> payload do ${this.entity}/${this.mode}`, [payload]
           );
 
-          if (this.showDialogOnUnsavedChanges) {
+          const response = await this.$store.dispatch(`${this.entity}/${this.mode}`, payload);
+
+          if (this.useDialogOnUnsavedChanges) {
             this.cachedResult = quasar.extend(true, {}, this.modelValue);
           }
 
           this.mx_setErrors();
           NotifySuccess(response.data.status.text || 'Item salvo com sucesso!');
           this.$emit('submit-success', response, this.modelValue);
+
+          this.$qas.logger.group(
+            `QasFormView - submit -> resposta da action ${this.entity}/${this.mode}`, [response]
+          );
         } catch (error) {
           const errors = error?.response?.data?.errors;
           const message = error?.response?.data?.status?.text;
           const exceptionResponse = error?.response?.data?.exception;
-          const exception = errors ? 'Existem erros de validação no formulário.' : exceptionResponse || error.message;
+
+          const exception = errors
+            ? 'Existem erros de validação no formulário.'
+            : exceptionResponse || error.message;
 
           this.mx_setErrors(errors);
           this.$emit('update:errors', this.mx_errors);
@@ -5603,6 +6203,12 @@
           NotifyError(message || 'Ops! Erro ao salvar item.', exception);
 
           this.$emit('submit-error', error);
+
+          this.$qas.logger.group(
+            `QasFormView - submit -> exceção da action ${this.entity}/${this.mode}`,
+            [error],
+            { error: true }
+          );
         } finally {
           this.isSubmitting = false;
         }
@@ -5614,7 +6220,7 @@
     }
   };
 
-  const _hoisted_1$d = { key: 0 };
+  const _hoisted_1$e = { key: 0 };
   const _hoisted_2$9 = { class: "justify-end q-col-gutter-md q-my-lg row" };
   const _hoisted_3$6 = { key: 1 };
 
@@ -5631,13 +6237,13 @@
     }, {
       default: vue.withCtx(() => [
         (_ctx.mx_hasHeaderSlot)
-          ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_1$d, [
+          ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_1$e, [
               vue.renderSlot(_ctx.$slots, "header")
             ]))
           : vue.createCommentVNode("v-if", true),
         vue.createVNode(_component_q_form, {
           ref: "form",
-          onSubmit: $options.submit
+          onSubmit: $options.submitHandler
         }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "default"),
@@ -5658,7 +6264,7 @@
                             type: "button",
                             onClick: $options.cancel
                           }, null, 8 /* PROPS */, ["data-cy", "disable", "label", "onClick"]), [
-                            [_directive_close_popup, _ctx.dialog]
+                            [_directive_close_popup]
                           ])
                         ], 2 /* CLASS */))
                       : vue.createCommentVNode("v-if", true),
@@ -5828,7 +6434,7 @@
     }
   };
 
-  const _hoisted_1$c = { class: "q-col-gutter-md row" };
+  const _hoisted_1$d = { class: "q-col-gutter-md row" };
   const _hoisted_2$8 = {
     key: 0,
     class: "full-width text-center"
@@ -5850,7 +6456,7 @@
 
     return (vue.openBlock(), vue.createBlock(_component_qas_box, { class: "gallery" }, {
       default: vue.withCtx(() => [
-        vue.createElementVNode("div", _hoisted_1$c, [
+        vue.createElementVNode("div", _hoisted_1$d, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.initialImages(), (image, index) => {
             return (vue.openBlock(), vue.createElementBlock("div", {
               key: index,
@@ -5972,10 +6578,6 @@
         type: [Array, Object, String]
       },
 
-      hideEmptyResult: {
-        type: Boolean
-      },
-
       emptyResultText: {
         default: '-',
         type: String
@@ -5984,6 +6586,11 @@
       result: {
         default: () => ({}),
         type: Object
+      },
+
+      useEmptyResult: {
+        default: true,
+        type: Boolean
       }
     },
 
@@ -5995,7 +6602,12 @@
 
     computed: {
       formattedFields () {
-        if (!this.hideEmptyResult) {
+        if (this.useEmptyResult) {
+          this.$qas.logger.group(
+            'QasGridGenerator - formattedFields -> this.useEmptyResult tem valor "true"',
+            [this.fields]
+          );
+
           return this.fields
         }
 
@@ -6013,6 +6625,8 @@
           }
         }
 
+        this.$qas.logger.group('QasGridGenerator - formattedFields', [fields]);
+
         return fields
       },
 
@@ -6028,11 +6642,19 @@
 
         for (const key in result) {
           if (this.formattedFields[key]?.type) {
-            formattedResult[key] = humanize(this.formattedFields[key], result[key]) || this.emptyResultText;
-            this.slotValue[key] = { ...this.formattedFields[key], formattedResult: formattedResult[key] };
+            formattedResult[key] = (
+              humanize(this.formattedFields[key], result[key]) || this.emptyResultText
+            );
+
+            this.slotValue[key] = {
+              ...this.formattedFields[key],
+              formattedResult: formattedResult[key]
+            };
           }
         }
 
+        this.$qas.logger.group('QasGridGenerator - getResultsByFields', [formattedResult]);
+
         return formattedResult
       }
     }
@@ -6168,6 +6790,10 @@
       }
     },
 
+    mounted () {
+      this.menuDrawer = !this.$qas.screen.untilMedium;
+    },
+
     methods: {
       toggleMenuDrawer () {
         this.menuDrawer = !this.menuDrawer;
@@ -6228,42 +6854,34 @@
         type: Array
       },
 
-      redirectKey: {
-        default: 'uuid',
-        type: String
-      },
-
-      redirectOnIcon: {
-        default: true,
+      useClickableItem: {
         type: Boolean
       },
 
-      to: {
-        default: () => ({}),
-        type: Object
-      },
-
       useSectionActions: {
         default: true,
         type: Boolean
       }
     },
 
+    emits: ['click-item'],
+
     methods: {
-      getRedirectPayload (item) {
-        return {
-          params: { [this.redirectKey]: item[this.redirectKey] },
-          ...this.to
-        }
-      },
+      onClick ({ item, index }, fromItem) {
+        /**
+         * se o click veio do q-item e "useClickableItem" for "false", ou
+         * se o click não veio do q-item e "useClickableItem" for "true", então retorna sem emitir.
+         */
+        if (
+          (fromItem && !this.useClickableItem) || (!fromItem && this.useClickableItem)
+        ) return
 
-      redirect (item) {
-        return this.redirectOnIcon ? undefined : this.getRedirectPayload(item)
+        this.$emit('click-item', { item, index });
       }
     }
   };
 
-  const _hoisted_1$b = { class: "qas-list-items shadow-14" };
+  const _hoisted_1$c = { class: "qas-list-items shadow-14" };
 
   function render$f(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_q_item_section = vue.resolveComponent("q-item-section");
@@ -6273,7 +6891,7 @@
     const _component_q_list = vue.resolveComponent("q-list");
     const _directive_ripple = vue.resolveDirective("ripple");
 
-    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
       vue.createVNode(_component_q_list, {
         bordered: "",
         class: "rounded-borders",
@@ -6283,8 +6901,8 @@
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.list, (item, index) => {
             return vue.withDirectives((vue.openBlock(), vue.createBlock(_component_q_item, {
               key: index,
-              clickable: !$props.redirectOnIcon,
-              to: $options.redirect(item)
+              clickable: $props.useClickableItem,
+              onClick: $event => ($options.onClick({ item, index }, true))
             }, {
               default: vue.withCtx(() => [
                 vue.renderSlot(_ctx.$slots, "item", {
@@ -6293,7 +6911,7 @@
                 }, () => [
                   vue.createVNode(_component_q_item_section, null, {
                     default: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "item-section-left", {
+                      vue.renderSlot(_ctx.$slots, "item-section", {
                         index: index,
                         item: item
                       })
@@ -6313,13 +6931,13 @@
                             vue.createVNode(_component_qas_btn, {
                               flat: "",
                               round: "",
-                              to: $options.getRedirectPayload(item)
+                              onClick: $event => ($options.onClick({ item, index }))
                             }, {
                               default: vue.withCtx(() => [
                                 vue.createVNode(_component_q_icon, vue.normalizeProps(vue.guardReactiveProps($props.iconProps)), null, 16 /* FULL_PROPS */)
                               ]),
                               _: 2 /* DYNAMIC */
-                            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["to"])
+                            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"])
                           ])
                         ]),
                         _: 2 /* DYNAMIC */
@@ -6328,7 +6946,7 @@
                 ])
               ]),
               _: 2 /* DYNAMIC */
-            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["clickable", "to"])), [
+            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["clickable", "onClick"])), [
               [_directive_ripple]
             ])
           }), 128 /* KEYED_FRAGMENT */))
@@ -6349,15 +6967,6 @@
     mixins: [contextMixin, viewMixin],
 
     props: {
-      disableRefresh: {
-        type: Boolean
-      },
-
-      useFilter: {
-        default: true,
-        type: Boolean
-      },
-
       filtersProps: {
         default: () => ({}),
         type: Object
@@ -6366,6 +6975,20 @@
       results: {
         default: () => [],
         type: Array
+      },
+
+      useRefresh: {
+        default: true,
+        type: Boolean
+      },
+
+      useFilter: {
+        default: true,
+        type: Boolean
+      },
+
+      useResultsAreaOnly: {
+        type: Boolean
       }
     },
 
@@ -6401,13 +7024,17 @@
 
       totalPages () {
         return this.$store.getters[`${this.entity}/totalPages`]
+      },
+
+      showResults () {
+        return this.hasResults || this.useResultsAreaOnly
       }
     },
 
     watch: {
       $route (to, from) {
         if (to.name === from.name) {
-          this.fetchList();
+          this.mx_fetchHandler({ ...this.mx_context, url: this.url }, this.fetchList);
           this.setCurrentPage();
         }
       },
@@ -6422,7 +7049,8 @@
     },
 
     created () {
-      this.fetchList();
+      this.mx_fetchHandler({ ...this.mx_context, url: this.url }, this.fetchList);
+
       this.setCurrentPage();
     },
 
@@ -6432,21 +7060,22 @@
         this.$router.push({ query });
       },
 
-      async fetchList (filters = {}) {
+      async fetchList (externalPayload = {}) {
         this.mx_isFetching = true;
 
-        const hasFilters = !!Object.keys(filters).length;
-
         try {
-          const response = await this.$store.dispatch(
-            `${this.entity}/fetchList`,
-            {
-              ...this.mx_context,
-              url: this.url,
-              ...(hasFilters && { filters })
-            }
+          const payload = {
+            ...this.mx_context,
+            url: this.url,
+            ...externalPayload
+          };
+
+          this.$qas.logger.group(
+            `QasListView - fetchList -> Payload do parâmetro do ${this.entity}/fetchList`, [payload]
           );
 
+          const response = await this.$store.dispatch(`${this.entity}/fetchList`, payload);
+
           const { errors, fields, metadata } = response.data;
 
           this.mx_setErrors(errors);
@@ -6460,17 +7089,27 @@
           });
 
           this.$emit('fetch-success', response);
+
+          this.$qas.logger.group(
+            `QasListView - fetchList -> resposta da action ${this.entity}/fetchList`, [response]
+          );
         } catch (error) {
           this.mx_fetchError(error);
           this.$emit('update:errors', error);
           this.$emit('fetch-error', error);
+
+          this.$qas.logger.group(
+            `QasListView - fetchSingle -> exceção da action ${this.entity}/fetchList`,
+            [error],
+            { error: true }
+          );
         } finally {
           this.mx_isFetching = false;
         }
       },
 
       async refresh (done) {
-        await this.fetchList();
+        await this.mx_fetchHandler({ ...this.mx_context, url: this.url }, this.fetchList);
 
         if (typeof done === 'function') {
           done();
@@ -6483,7 +7122,7 @@
     }
   };
 
-  const _hoisted_1$a = { key: 0 };
+  const _hoisted_1$b = { key: 0 };
   const _hoisted_2$7 = { class: "relative-position" };
   const _hoisted_3$4 = { key: 0 };
   const _hoisted_4$4 = { key: 1 };
@@ -6511,12 +7150,12 @@
     }, {
       default: vue.withCtx(() => [
         vue.createVNode(_component_q_pull_to_refresh, {
-          disable: $props.disableRefresh,
+          disable: !$props.useRefresh,
           onRefresh: $options.refresh
         }, {
           default: vue.withCtx(() => [
             ($options.hasHeaderSlot)
-              ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_1$a, [
+              ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_1$b, [
                   vue.renderSlot(_ctx.$slots, "header")
                 ]))
               : vue.createCommentVNode("v-if", true),
@@ -6526,7 +7165,7 @@
                 ])
               : vue.createCommentVNode("v-if", true),
             vue.createElementVNode("main", _hoisted_2$7, [
-              ($options.hasResults)
+              ($options.showResults)
                 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, [
                     vue.renderSlot(_ctx.$slots, "default")
                   ]))
@@ -6603,13 +7242,13 @@
         default: () => []
       },
 
-      usePopup: {
-        type: Boolean
-      },
-
       zoom: {
         type: Number,
         default: 17
+      },
+
+      usePopup: {
+        type: Boolean
       }
     },
 
@@ -6643,7 +7282,7 @@
     }
   };
 
-  const _hoisted_1$9 = { class: "qas-map" };
+  const _hoisted_1$a = { class: "qas-map" };
   const _hoisted_2$6 = { class: "text-weight-bold" };
 
   function render$d(_ctx, _cache, $props, $setup, $data, $options) {
@@ -6651,7 +7290,7 @@
     const _component_g_map_marker = vue.resolveComponent("g-map-marker");
     const _component_g_map_map = vue.resolveComponent("g-map-map");
 
-    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
       vue.createVNode(_component_g_map_map, {
         center: $props.centerPosition,
         class: "qas-map__draw",
@@ -6710,7 +7349,7 @@
         default: 'Inserir novo campo'
       },
 
-      btnDestroyProps: {
+      buttonDestroyProps: {
         type: Object,
         default: () => {
           return {
@@ -6722,14 +7361,14 @@
         }
       },
 
-      btnDuplicateProps: {
+      buttonDuplicateProps: {
         type: Object,
         default: () => {
           return {
             label: 'Duplicar',
             icon: 'o_content_copy',
             flat: true,
-            hideMobileLabel: true,
+            useLabelOnSmallScreen: false,
             dense: true
           }
         }
@@ -6774,6 +7413,11 @@
         }
       },
 
+      identifierItemKey: {
+        type: String,
+        default: 'uuid'
+      },
+
       rowLabel: {
         type: String,
         default: ''
@@ -6839,13 +7483,7 @@
       },
 
       children () {
-        const field = quasar.extend(true, {}, this.field);
-
-        for (const key in field?.children) {
-          field.children[key].name = humps.camelize(field?.children[key].name);
-        }
-
-        return field?.children
+        return this.field?.children
       },
 
       showDestroyBtn () {
@@ -6872,8 +7510,7 @@
 
         return {
           tag: 'div',
-          enterActiveClass: 'animated slideInDown',
-          leaveActiveClass: 'animated slideOutUp'
+          enterActiveClass: 'animated slideInDown'
         }
       }
     },
@@ -6886,9 +7523,9 @@
         immediate: true
       },
 
-      field: {
+      rowObject: {
         handler () {
-          !this.modelValue.length && this.setDefaultNestedValue();
+          if (!this.nested.length) return this.setDefaultNestedValue()
         },
         immediate: true
       }
@@ -6896,13 +7533,22 @@
 
     methods: {
       add (row = {}) {
-        this.nested.push({ ...this.rowObject, ...row });
+        const payload = { ...this.rowObject, ...row };
+        const hasIdentifierKey = payload[this.identifierItemKey];
+
+        if (hasIdentifierKey) {
+          delete payload[this.identifierItemKey];
+        }
+
+        this.nested.push(payload);
 
         this.$nextTick(() => {
           this.useAnimation && this.setScroll();
           this.setFocus();
         });
 
+        this.$qas.logger.group('QasNestedFields - add', [payload]);
+
         return this.updateModelValue()
       },
 
@@ -6918,10 +7564,12 @@
       },
 
       destroy (index, row) {
-        this.useRemoveOnDestroy
+        !row[this.identifierItemKey] && this.useRemoveOnDestroy
           ? this.nested.splice(index, 1)
           : this.nested.splice(index, 1, { [this.destroyKey]: true, ...row });
 
+        this.$qas.logger.group('QasNestedFields - destroy', [{ index, row }]);
+
         return this.updateModelValue()
       },
 
@@ -6947,7 +7595,7 @@
         });
       },
 
-      setRowLabel (rowKey) {
+      getRowLabel (rowKey) {
         if (this.rowLabel) {
           return this.useIndexLabel ? `${this.rowLabel} ${rowKey + 1}` : this.rowLabel
         }
@@ -6957,7 +7605,7 @@
     }
   };
 
-  const _hoisted_1$8 = ["id"];
+  const _hoisted_1$9 = ["id"];
   const _hoisted_2$5 = { class: "text-left" };
   const _hoisted_3$3 = { ref: "inputContent" };
   const _hoisted_4$3 = ["id"];
@@ -7018,18 +7666,18 @@
                           (!$props.useSingleLabel)
                             ? (vue.openBlock(), vue.createBlock(_component_qas_label, {
                                 key: 0,
-                                label: $options.setRowLabel(index)
+                                label: $options.getRowLabel(index)
                               }, null, 8 /* PROPS */, ["label"]))
                             : vue.createCommentVNode("v-if", true),
                           (!$props.useInlineActions)
                             ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
                                 ($props.useDuplicate)
-                                  ? (vue.openBlock(), vue.createBlock(_component_qas_btn, vue.mergeProps({ key: 0 }, $props.btnDuplicateProps, {
+                                  ? (vue.openBlock(), vue.createBlock(_component_qas_btn, vue.mergeProps({ key: 0 }, $props.buttonDuplicateProps, {
                                       onClick: $event => ($options.add(row))
                                     }), null, 16 /* FULL_PROPS */, ["onClick"]))
                                   : vue.createCommentVNode("v-if", true),
                                 ($options.showDestroyBtn)
-                                  ? (vue.openBlock(), vue.createBlock(_component_qas_btn, vue.mergeProps({ key: 1 }, $props.btnDestroyProps, {
+                                  ? (vue.openBlock(), vue.createBlock(_component_qas_btn, vue.mergeProps({ key: 1 }, $props.buttonDestroyProps, {
                                       onClick: $event => ($options.destroy(index, row))
                                     }), null, 16 /* FULL_PROPS */, ["onClick"]))
                                   : vue.createCommentVNode("v-if", true)
@@ -7156,7 +7804,7 @@
           ])
         ])
       ], 512 /* NEED_PATCH */)
-    ], 8 /* PROPS */, _hoisted_1$8))
+    ], 8 /* PROPS */, _hoisted_1$9))
   }
 
   script$c.render = render$c;
@@ -7167,17 +7815,20 @@
   var script$b = {
     name: 'QasPageHeader',
 
+    mixins: [
+      quasar.createMetaMixin(function () {
+        return {
+          title: this.title
+        }
+      })
+    ],
+
     props: {
       breadcrumbs: {
         default: '',
         type: [Array, String]
       },
 
-      useBreadcrumbs: {
-        default: true,
-        type: Boolean
-      },
-
       root: {
         default: '',
         type: [Object, String]
@@ -7186,6 +7837,11 @@
       title: {
         default: '',
         type: String
+      },
+
+      useBreadcrumbs: {
+        default: true,
+        type: Boolean
       }
     },
 
@@ -7229,16 +7885,10 @@
 
         return lastIndex === index ? 'text-grey-7' : 'text-primary'
       }
-    },
-
-    meta () {
-      return {
-        title: this.title
-      }
     }
   };
 
-  const _hoisted_1$7 = { class: "ellipsis" };
+  const _hoisted_1$8 = { class: "ellipsis" };
 
   function render$b(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_q_icon = vue.resolveComponent("q-icon");
@@ -7249,7 +7899,7 @@
 
     return (vue.openBlock(), vue.createBlock(_component_q_toolbar, { class: "justify-between q-mb-lg q-px-none" }, {
       default: vue.withCtx(() => [
-        vue.createElementVNode("div", _hoisted_1$7, [
+        vue.createElementVNode("div", _hoisted_1$8, [
           ($props.title)
             ? (vue.openBlock(), vue.createBlock(_component_q_toolbar_title, {
                 key: 0,
@@ -7365,7 +8015,7 @@
     }
   };
 
-  const _hoisted_1$6 = { class: "q-col-gutter-md row" };
+  const _hoisted_1$7 = { class: "q-col-gutter-md row" };
   const _hoisted_2$4 = { class: "col-lg-5 col-xs-12" };
   const _hoisted_3$2 = { class: "justify-center lg:q-mb-none md:q-mr-lg row xs:q-mb-md" };
   const _hoisted_4$2 = { class: "text-bold text-h6" };
@@ -7377,7 +8027,7 @@
 
     return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), null, {
       default: vue.withCtx(() => [
-        vue.createElementVNode("div", _hoisted_1$6, [
+        vue.createElementVNode("div", _hoisted_1$7, [
           vue.createElementVNode("div", _hoisted_2$4, [
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["no-wrap q-col-gutter-md", $options.directionClasses])
@@ -7402,8 +8052,8 @@
               class: "col-lg-7 col-xs-12 items-center",
               columns: $props.columns,
               fields: $options.filterObject($props.fields, $props.list),
-              "hide-empty-result": "",
-              result: $props.result
+              result: $props.result,
+              "use-empty-result": false
             }, vue.createSlots({ _: 2 /* DYNAMIC */ }, [
               vue.renderList(_ctx.$slots, (_, name) => {
                 return {
@@ -7503,7 +8153,7 @@
     }
   };
 
-  const _hoisted_1$5 = /*#__PURE__*/vue.createElementVNode("div", { class: "absolute-full bg-grey-2 flex flex-center text-grey" }, "⚠︎", -1 /* HOISTED */);
+  const _hoisted_1$6 = /*#__PURE__*/vue.createElementVNode("div", { class: "absolute-full bg-grey-2 flex flex-center text-grey" }, "⚠︎", -1 /* HOISTED */);
 
   function render$9(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_q_img = vue.resolveComponent("q-img");
@@ -7514,7 +8164,7 @@
       src: $options.imageSource
     }, {
       error: vue.withCtx(() => [
-        _hoisted_1$5
+        _hoisted_1$6
       ]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["ratio", "src"]))
@@ -7527,15 +8177,23 @@
     name: 'QasSearchBox',
 
     components: {
-      QasBox: script$D
+      QasBox: script$D,
+      QInfiniteScroll: quasar.QInfiniteScroll
     },
 
+    mixins: [searchFilterMixin],
+
     props: {
       emptyListHeight: {
         default: '100px',
         type: String
       },
 
+      emptyResultText: {
+        default: 'Não há resultados disponíveis.',
+        type: String
+      },
+
       fuseOptions: {
         default: () => ({}),
         type: Object
@@ -7580,15 +8238,52 @@
 
     data () {
       return {
-        fuse: null,
-        searchResults: this.list,
-        search: ''
+        fuse: null
       }
     },
 
     computed: {
-      contentStyle () {
-        return { height: this.list.length ? this.height : this.emptyListHeight }
+      attributes () {
+        return {
+          clearable: true,
+          disable: this.isDisabled,
+          debounce: this.useLazyLoading ? 500 : 0,
+          outlined: true,
+          placeholder: this.placeholder,
+          hideBottomSpace: true,
+          error: this.mx_hasFetchError,
+          loading: this.mx_isFetching
+        }
+      },
+
+      containerStyle () {
+        return { height: this.containerHeight }
+      },
+
+      hasNoOptionsOnFirstFetch () {
+        return this.mx_fetchCount === 1 && !this.mx_hasFilteredOptions
+      },
+
+      containerHeight () {
+        const hasEmptyList = (!this.list.length && !this.useLazyLoading) || this.hasNoOptionsOnFirstFetch;
+
+        return hasEmptyList ? this.emptyListHeight : this.height
+      },
+
+      component () {
+        const infiniteScrollProps = {
+          offset: 100,
+          scrollTarget: this.$refs.scrollContainer,
+          ref: 'infiniteScrollRef'
+        };
+
+        return {
+          is: this.useLazyLoading ? 'q-infinite-scroll' : 'div',
+          props: {
+            ...(this.useLazyLoading && infiniteScrollProps),
+            ...(this.useLazyLoading && { onLoad: this.onInfiniteScroll })
+          }
+        }
       },
 
       defaultFuseOptions () {
@@ -7600,85 +8295,127 @@
         }
       },
 
-      hasResults () {
-        return !!this.searchResults.length
+      isDisabled () {
+        return (!this.useLazyLoading && !this.list.length) || this.mx_isFetching || this.hasNoOptionsOnFirstFetch
+      },
+
+      showEmptyResult () {
+        return this.useEmptySlot && !this.mx_hasFilteredOptions && !this.mx_isFetching
+      },
+
+      showSpinnerDots () {
+        return this.mx_hasFilteredOptions && this.mx_isFetching
+      },
+
+      showInnerLoading () {
+        return !this.mx_hasFilteredOptions && this.mx_isFetching
       }
     },
 
     watch: {
       defaultFuseOptions (value) {
+        if (this.useLazyLoading) return
+
         this.fuse.options = { ...this.fuse.options, ...value };
       },
 
-      hasResults (value) {
+      mx_hasFilteredOptions (value) {
         !value && this.$emit('empty-result');
       },
 
-      list: {
-        handler (value) {
-          this.fuse = new Fuse__default["default"](value, this.defaultFuseOptions);
+      mx_search: {
+        async handler (value) {
+          this.$emit('update:modelValue', value);
 
-          this.setResults(this.search);
-          this.updateResultsModel(value);
-        },
+          if (this.useLazyLoading) {
+            await this.mx_filterOptionsByStore(value);
+
+            this.$refs.infiniteScrollRef.resume();
+            this.$refs.search.focus();
+
+            return
+          }
 
-        deep: true
+          this.filterOptionsByFuse(value);
+        }
       },
 
-      search: {
+      modelValue: {
         handler (value) {
-          this.setResults(value);
-          this.$emit('update:modelValue', value);
+          this.mx_search = value;
         },
 
         immediate: true
       },
 
-      searchResults: {
-        handler (value) {
-          this.updateResultsModel(value);
+      mx_filteredOptions: {
+        handler (options) {
+          this.$emit('update:results', options);
         },
+
         immediate: true
       }
     },
 
     created () {
-      this.search = this.modelValue;
+      if (this.useLazyLoading) return
+
+      this.mx_filteredOptions = this.list;
       this.fuse = new Fuse__default["default"](this.list, this.defaultFuseOptions);
-      this.setResults();
+
+      this.setListWatcher();
     },
 
     methods: {
-      setResults (value) {
-        this.searchResults = value
-          ? this.fuse.search(value)
-          : this.list;
+      filterOptionsByFuse (value) {
+        this.mx_filteredOptions = value ? this.mx_getNormalizedFuseResults(this.fuse.search(value)) : this.list;
+      },
+
+      async onInfiniteScroll (_, done) {
+        // Se tiver erro no primeiro fetch, retorna o "done" na proxima.
+        if (((this.mx_hasFetchError && !this.mx_hasFilteredOptions) || this.hasNoOptionsOnFirstFetch)) return done()
+
+        if (!this.mx_hasFilteredOptions && !this.mx_search) {
+          await this.mx_setFetchOptions();
+          return done()
+        }
+
+        if (this.mx_canFetchOptions()) {
+          await this.mx_loadMoreOptions();
+          return done()
+        }
+
+        done(true);
       },
 
-      updateResultsModel (value) {
-        this.$emit('update:results', value.map(result => result.item || result));
+      setListWatcher () {
+        this.$watch('list', value => {
+          this.fuse = new Fuse__default["default"](value, this.defaultFuseOptions);
+
+          this.filterOptionsByFuse(this.mx_search);
+        }, { deep: true });
       }
     }
   };
 
-  const _hoisted_1$4 = { class: "absolute-center text-center" };
-  const _hoisted_2$3 = /*#__PURE__*/vue.createElementVNode("div", null, "Não há resultados disponíveis.", -1 /* HOISTED */);
+  const _hoisted_1$5 = { class: "flex justify-center q-pb-sm" };
+  const _hoisted_2$3 = { class: "absolute-center text-center" };
 
   function render$8(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_q_icon = vue.resolveComponent("q-icon");
-    const _component_q_input = vue.resolveComponent("q-input");
+    const _component_qas_input = vue.resolveComponent("qas-input");
+    const _component_q_spinner_dots = vue.resolveComponent("q-spinner-dots");
+    const _component_q_spinner = vue.resolveComponent("q-spinner");
+    const _component_q_inner_loading = vue.resolveComponent("q-inner-loading");
     const _component_qas_box = vue.resolveComponent("qas-box");
 
     return (vue.openBlock(), vue.createBlock(_component_qas_box, null, {
       default: vue.withCtx(() => [
-        vue.createVNode(_component_q_input, {
-          modelValue: $data.search,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($data.search) = $event)),
-          clearable: "",
-          disable: !$props.list.length,
-          outlined: "",
-          placeholder: $props.placeholder
-        }, {
+        vue.createVNode(_component_qas_input, vue.mergeProps($options.attributes, {
+          ref: "search",
+          modelValue: _ctx.mx_search,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.mx_search) = $event))
+        }), {
           append: vue.withCtx(() => [
             vue.createVNode(_component_q_icon, {
               color: "primary",
@@ -7686,26 +8423,52 @@
             })
           ]),
           _: 1 /* STABLE */
-        }, 8 /* PROPS */, ["modelValue", "disable", "placeholder"]),
+        }, 16 /* FULL_PROPS */, ["modelValue"]),
         vue.createElementVNode("div", {
+          ref: "scrollContainer",
           class: "overflow-auto q-mt-xs relative-position",
-          style: vue.normalizeStyle($options.contentStyle)
+          style: vue.normalizeStyle($options.containerStyle)
         }, [
-          ($options.hasResults)
-            ? vue.renderSlot(_ctx.$slots, "default", { key: 0 })
-            : ($props.useEmptySlot)
-              ? vue.renderSlot(_ctx.$slots, "empty-result", { key: 1 }, () => [
-                  vue.createElementVNode("div", _hoisted_1$4, [
-                    vue.createVNode(_component_q_icon, {
-                      class: "q-mb-sm text-center",
-                      color: "primary",
-                      name: "o_search",
-                      size: "38px"
-                    }),
-                    _hoisted_2$3
-                  ])
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.component.is), vue.normalizeProps(vue.guardReactiveProps($options.component.props)), {
+            default: vue.withCtx(() => [
+              (_ctx.mx_hasFilteredOptions)
+                ? vue.renderSlot(_ctx.$slots, "default", { key: 0 })
+                : vue.createCommentVNode("v-if", true)
+            ]),
+            _: 3 /* FORWARDED */
+          }, 16 /* FULL_PROPS */)),
+          ($options.showSpinnerDots)
+            ? vue.renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
+                vue.createElementVNode("div", _hoisted_1$5, [
+                  vue.createVNode(_component_q_spinner_dots, {
+                    color: "primary",
+                    size: "20px"
+                  })
                 ])
-              : vue.createCommentVNode("v-if", true)
+              ])
+            : vue.createCommentVNode("v-if", true),
+          ($options.showEmptyResult)
+            ? vue.renderSlot(_ctx.$slots, "empty-result", { key: 1 }, () => [
+                vue.createElementVNode("div", _hoisted_2$3, [
+                  vue.createVNode(_component_q_icon, {
+                    class: "q-mb-sm text-center",
+                    color: "primary",
+                    name: "o_search",
+                    size: "38px"
+                  }),
+                  vue.createElementVNode("div", null, vue.toDisplayString($props.emptyResultText), 1 /* TEXT */)
+                ])
+              ])
+            : vue.createCommentVNode("v-if", true),
+          vue.createVNode(_component_q_inner_loading, { showing: $options.showInnerLoading }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_q_spinner, {
+                color: "grey",
+                size: "3em"
+              })
+            ]),
+            _: 1 /* STABLE */
+          }, 8 /* PROPS */, ["showing"])
         ], 4 /* STYLE */)
       ]),
       _: 3 /* FORWARDED */
@@ -7718,6 +8481,8 @@
   var script$7 = {
     name: 'QasSelect',
 
+    mixins: [searchFilterMixin],
+
     props: {
       fuseOptions: {
         default: () => ({}),
@@ -7731,7 +8496,7 @@
 
       modelValue: {
         default: () => [],
-        type: [Array, Object, String, Number]
+        type: [Array, Object, String, Number, Boolean]
       },
 
       noOptionLabel: {
@@ -7744,13 +8509,13 @@
         type: Array
       },
 
-      searchable: {
-        type: Boolean
-      },
-
       valueKey: {
         default: '',
         type: String
+      },
+
+      useSearch: {
+        type: Boolean
       }
     },
 
@@ -7758,7 +8523,6 @@
 
     data () {
       return {
-        filteredOptions: [],
         fuse: null
       }
     },
@@ -7766,15 +8530,18 @@
     computed: {
       attributes () {
         return {
-          clearable: this.searchable,
+          clearable: this.isSearchable,
           emitValue: true,
           mapOptions: true,
           outlined: true,
-
           ...this.$attrs,
 
-          options: this.filteredOptions,
-          useInput: this.searchable
+          options: this.mx_filteredOptions,
+          useInput: this.isSearchable,
+          error: this.hasError,
+          loading: this.hasLoading,
+          ...(this.useLazyLoading && { onVirtualScroll: this.mx_onVirtualScroll }),
+          ...(this.isSearchable && { onFilter: this.onFilter })
         }
       },
 
@@ -7788,12 +8555,20 @@
         }
       },
 
-      formattedResult () {
-        if (!this.labelKey && !this.valueKey) {
-          return this.options
-        }
+      isSearchable () {
+        return this.useSearch || this.useLazyLoading
+      },
+
+      defaultOptions () {
+        return this.mx_handleOptions(this.options)
+      },
+
+      hasError () {
+        return this.mx_hasFetchError || this.$attrs.error
+      },
 
-        return this.options.map(item => this.renameKey(item))
+      hasLoading () {
+        return this.mx_isFetching || this.$attrs.loading
       },
 
       model: {
@@ -7814,11 +8589,11 @@
 
       options: {
         handler () {
-          if (this.fuse) {
-            this.fuse.list = this.formattedResult;
-          }
+          if (this.useLazyLoading && this.mx_hasFilteredOptions) return
+
+          if (this.fuse) this.setFuse();
 
-          this.filteredOptions = this.formattedResult;
+          this.mx_filteredOptions = this.defaultOptions;
         },
 
         immediate: true
@@ -7827,59 +8602,57 @@
 
     created () {
       this.setFuse();
+      this.useLazyLoading && this.mx_setFetchOptions('');
     },
 
     methods: {
-      filterOptions (value, update) {
-        update(() => {
-          if (!this.searchable) return
-
-          if (value === '') {
-            this.filteredOptions = this.formattedResult;
-          } else {
-            const results = this.fuse.search(value);
-            this.filteredOptions = results.map(item => item.item);
-          }
-        });
+      setFuse () {
+        if (this.useSearch) {
+          this.fuse = new Fuse__default["default"](this.defaultOptions, this.defaultFuseOptions);
+        }
       },
 
-      renameKey (item) {
-        const mapKeys = {
-          label: this.labelKey,
-          value: this.valueKey
-        };
+      async onFilter (value, update) {
+        if (this.useLazyLoading && value !== this.mx_search) {
+          await this.mx_filterOptionsByStore(value);
+        }
 
-        for (const newKey in mapKeys) {
-          if (!item.hasOwnProperty.call(newKey)) {
-            item[newKey] = item[mapKeys[newKey]];
-            delete item[mapKeys[newKey]];
-          }
+        if (!this.useLazyLoading && this.useSearch) {
+          this.filterOptionsByFuse(value);
         }
 
-        return item
+        update();
       },
 
-      setFuse () {
-        if (this.searchable) {
-          this.fuse = new Fuse__default["default"](this.options, this.defaultFuseOptions);
+      filterOptionsByFuse (value) {
+        if (value === '') {
+          this.mx_filteredOptions = this.defaultOptions;
+          return
         }
+
+        const results = this.fuse.search(value);
+
+        this.mx_filteredOptions = this.mx_getNormalizedFuseResults(results);
       }
     }
   };
 
+  const _hoisted_1$4 = { class: "flex justify-center q-pb-sm" };
+
   function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_q_icon = vue.resolveComponent("q-icon");
     const _component_q_item_section = vue.resolveComponent("q-item-section");
     const _component_q_item = vue.resolveComponent("q-item");
+    const _component_q_spinner_dots = vue.resolveComponent("q-spinner-dots");
     const _component_q_select = vue.resolveComponent("q-select");
 
     return (vue.openBlock(), vue.createBlock(_component_q_select, vue.mergeProps({
       modelValue: $options.model,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.model) = $event))
-    }, $options.attributes, { onFilter: $options.filterOptions }), vue.createSlots({
+    }, $options.attributes), vue.createSlots({
       append: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "append", {}, () => [
-          ($props.searchable)
+          ($options.isSearchable)
             ? (vue.openBlock(), vue.createBlock(_component_q_icon, {
                 key: 0,
                 name: "o_search"
@@ -7888,19 +8661,33 @@
         ])
       ]),
       "no-option": vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "no-option", {}, () => [
-          vue.createVNode(_component_q_item, null, {
-            default: vue.withCtx(() => [
-              vue.createVNode(_component_q_item_section, { class: "text-grey" }, {
+        (!_ctx.mx_isFetching)
+          ? vue.renderSlot(_ctx.$slots, "no-option", { key: 0 }, () => [
+              vue.createVNode(_component_q_item, null, {
                 default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString($props.noOptionLabel), 1 /* TEXT */)
+                  vue.createVNode(_component_q_item_section, { class: "text-grey" }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString($props.noOptionLabel), 1 /* TEXT */)
+                    ]),
+                    _: 1 /* STABLE */
+                  })
                 ]),
                 _: 1 /* STABLE */
               })
-            ]),
-            _: 1 /* STABLE */
-          })
-        ])
+            ])
+          : vue.createCommentVNode("v-if", true)
+      ]),
+      "after-options": vue.withCtx(() => [
+        (_ctx.mx_isFetching)
+          ? vue.renderSlot(_ctx.$slots, "after-options", { key: 0 }, () => [
+              vue.createElementVNode("div", _hoisted_1$4, [
+                vue.createVNode(_component_q_spinner_dots, {
+                  color: "primary",
+                  size: "20px"
+                })
+              ])
+            ])
+          : vue.createCommentVNode("v-if", true)
       ]),
       _: 2 /* DYNAMIC */
     }, [
@@ -7912,7 +8699,7 @@
           ])
         }
       })
-    ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "onFilter"]))
+    ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue"]))
   }
 
   script$7.render = render$7;
@@ -7946,26 +8733,16 @@
         default: () => []
       },
 
-      to: {
-        default: () => ({}),
-        type: Object
-      },
-
-      redirectKey: {
-        default: 'uuid',
-        type: String
-      },
-
-      paramKey: {
-        default: 'id',
-        type: String
+      useClickableLabel: {
+        type: Boolean
       }
     },
 
     emits: [
       'added',
-      'update:modelValue',
-      'removed'
+      'click-label',
+      'removed',
+      'update:modelValue'
     ],
 
     data () {
@@ -7977,12 +8754,8 @@
     },
 
     computed: {
-      isRedirectEnabled () {
-        return Object.keys(this.to).length
-      },
-
       labelClass () {
-        return this.isRedirectEnabled ? 'cursor-pointer' : ''
+        return this.useClickableLabel && 'cursor-pointer'
       },
 
       slotData () {
@@ -8011,6 +8784,7 @@
           this.values = [...value];
         },
 
+        deep: true,
         immediate: true
       }
     },
@@ -8032,7 +8806,7 @@
 
         return {
           dense: this.$qas.screen.isSmall,
-          hideLabelOnSmallScreen: true,
+          useLabelOnSmallScreen: false,
           icon: !this.$qas.screen.isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
           label: isSelected ? 'Remover' : 'Adicionar',
           outline: isSelected,
@@ -8057,11 +8831,8 @@
         });
       },
 
-      redirectRoute (item) {
-        return this.isRedirectEnabled && this.$router.push({
-          params: { [this.paramKey]: item[this.redirectKey] },
-          ...this.to
-        })
+      onClickLabel ({ item, index }) {
+        this.useClickableLabel && this.$emit('click-label', { item, index });
       },
 
       remove (item) {
@@ -8115,7 +8886,7 @@
                         default: vue.withCtx(() => [
                           vue.createElementVNode("div", {
                             class: vue.normalizeClass($options.labelClass),
-                            onClick: $event => ($options.redirectRoute(result))
+                            onClick: $event => ($options.onClickLabel({ item: result, index: _ctx.index }))
                           }, vue.toDisplayString(result.label), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$3)
                         ]),
                         _: 2 /* DYNAMIC */
@@ -8186,7 +8957,9 @@
 
     watch: {
       $route (to, from) {
-        to.name === from.name && this.fetchSingle();
+        if (to.name === from.name) {
+          this.mx_fetchHandler({ id: this.id, url: this.url }, this.fetchSingle);
+        }
       },
 
       resultModel (value) {
@@ -8195,19 +8968,23 @@
     },
 
     created () {
-      this.fetchSingle();
+      this.mx_fetchHandler({ id: this.id, url: this.url }, this.fetchSingle);
     },
 
     methods: {
-      async fetchSingle (params = {}) {
+      async fetchSingle (externalPayload = {}) {
         this.mx_isFetching = true;
 
         try {
-          const response = await this.$store.dispatch(
-            `${this.entity}/fetchSingle`,
-            { id: this.id, url: this.url, params }
+          const payload = { id: this.id, url: this.url, ...externalPayload };
+
+          this.$qas.logger.group(
+            `QasSingleView - fetchSingle -> payload do parâmetro do ${this.entity}/fetchSingle`,
+            [payload]
           );
 
+          const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, payload);
+
           const { errors, fields, metadata } = response.data;
 
           this.mx_setErrors(errors);
@@ -8220,10 +8997,20 @@
             metadata: this.mx_metadata
           });
 
+          this.$qas.logger.group(
+            `QasSingleView - fetchSingle -> resposta da action ${this.entity}/fetchSingle`, [response]
+          );
+
           this.$emit('fetch-success', response);
         } catch (error) {
           this.mx_fetchError(error);
           this.$emit('fetch-error', error);
+
+          this.$qas.logger.group(
+            `QasSingleView - fetchSingle -> exceção da action ${this.entity}/fetchSingle`,
+            [error],
+            { error: true }
+          );
         } finally {
           this.mx_isFetching = false;
         }
@@ -8515,6 +9302,8 @@
             columnByField(this.fields[index]);
           }
 
+          this.$qas.logger.group('QasTableGenerator - Automatic columns', [columns]);
+
           return columns
         }
 
@@ -8527,6 +9316,8 @@
           }
         });
 
+        this.$qas.logger.group('QasTableGenerator - columns', [columns]);
+
         return columns
       },
 
@@ -8543,16 +9334,22 @@
       },
 
       resultsByFields () {
+        if (!Object.keys(this.fields).length) return []
+
         const results = quasar.extend(true, [], this.results);
 
-        return results.map((result, index) => {
+        const mappedResults = results.map((result, index) => {
           for (const key in result) {
             result.default = this.results[index];
             result[key] = humanize(this.fields[key], result[key]) || this.emptyResultText;
           }
 
           return result
-        })
+        });
+
+        this.$qas.logger.group('QasTableGenerator - resultsByFields', [mappedResults]);
+
+        return mappedResults
       },
 
       rowsPerPage () {
@@ -8714,7 +9511,7 @@
       tabs: {
         default: () => ({}),
         required: true,
-        type: Object
+        type: [Object, Array]
       }
     },
 
@@ -8771,7 +9568,7 @@
             (vue.openBlock(), vue.createBlock(_component_q_tab, vue.mergeProps({ key: key }, tab, {
               class: $props.tabClass,
               label: tab.label,
-              name: key
+              name: tab.value
             }), {
               default: vue.withCtx(() => [
                 vue.renderSlot(_ctx.$slots, `tab-after-${tab.value}`, { item: tab }, () => [
@@ -8856,7 +9653,7 @@
         return {
           cancel: false,
           ok: false,
-          useCloseIcon: true,
+          useCloseButton: true,
           ...this.dialogProps,
           card: {
             title: this.dialogTitle,
@@ -9266,7 +10063,7 @@
 
   var name = "@bildvitta/quasar-ui-asteroid";
   var description = "Asteroid";
-  var version$1 = "3.0.0-beta.9";
+  var version$1 = "3.0.0";
   var author = "Bild & Vitta <systemteam@bild.com.br>";
   var license = "MIT";
   var main = "dist/asteroid.cjs.min.js";
@@ -9422,8 +10219,9 @@
     app.config.globalProperties.$qas = {
       dialog: Dialog,
       error: NotifyError,
-      success: NotifySuccess,
-      screen: Screen()
+      logger: Logger(),
+      screen: Screen(),
+      success: NotifySuccess
     };
 
     app.directive(Test.name, Test);
@@ -9481,6 +10279,7 @@
     QasTransfer: script,
     QasUploader: script$q,
     Dialog: Dialog,
+    Logger: Logger,
     NotifyError: NotifyError,
     NotifySuccess: NotifySuccess,
     Screen: Screen,