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

package/dist/asteroid.cjs.js

@@ -1,5 +1,5 @@
 /*!
-* @bildvitta/quasar-ui-asteroid v3.0.0-beta.7
+* @bildvitta/quasar-ui-asteroid v3.0.0
 * (c) 2022 Bild & Vitta <systemteam@bild.com.br>
 * Released under the MIT License.
 */
@@ -17,6 +17,7 @@ var AutoNumeric = require('autonumeric');
 var Pica = require('pica');
 var SignaturePad = require('signature_pad');
 var vueRouter = require('vue-router');
+var lodash = require('lodash');
 var Fuse = require('fuse.js');
 var Sortable = require('sortablejs');
 var VueGoogleMaps = require('@fawmi/vue-google-maps');
@@ -58,14 +59,14 @@ var script$L = {
   }
 };
 
-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, [
@@ -81,13 +82,14 @@ var script$K = {
   name: 'QasBtn',
 
   props: {
-    hideLabelOnSmallScreen: {
+    useLabelOnSmallScreen: {
+      default: true,
       type: Boolean
     },
 
     label: {
-      type: String,
-      default: ''
+      default: '',
+      type: String
     }
   },
 
@@ -99,12 +101,8 @@ var script$K = {
       }
     },
 
-    hasLabel () {
-      return !!this.label
-    },
-
     showLabel () {
-      return this.hasLabel && !(this.hideLabelOnSmallScreen && this.$qas.screen.isSmall)
+      return this.useLabelOnSmallScreen || !this.$qas.screen.isSmall
     },
 
     slots () {
@@ -180,8 +178,6 @@ var script$J = {
     }
   },
 
-  emits: ['delete-success'],
-
   computed: {
     hasDelete () {
       return !!Object.keys(this.deleteProps).length
@@ -194,15 +190,11 @@ var script$J = {
         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) {
@@ -217,11 +209,11 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
   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" }, {
@@ -243,7 +235,7 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
                     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"
@@ -262,8 +254,7 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
                 ? (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, {
@@ -280,7 +271,7 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
                       })
                     ]),
                     _: 1 /* STABLE */
-                  }, 16 /* FULL_PROPS */, ["onSuccess"]))
+                  }, 16 /* FULL_PROPS */))
                 : vue.createCommentVNode("v-if", true)
             ]),
             _: 3 /* FORWARDED */
@@ -484,6 +475,41 @@ function getGreatestCommonDivisor (first, second) {
   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) {
@@ -581,6 +607,8 @@ function humanize (field = {}, value) {
     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
   }
 }
@@ -734,7 +762,7 @@ var script$H = {
   }
 };
 
-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"
@@ -758,7 +786,7 @@ function render$H(_ctx, _cache, $props, $setup, $data, $options) {
           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 */))
@@ -825,20 +853,16 @@ var script$G = {
       }
 
       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 () {
@@ -917,10 +941,6 @@ var script$F = {
       type: String
     },
 
-    isAuth: {
-      type: Boolean
-    },
-
     title: {
       type: String,
       default: ''
@@ -975,6 +995,14 @@ var script$F = {
 
     showTitle () {
       return this.title && !this.brand
+    },
+
+    hasUser () {
+      return !!Object.keys(this.user).length
+    },
+
+    userName () {
+      return this.user.name || this.user.givenName
     }
   },
 
@@ -997,7 +1025,7 @@ var script$F = {
   }
 };
 
-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"
@@ -1020,11 +1048,10 @@ const _hoisted_14$1 = { class: "q-mt-sm" };
 
 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");
@@ -1045,7 +1072,7 @@ function render$F(_ctx, _cache, $props, $setup, $data, $options) {
             position: "top",
             size: "2px"
           }),
-          vue.createVNode(_component_q_btn, {
+          vue.createVNode(_component_qas_btn, {
             color: "grey-7",
             dense: "",
             flat: "",
@@ -1065,7 +1092,7 @@ function render$F(_ctx, _cache, $props, $setup, $data, $options) {
                       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 */))
@@ -1085,7 +1112,7 @@ function render$F(_ctx, _cache, $props, $setup, $data, $options) {
           }),
           ($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",
@@ -1112,11 +1139,11 @@ function render$F(_ctx, _cache, $props, $setup, $data, $options) {
             : 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",
@@ -1126,10 +1153,10 @@ function render$F(_ctx, _cache, $props, $setup, $data, $options) {
                     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, {
@@ -1149,10 +1176,10 @@ function render$F(_ctx, _cache, $props, $setup, $data, $options) {
                             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, {
@@ -1331,7 +1358,7 @@ var script$E = {
   }
 };
 
-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"
@@ -1364,7 +1391,7 @@ function render$E(_ctx, _cache, $props, $setup, $data, $options) {
     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, [
@@ -1541,15 +1568,11 @@ var script$C = {
   name: 'QasCard',
 
   props: {
-    bgImagePosition: {
+    imagePosition: {
       type: String,
       default: 'center'
     },
 
-    formMode: {
-      type: Boolean
-    },
-
     gutter: {
       type: String,
       default: 'sm'
@@ -1560,6 +1583,14 @@ var script$C = {
       type: Array
     },
 
+    outlined: {
+      type: Boolean
+    },
+
+    unelevated: {
+      type: Boolean
+    },
+
     useHeader: {
       type: Boolean
     }
@@ -1572,12 +1603,17 @@ var script$C = {
   },
 
   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 () {
@@ -1608,7 +1644,7 @@ var script$C = {
   }
 };
 
-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"
@@ -1626,7 +1662,7 @@ function render$C(_ctx, _cache, $props, $setup, $data, $options) {
   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])
     }, {
@@ -1660,7 +1696,7 @@ function render$C(_ctx, _cache, $props, $setup, $data, $options) {
                     (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"]))
@@ -1889,7 +1925,7 @@ var script$A = {
   }
 };
 
-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");
@@ -1912,7 +1948,7 @@ function render$A(_ctx, _cache, $props, $setup, $data, $options) {
       default: vue.withCtx(() => [
         vue.createVNode(_component_q_tooltip, null, {
           default: vue.withCtx(() => [
-            _hoisted_1$m
+            _hoisted_1$n
           ]),
           _: 1 /* STABLE */
         })
@@ -1936,33 +1972,33 @@ var script$z = {
       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
@@ -1999,16 +2035,16 @@ var script$z = {
     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
       }
@@ -2034,18 +2070,18 @@ var script$z = {
 
     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();
       }
     },
@@ -2055,11 +2091,11 @@ var script$z = {
         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')
       }
 
@@ -2067,14 +2103,14 @@ var script$z = {
     },
 
     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
       )
     }
@@ -2088,75 +2124,73 @@ function render$z(_ctx, _cache, $props, $setup, $data, $options) {
   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;
@@ -2174,12 +2208,12 @@ var script$y = {
   }
 };
 
-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) => {
@@ -2257,7 +2291,11 @@ var script$x = {
       type: Boolean
     },
 
-    useCloseIcon: {
+    useCloseButton: {
+      type: Boolean
+    },
+
+    useValidationAllAtOnce: {
       type: Boolean
     }
   },
@@ -2305,7 +2343,26 @@ var script$x = {
 
   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
@@ -2324,7 +2381,7 @@ var script$x = {
   }
 };
 
-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 };
 
@@ -2349,9 +2406,9 @@ function render$x(_ctx, _cache, $props, $setup, $data, $options) {
           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: "",
@@ -2435,6 +2492,51 @@ var Dialog = (componentProps = {}) => {
   });
 };
 
+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
@@ -2621,7 +2723,13 @@ var script$w = {
       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!');
 
@@ -2635,9 +2743,17 @@ var script$w = {
         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);
@@ -2779,8 +2895,8 @@ function render$v(_ctx, _cache, $props, $setup, $data, $options) {
               ($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)
@@ -2804,32 +2920,32 @@ var script$u = {
   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: ''
     }
   },
 
@@ -2874,7 +2990,7 @@ var script$u = {
       },
 
       set (value) {
-        if (this.removeErrorOnType && this.error) {
+        if (this.useRemoveErrorOnType && this.error) {
           this.errorData = false;
           this.errorMessageData = '';
         }
@@ -2886,7 +3002,7 @@ var script$u = {
 
   watch: {
     mask () {
-      const input = this.inputReference.$el?.querySelector('input');
+      const input = this.getInput();
 
       requestAnimationFrame(() => {
         input.selectionStart = input.value ? input.value.length : '';
@@ -2920,12 +3036,30 @@ var script$u = {
     },
 
     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')
     }
   }
 };
@@ -2933,29 +3067,28 @@ var script$u = {
 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;
@@ -2972,17 +3105,7 @@ var script$t = {
   name: 'QasNumericInput',
 
   props: {
-    allowNegative: {
-      default: true,
-      type: Boolean
-    },
-
-    allowPositive: {
-      default: true,
-      type: Boolean
-    },
-
-    autonumericProps: {
+    autonumericOptions: {
       default: () => ({}),
       type: Object
     },
@@ -3014,6 +3137,16 @@ var script$t = {
     preset: {
       default: false,
       type: [Boolean, String]
+    },
+
+    useNegative: {
+      default: true,
+      type: Boolean
+    },
+
+    usePositive: {
+      default: true,
+      type: Boolean
     }
   },
 
@@ -3057,11 +3190,11 @@ var script$t = {
       Object.assign(options, autoNumericPredefinedOptions[value]);
     }
 
-    if (!this.allowNegative) {
+    if (!this.useNegative) {
       options.minimumValue = 0;
     }
 
-    if (!this.allowPositive) {
+    if (!this.usePositive) {
       options.maximumValue = 0;
     }
 
@@ -3069,7 +3202,7 @@ var script$t = {
       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);
@@ -3099,7 +3232,7 @@ var script$t = {
   }
 };
 
-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");
@@ -3116,7 +3249,7 @@ function render$t(_ctx, _cache, $props, $setup, $data, $options) {
         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]
       ])
     ]),
@@ -3279,13 +3412,13 @@ var script$s = {
   }
 };
 
-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,
@@ -3312,8 +3445,11 @@ var script$r = {
 
   mixins: [passwordMixin],
 
+  inheritAttrs: false,
+
   props: {
-    hideStrengthChecker: {
+    useStrengthChecker: {
+      default: true,
       type: Boolean
     },
 
@@ -3373,44 +3509,41 @@ function render$r(_ctx, _cache, $props, $setup, $data, $options) {
   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;
@@ -3484,7 +3617,11 @@ var script$q = {
 
     uploading: {
       type: Boolean
-    }
+    },
+
+    useObjectModel: {
+      type: Boolean
+    }
   },
 
   emits: ['update:modelValue', 'update:uploading'],
@@ -3597,12 +3734,19 @@ var script$q = {
     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) {
@@ -3613,6 +3757,12 @@ var script$q = {
           entity: this.entity,
           filename
         });
+
+        this.$qas.logger.group(
+          'QasUploader - fetchCredentials -> resposta de /upload-credentials/',
+          [data]
+        );
+
         return data
       } finally {
         this.isFetching = false;
@@ -3631,8 +3781,16 @@ var script$q = {
       }
 
       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);
     },
 
@@ -3641,12 +3799,10 @@ var script$q = {
     },
 
     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,
@@ -3655,11 +3811,20 @@ var script$q = {
         }
       });
 
+      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
@@ -3667,16 +3832,18 @@ var script$q = {
 
         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
     },
 
@@ -3696,6 +3863,8 @@ var script$q = {
       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));
     },
@@ -3715,7 +3884,14 @@ var script$q = {
         // 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);
@@ -3733,7 +3909,11 @@ var script$q = {
         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
@@ -3746,7 +3926,7 @@ var script$q = {
   }
 };
 
-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,
@@ -3756,7 +3936,7 @@ const _hoisted_4$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 = {
@@ -3799,7 +3979,7 @@ function render$q(_ctx, _cache, $props, $setup, $data, $options) {
       }), {
         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,
@@ -3828,6 +4008,7 @@ function render$q(_ctx, _cache, $props, $setup, $data, $options) {
                 : vue.createCommentVNode("v-if", true),
               vue.createElementVNode("input", {
                 ref: "hiddenInput",
+                accept: $options.attributes.accept,
                 class: "qas-uploader__input",
                 multiple: $options.isMultiple,
                 type: "file"
@@ -3875,7 +4056,7 @@ function render$q(_ctx, _cache, $props, $setup, $data, $options) {
                     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"]),
@@ -4036,7 +4217,7 @@ var script$p = {
   }
 };
 
-const _hoisted_1$g = {
+const _hoisted_1$h = {
   ref: "signatureContainer",
   class: "qas-signature-pad relative-position"
 };
@@ -4046,7 +4227,7 @@ function render$p(_ctx, _cache, $props, $setup, $data, $options) {
   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,
@@ -4081,6 +4262,7 @@ var script$o = {
   name: 'QasSignatureUploader',
 
   components: {
+    QasBtn: script$K,
     QasDialog: script$x,
     QasUploader: script$q,
     QasSignaturePad: script$p
@@ -4209,7 +4391,7 @@ var script$o = {
   }
 };
 
-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"
@@ -4217,7 +4399,7 @@ const _hoisted_2$b = {
 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");
@@ -4236,14 +4418,15 @@ function render$o(_ctx, _cache, $props, $setup, $data, $options) {
           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",
@@ -4251,12 +4434,12 @@ function render$o(_ctx, _cache, $props, $setup, $data, $options) {
                 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
@@ -4285,7 +4468,7 @@ function render$o(_ctx, _cache, $props, $setup, $data, $options) {
         ], 4 /* STYLE */)
       ]),
       actions: vue.withCtx(() => [
-        vue.createVNode(_component_q_btn, {
+        vue.createVNode(_component_qas_btn, {
           class: "full-width",
           color: "primary",
           disable: $data.isEmpty,
@@ -4293,7 +4476,7 @@ function render$o(_ctx, _cache, $props, $setup, $data, $options) {
           "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: "",
@@ -4329,6 +4512,8 @@ var script$n = {
     QasSignatureUploader: script$o
   },
 
+  inheritAttrs: false,
+
   props: {
     error: {
       default: '',
@@ -4368,8 +4553,9 @@ var script$n = {
         type,
         mask,
         maxFiles,
-        searchable,
-        gmt
+        useIso,
+        useSearch,
+        useLazyLoading
       } = this.formattedField;
 
       // Default error attributes for Quasar.
@@ -4391,11 +4577,11 @@ var script$n = {
         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(',') : '';
@@ -4423,9 +4609,9 @@ var script$n = {
         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 },
@@ -4436,7 +4622,7 @@ var script$n = {
 
         '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 }
@@ -4498,22 +4684,20 @@ var script$n = {
 };
 
 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;
@@ -4532,6 +4716,7 @@ var script$m = {
   name: 'QasFilters',
 
   components: {
+    QasBtn: script$K,
     QasField: script$n
   },
 
@@ -4573,7 +4758,7 @@ var script$m = {
       type: String
     },
 
-    forceRefetch: {
+    useForceRefetch: {
       type: Boolean
     }
   },
@@ -4704,7 +4889,7 @@ var script$m = {
     },
 
     async fetchFilters () {
-      if (!this.forceRefetch && (this.hasFields || !this.useFilterButton)) {
+      if (!this.useForceRefetch && (this.hasFields || !this.useFilterButton)) {
         return null
       }
 
@@ -4712,11 +4897,26 @@ var script$m = {
       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;
       }
@@ -4775,7 +4975,7 @@ var script$m = {
   }
 };
 
-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"
@@ -4799,8 +4999,8 @@ const _hoisted_7$2 = {
 };
 
 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");
@@ -4808,7 +5008,7 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
   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)
@@ -4820,26 +5020,32 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
                         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: "",
@@ -4862,7 +5068,7 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
                 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: "",
@@ -4907,16 +5113,19 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
                                         ]))
                                       }), 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: ""
@@ -4985,7 +5194,9 @@ var generatorMixin = {
     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)
+      }
     }
   },
 
@@ -5034,7 +5245,13 @@ var generatorMixin = {
     },
 
     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);
@@ -5084,6 +5301,19 @@ var script$l = {
       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)
+      }
     }
   },
 
@@ -5093,6 +5323,8 @@ var script$l = {
     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;
@@ -5109,6 +5341,58 @@ var script$l = {
       }
 
       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
     }
   },
 
@@ -5123,51 +5407,290 @@ var script$l = {
 };
 
 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
@@ -5195,6 +5718,16 @@ var viewMixin = {
 
     fetching: {
       type: Boolean
+    },
+
+    useBoundary: {
+      default: true,
+      type: Boolean
+    },
+
+    beforeFetch: {
+      default: null,
+      type: Function
     }
   },
 
@@ -5210,7 +5743,7 @@ var viewMixin = {
       mx_errors: {},
       mx_fields: {},
       mx_metadata: {},
-
+      mx_cancelBeforeFetch: false,
       mx_isFetching: false
     }
   },
@@ -5223,11 +5756,11 @@ var viewMixin = {
 
   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 () {
@@ -5247,7 +5780,9 @@ var viewMixin = {
       this.$qas.error('Ops! Erro ao obter os dados.', exception);
 
       const status = response?.status;
-      const redirect = ({ 403: 'Forbidden', 404: 'NotFound' })[status];
+      const redirect = status >= 500
+        ? 'ServerError'
+        : ({ 401: 'Unauthorized', 403: 'Forbidden', 404: 'NotFound' })[status];
 
       if (redirect) {
         this.$router.replace({ name: redirect });
@@ -5259,11 +5794,9 @@ var viewMixin = {
     },
 
     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 = {}) {
@@ -5276,6 +5809,22 @@ var viewMixin = {
 
         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();
     }
   }
 };
@@ -5291,7 +5840,7 @@ var script$k = {
   mixins: [viewMixin],
 
   props: {
-    cancelButton: {
+    cancelButtonLabel: {
       default: 'Cancelar',
       type: String
     },
@@ -5315,16 +5864,12 @@ var script$k = {
       type: String
     },
 
-    readOnly: {
-      type: Boolean
-    },
-
     route: {
       default: () => ({}),
       type: Object
     },
 
-    showDialogOnUnsavedChanges: {
+    useDialogOnUnsavedChanges: {
       default: true,
       type: Boolean
     },
@@ -5334,7 +5879,7 @@ var script$k = {
       type: Array
     },
 
-    submitButton: {
+    submitButtonLabel: {
       default: 'Salvar',
       type: String
     },
@@ -5346,6 +5891,26 @@ var script$k = {
 
     submitting: {
       type: Boolean
+    },
+
+    useActions: {
+      default: true,
+      type: Boolean
+    },
+
+    useCancelButton: {
+      default: true,
+      type: Boolean
+    },
+
+    useSubmitButton: {
+      default: true,
+      type: Boolean
+    },
+
+    beforeSubmit: {
+      default: null,
+      type: Function
     }
   },
 
@@ -5362,7 +5927,6 @@ var script$k = {
   data () {
     return {
       cachedResult: {},
-      hasResult: false,
       isSubmitting: false,
       showDialog: false,
       ignoreRouterGuard: false,
@@ -5390,7 +5954,7 @@ var script$k = {
     },
 
     hasCancelButton () {
-      return !(typeof this.cancelRoute === 'boolean' && !this.cancelRoute)
+      return !(typeof this.cancelRoute === 'boolean' && !this.cancelRoute) && this.useCancelButton
     },
 
     id () {
@@ -5409,37 +5973,27 @@ var script$k = {
       return this.$route
     },
 
-    saveButtonClass () {
+    submitButtonClass () {
       return this.$qas.screen.isSmall && 'order-first'
     },
 
     isCancelButtonDisabled () {
       return this.disable || this.isSubmitting
-    },
-
-    fieldsNameWithDefaultValue () {
-      return Object.keys(this.fields).filter(field => 'default' in this.fields[field])
     }
   },
 
   watch: {
-    mx_fields (fields) {
-      const models = { ...this.getModelsByFields(fields), ...this.modelValue };
-
-      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 () {
@@ -5448,14 +6002,32 @@ var script$k = {
 
   methods: {
     beforeRouteLeave (to, from, next) {
+      const clonedModelValue = quasar.extend(true, {}, this.modelValue);
+      const clonedCachedResult = quasar.extend(true, {}, this.cachedResult);
+
+      /**
+       * 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(this.modelValue, this.cachedResult, this.handleIgnoreKeysInUnsavedChanges)
+        lodashEs.isEqualWith(
+          clonedModelValue,
+          clonedCachedResult,
+          this.handleIgnoreKeysInUnsavedChanges
+        )
       ) {
         return next()
       }
 
+      this.$qas.logger.group(
+        'QasFormView - beforeRouteLeave -> dialog chamado, modelValue diferente do cachedResult',
+        [{ modelValue: clonedModelValue, cachedResult: clonedCachedResult }]
+      );
+
       this.handleDialog(() => {
         this.ignoreRouterGuard = true;
         next();
@@ -5463,41 +6035,64 @@ var script$k = {
     },
 
     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;
-          this.$emit('update:modelValue', { ...this.modelValue, ...result });
-          this.cachedResult = this.showDialogOnUnsavedChanges && quasar.extend(true, {}, result);
+        result && Object.assign(modelValue, result);
+
+        this.$qas.logger.group(
+          `QasFormView - fetchSingle -> resposta da action ${this.entity}/fetchSingle`, [response]
+        );
+
+        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;
       }
@@ -5534,6 +6129,7 @@ var script$k = {
       const { addRoute } = useHistory();
 
       this.defaultDialogProps.ok.onClick = () => addRoute(this.$route);
+
       this.defaultDialogProps.cancel.onClick = next;
     },
 
@@ -5543,48 +6139,76 @@ var script$k = {
 
     // ignora chaves na hora de validar quando usuário está saindo da página
     handleIgnoreKeysInUnsavedChanges (firstValue, secondValue) {
-      const toIgnore = [
-        ...this.fieldsNameWithDefaultValue,
-        ...this.ignoreKeysInUnsavedChanges
-      ];
+      if (!this.ignoreKeysInUnsavedChanges.length) return
 
-      if (!toIgnore.length) return
+      this.ignoreKeysInUnsavedChanges.forEach(key => {
+        if (!firstValue) return
 
-      toIgnore.forEach(key => {
         delete firstValue[key];
         delete secondValue[key];
       });
     },
 
-    async submit (event) {
+    /**
+     * 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();
       }
 
-      if (this.disable || this.readyOnly) {
-        return null
+      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);
@@ -5592,6 +6216,12 @@ var script$k = {
         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;
       }
@@ -5603,7 +6233,7 @@ var script$k = {
   }
 };
 
-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 };
 
@@ -5620,17 +6250,17 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     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"),
-          (!$props.readOnly)
+          ($props.useActions)
             ? vue.renderSlot(_ctx.$slots, "actions", { key: 0 }, () => [
                 vue.createElementVNode("div", _hoisted_2$9, [
                   ($options.hasCancelButton)
@@ -5642,27 +6272,30 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
                           class: "full-width",
                           "data-cy": `btnCancel-${_ctx.entity}`,
                           disable: $options.isCancelButtonDisabled,
-                          label: $props.cancelButton,
+                          label: $props.cancelButtonLabel,
                           outline: "",
                           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),
-                  vue.createElementVNode("div", {
-                    class: vue.normalizeClass(["col-12 col-sm-2", $options.saveButtonClass])
-                  }, [
-                    vue.createVNode(_component_qas_btn, {
-                      class: "full-width",
-                      "data-cy": `btnSave-${_ctx.entity}`,
-                      disable: $props.disable,
-                      label: $props.submitButton,
-                      loading: $data.isSubmitting,
-                      type: "submit"
-                    }, null, 8 /* PROPS */, ["data-cy", "disable", "label", "loading"])
-                  ], 2 /* CLASS */)
+                  ($props.useSubmitButton)
+                    ? (vue.openBlock(), vue.createElementBlock("div", {
+                        key: 1,
+                        class: vue.normalizeClass(["col-12 col-sm-2", $options.submitButtonClass])
+                      }, [
+                        vue.createVNode(_component_qas_btn, {
+                          class: "full-width",
+                          "data-cy": `btnSave-${_ctx.entity}`,
+                          disable: $props.disable,
+                          label: $props.submitButtonLabel,
+                          loading: $data.isSubmitting,
+                          type: "submit"
+                        }, null, 8 /* PROPS */, ["data-cy", "disable", "label", "loading"])
+                      ], 2 /* CLASS */))
+                    : vue.createCommentVNode("v-if", true)
                 ])
               ])
             : vue.createCommentVNode("v-if", true)
@@ -5814,7 +6447,7 @@ var script$j = {
   }
 };
 
-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"
@@ -5836,7 +6469,7 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
 
   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,
@@ -5958,10 +6591,6 @@ var script$i = {
       type: [Array, Object, String]
     },
 
-    hideEmptyResult: {
-      type: Boolean
-    },
-
     emptyResultText: {
       default: '-',
       type: String
@@ -5970,6 +6599,11 @@ var script$i = {
     result: {
       default: () => ({}),
       type: Object
+    },
+
+    useEmptyResult: {
+      default: true,
+      type: Boolean
     }
   },
 
@@ -5981,7 +6615,12 @@ var script$i = {
 
   computed: {
     formattedFields () {
-      if (!this.hideEmptyResult) {
+      if (this.useEmptyResult) {
+        this.$qas.logger.group(
+          'QasGridGenerator - formattedFields -> this.useEmptyResult tem valor "true"',
+          [this.fields]
+        );
+
         return this.fields
       }
 
@@ -5999,6 +6638,8 @@ var script$i = {
         }
       }
 
+      this.$qas.logger.group('QasGridGenerator - formattedFields', [fields]);
+
       return fields
     },
 
@@ -6014,11 +6655,19 @@ var script$i = {
 
       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
     }
   }
@@ -6154,6 +6803,10 @@ var script$g = {
     }
   },
 
+  mounted () {
+    this.menuDrawer = !this.$qas.screen.untilMedium;
+  },
+
   methods: {
     toggleMenuDrawer () {
       this.menuDrawer = !this.menuDrawer;
@@ -6214,42 +6867,34 @@ var script$f = {
       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");
@@ -6259,7 +6904,7 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
   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",
@@ -6269,8 +6914,8 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
         (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", {
@@ -6279,7 +6924,7 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
               }, () => [
                 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
                     })
@@ -6299,13 +6944,13 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
                           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 */
@@ -6314,7 +6959,7 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
               ])
             ]),
             _: 2 /* DYNAMIC */
-          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["clickable", "to"])), [
+          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["clickable", "onClick"])), [
             [_directive_ripple]
           ])
         }), 128 /* KEYED_FRAGMENT */))
@@ -6335,15 +6980,6 @@ var script$e = {
   mixins: [contextMixin, viewMixin],
 
   props: {
-    disableRefresh: {
-      type: Boolean
-    },
-
-    useFilter: {
-      default: true,
-      type: Boolean
-    },
-
     filtersProps: {
       default: () => ({}),
       type: Object
@@ -6352,6 +6988,20 @@ var script$e = {
     results: {
       default: () => [],
       type: Array
+    },
+
+    useRefresh: {
+      default: true,
+      type: Boolean
+    },
+
+    useFilter: {
+      default: true,
+      type: Boolean
+    },
+
+    useResultsAreaOnly: {
+      type: Boolean
     }
   },
 
@@ -6387,13 +7037,17 @@ var script$e = {
 
     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();
       }
     },
@@ -6408,7 +7062,8 @@ var script$e = {
   },
 
   created () {
-    this.fetchList();
+    this.mx_fetchHandler({ ...this.mx_context, url: this.url }, this.fetchList);
+
     this.setCurrentPage();
   },
 
@@ -6418,21 +7073,22 @@ var script$e = {
       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);
@@ -6446,17 +7102,27 @@ var script$e = {
         });
 
         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();
@@ -6469,7 +7135,7 @@ var script$e = {
   }
 };
 
-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 };
@@ -6497,12 +7163,12 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     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),
@@ -6512,7 +7178,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
               ])
             : 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")
                 ]))
@@ -6589,13 +7255,13 @@ var script$d = {
       default: () => []
     },
 
-    usePopup: {
-      type: Boolean
-    },
-
     zoom: {
       type: Number,
       default: 17
+    },
+
+    usePopup: {
+      type: Boolean
     }
   },
 
@@ -6629,7 +7295,7 @@ var script$d = {
   }
 };
 
-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) {
@@ -6637,7 +7303,7 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
   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",
@@ -6696,7 +7362,7 @@ var script$c = {
       default: 'Inserir novo campo'
     },
 
-    btnDestroyProps: {
+    buttonDestroyProps: {
       type: Object,
       default: () => {
         return {
@@ -6708,14 +7374,14 @@ var script$c = {
       }
     },
 
-    btnDuplicateProps: {
+    buttonDuplicateProps: {
       type: Object,
       default: () => {
         return {
           label: 'Duplicar',
           icon: 'o_content_copy',
           flat: true,
-          hideMobileLabel: true,
+          useLabelOnSmallScreen: false,
           dense: true
         }
       }
@@ -6760,6 +7426,11 @@ var script$c = {
       }
     },
 
+    identifierItemKey: {
+      type: String,
+      default: 'uuid'
+    },
+
     rowLabel: {
       type: String,
       default: ''
@@ -6825,13 +7496,7 @@ var script$c = {
     },
 
     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 () {
@@ -6858,8 +7523,7 @@ var script$c = {
 
       return {
         tag: 'div',
-        enterActiveClass: 'animated slideInDown',
-        leaveActiveClass: 'animated slideOutUp'
+        enterActiveClass: 'animated slideInDown'
       }
     }
   },
@@ -6872,9 +7536,9 @@ var script$c = {
       immediate: true
     },
 
-    field: {
+    rowObject: {
       handler () {
-        !this.modelValue.length && this.setDefaultNestedValue();
+        if (!this.nested.length) return this.setDefaultNestedValue()
       },
       immediate: true
     }
@@ -6882,13 +7546,22 @@ var script$c = {
 
   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()
     },
 
@@ -6904,10 +7577,12 @@ var script$c = {
     },
 
     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()
     },
 
@@ -6933,7 +7608,7 @@ var script$c = {
       });
     },
 
-    setRowLabel (rowKey) {
+    getRowLabel (rowKey) {
       if (this.rowLabel) {
         return this.useIndexLabel ? `${this.rowLabel} ${rowKey + 1}` : this.rowLabel
       }
@@ -6943,7 +7618,7 @@ var script$c = {
   }
 };
 
-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"];
@@ -7004,18 +7679,18 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
                         (!$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)
@@ -7142,7 +7817,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
         ])
       ])
     ], 512 /* NEED_PATCH */)
-  ], 8 /* PROPS */, _hoisted_1$8))
+  ], 8 /* PROPS */, _hoisted_1$9))
 }
 
 script$c.render = render$c;
@@ -7153,17 +7828,20 @@ const { hasPreviousRoute, history: history$1, getPreviousRoute } = useHistory();
 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]
@@ -7172,6 +7850,11 @@ var script$b = {
     title: {
       default: '',
       type: String
+    },
+
+    useBreadcrumbs: {
+      default: true,
+      type: Boolean
     }
   },
 
@@ -7215,16 +7898,10 @@ var script$b = {
 
       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");
@@ -7235,7 +7912,7 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
 
   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,
@@ -7351,7 +8028,7 @@ var script$a = {
   }
 };
 
-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" };
@@ -7363,7 +8040,7 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
 
   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])
@@ -7388,8 +8065,8 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
             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 {
@@ -7489,7 +8166,7 @@ var script$9 = {
   }
 };
 
-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");
@@ -7500,7 +8177,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
     src: $options.imageSource
   }, {
     error: vue.withCtx(() => [
-      _hoisted_1$5
+      _hoisted_1$6
     ]),
     _: 1 /* STABLE */
   }, 8 /* PROPS */, ["ratio", "src"]))
@@ -7513,15 +8190,23 @@ var script$8 = {
   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
@@ -7566,110 +8251,184 @@ var script$8 = {
 
   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 () {
       return {
-        distance: 100,
-        location: 0,
-        maxPatternLength: 32,
-        minMatchCharLength: 1,
-        shouldSort: true,
         threshold: 0.1,
-        tokenize: true,
+        ignoreLocation: true,
 
         ...this.fuseOptions
       }
     },
 
-    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",
@@ -7677,26 +8436,52 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
           })
         ]),
         _: 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 */
@@ -7709,6 +8494,8 @@ script$8.__file = "src/components/search-box/QasSearchBox.vue";
 var script$7 = {
   name: 'QasSelect',
 
+  mixins: [searchFilterMixin],
+
   props: {
     fuseOptions: {
       default: () => ({}),
@@ -7722,7 +8509,7 @@ var script$7 = {
 
     modelValue: {
       default: () => [],
-      type: [Array, Object, String, Number]
+      type: [Array, Object, String, Number, Boolean]
     },
 
     noOptionLabel: {
@@ -7735,13 +8522,13 @@ var script$7 = {
       type: Array
     },
 
-    searchable: {
-      type: Boolean
-    },
-
     valueKey: {
       default: '',
       type: String
+    },
+
+    useSearch: {
+      type: Boolean
     }
   },
 
@@ -7749,7 +8536,6 @@ var script$7 = {
 
   data () {
     return {
-      filteredOptions: [],
       fuse: null
     }
   },
@@ -7757,40 +8543,45 @@ var script$7 = {
   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 })
       }
     },
 
     defaultFuseOptions () {
       return {
-        distance: 100,
-        includeScore: true,
+        ignoreLocation: true,
         keys: ['label', 'value'],
-        location: 0,
-        maxPatternLength: 32,
-        minMatchCharLength: 1,
-        shouldSort: true,
         threshold: 0.1,
-        tokenize: true,
 
         ...this.fuseOptions
       }
     },
 
-    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: {
@@ -7811,11 +8602,11 @@ var script$7 = {
 
     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
@@ -7824,59 +8615,57 @@ var script$7 = {
 
   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"
@@ -7885,19 +8674,33 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     ]),
     "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 */
   }, [
@@ -7909,7 +8712,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
         ])
       }
     })
-  ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "onFilter"]))
+  ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue"]))
 }
 
 script$7.render = render$7;
@@ -7943,26 +8746,16 @@ var script$6 = {
       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 () {
@@ -7974,12 +8767,8 @@ var script$6 = {
   },
 
   computed: {
-    isRedirectEnabled () {
-      return Object.keys(this.to).length
-    },
-
     labelClass () {
-      return this.isRedirectEnabled ? 'cursor-pointer' : ''
+      return this.useClickableLabel && 'cursor-pointer'
     },
 
     slotData () {
@@ -8008,6 +8797,7 @@ var script$6 = {
         this.values = [...value];
       },
 
+      deep: true,
       immediate: true
     }
   },
@@ -8029,7 +8819,7 @@ var script$6 = {
 
       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,
@@ -8054,11 +8844,8 @@ var script$6 = {
       });
     },
 
-    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) {
@@ -8112,7 +8899,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
                       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 */
@@ -8183,7 +8970,9 @@ var script$5 = {
 
   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) {
@@ -8192,19 +8981,23 @@ var script$5 = {
   },
 
   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);
@@ -8217,10 +9010,20 @@ var script$5 = {
           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;
       }
@@ -8512,6 +9315,8 @@ var script$3 = {
           columnByField(this.fields[index]);
         }
 
+        this.$qas.logger.group('QasTableGenerator - Automatic columns', [columns]);
+
         return columns
       }
 
@@ -8524,6 +9329,8 @@ var script$3 = {
         }
       });
 
+      this.$qas.logger.group('QasTableGenerator - columns', [columns]);
+
       return columns
     },
 
@@ -8540,16 +9347,22 @@ var script$3 = {
     },
 
     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 () {
@@ -8610,10 +9423,11 @@ var script$3 = {
     handleScrollOnGrab () {
       const fullTableWidth = this.getFullTableWidth();
       const containerTableWidth = this.getContainerTableWidth();
+      const hasScrollOnGrab = !!Object.keys(this.scrollOnGrab).length;
 
       if (fullTableWidth > containerTableWidth) {
         this.initializeScrollOnGrab();
-      } else if (this.hasScrollOnGrab) {
+      } else if (hasScrollOnGrab) {
         this.scrollOnGrab.destroyEvents();
         this.scrollOnGrab.element.style.cursor = 'auto';
         this.scrollOnGrab = {};
@@ -8710,7 +9524,7 @@ var script$2 = {
     tabs: {
       default: () => ({}),
       required: true,
-      type: Object
+      type: [Object, Array]
     }
   },
 
@@ -8767,7 +9581,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
           (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 }, () => [
@@ -8852,7 +9666,7 @@ var script$1 = {
       return {
         cancel: false,
         ok: false,
-        useCloseIcon: true,
+        useCloseButton: true,
         ...this.dialogProps,
         card: {
           title: this.dialogTitle,
@@ -9262,7 +10076,7 @@ script.__file = "src/components/transfer/QasTransfer.vue";
 
 var name = "@bildvitta/quasar-ui-asteroid";
 var description = "Asteroid";
-var version$1 = "3.0.0-beta.7";
+var version$1 = "3.0.0";
 var author = "Bild & Vitta <systemteam@bild.com.br>";
 var license = "MIT";
 var main = "dist/asteroid.cjs.min.js";
@@ -9418,14 +10232,16 @@ function install (app) {
   app.config.globalProperties.$qas = {
     dialog: Dialog,
     error: NotifyError,
-    success: NotifySuccess,
-    screen: Screen()
+    logger: Logger(),
+    screen: Screen(),
+    success: NotifySuccess
   };
 
   app.directive(Test.name, Test);
 }
 
 exports.Dialog = Dialog;
+exports.Logger = Logger;
 exports.NotifyError = NotifyError;
 exports.NotifySuccess = NotifySuccess;
 exports.QasActions = script$L;