@bildvitta/quasar-ui-asteroid 3.0.0-alpha.3 → 3.0.0-beta.3

package/dist/asteroid.umd.js

@@ -1,358 +1,26 @@
 /*!
-* @bildvitta/quasar-ui-asteroid v3.0.0-alpha.3
+* @bildvitta/quasar-ui-asteroid v3.0.0-beta.3
 * (c) 2022 Bild & Vitta <systemteam@bild.com.br>
 * Released under the MIT License.
 */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('humps'), require('vue'), require('date-fns'), require('date-fns/locale'), require('quasar'), require('autonumeric'), require('pica'), require('axios'), require('lodash-es'), require('signature_pad'), require('vue-router'), require('fuse.js'), require('sortablejs'), require('@fawmi/vue-google-maps')) :
-  typeof define === 'function' && define.amd ? define(['humps', 'vue', 'date-fns', 'date-fns/locale', 'quasar', 'autonumeric', 'pica', 'axios', 'lodash-es', 'signature_pad', 'vue-router', 'fuse.js', 'sortablejs', '@fawmi/vue-google-maps'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global["{{ umdExportName }}"] = factory(global.humps, global.Vue, global.dateFns, global.dateFnsLocale, global.Quasar, global.AutoNumeric, global.Pica, global.axios, global._, global.SignaturePad, global.VueRouter, global.Fuse, global.Sortable, global.VueGoogleMaps));
-})(this, (function (humps, vue, dateFns, locale, quasar, AutoNumeric, Pica, api, lodashEs, SignaturePad, vueRouter, Fuse, Sortable, VueGoogleMaps) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue'), require('humps'), require('date-fns'), require('date-fns/locale'), require('quasar'), require('lodash-es'), require('autonumeric'), require('pica'), require('signature_pad'), require('vue-router'), require('fuse.js'), require('sortablejs'), require('@fawmi/vue-google-maps')) :
+  typeof define === 'function' && define.amd ? define(['vue', 'humps', 'date-fns', 'date-fns/locale', 'quasar', 'lodash-es', 'autonumeric', 'pica', 'signature_pad', 'vue-router', 'fuse.js', 'sortablejs', '@fawmi/vue-google-maps'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global["{{ umdExportName }}"] = factory(global.Vue, global.humps, global.dateFns, global.dateFnsLocale, global.Quasar, global._, global.AutoNumeric, global.Pica, global.SignaturePad, global.VueRouter, global.Fuse, global.Sortable, global.VueGoogleMaps));
+})(this, (function (vue, humps, dateFns, locale, quasar, lodashEs, AutoNumeric, Pica, SignaturePad, vueRouter, Fuse, Sortable, VueGoogleMaps) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var AutoNumeric__default = /*#__PURE__*/_interopDefaultLegacy(AutoNumeric);
   var Pica__default = /*#__PURE__*/_interopDefaultLegacy(Pica);
-  var api__default = /*#__PURE__*/_interopDefaultLegacy(api);
   var SignaturePad__default = /*#__PURE__*/_interopDefaultLegacy(SignaturePad);
   var Fuse__default = /*#__PURE__*/_interopDefaultLegacy(Fuse);
   var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
   var VueGoogleMaps__default = /*#__PURE__*/_interopDefaultLegacy(VueGoogleMaps);
 
-  var contextMixin = {
-    computed: {
-      mx_context () {
-        const { limit, ordering, page, search, ...filters } = this.$route.query;
-        return { filters, limit, ordering, page: page ? parseInt(page) : 1, search }
-      }
-    }
-  };
-
-  const irregularClasses = ['col', 'col-auto', 'fit'];
-
-  var generatorMixin = {
-    props: {
-      columns: {
-        default: () => [],
-        type: [Array, String, Object]
-      },
-
-      fields: {
-        default: () => ({}),
-        type: Object
-      },
-
-      gutter: {
-        default: 'md',
-        type: [String, Boolean],
-        validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
-      }
-    },
-
-    computed: {
-      mx_classes () {
-        const classes = ['row'];
-
-        if (this.gutter) {
-          classes.push(`q-col-gutter-${this.gutter}`);
-        }
-
-        return classes
-      }
-    },
-
-    methods: {
-      mx_getBreakpoint (columns) {
-        const classes = [];
-        const profiles = { col: 'col', xs: 'col-xs', sm: 'col-sm', md: 'col-md', lg: 'col-lg', xl: 'col-xl' };
-        const { fieldProps, classes: renamedClasses, ...formattedColumns } = columns || {};
-
-        for (const key in formattedColumns) {
-          const value = formattedColumns[key];
-          classes.push(irregularClasses.includes(value) ? value : `${profiles[key]}-${value}`);
-        }
-
-        return [...classes, renamedClasses]
-      },
-
-      mx_getFieldClass (index, isGridGenerator) {
-        if (typeof this.columns === 'string') {
-          return irregularClasses.includes(this.columns) ? this.columns : `col-${this.columns}`
-        }
-
-        return Array.isArray(this.columns)
-          ? this.mx_handleColumnsByIndex(index, isGridGenerator)
-          : this.mx_handleColumnsByField(index, isGridGenerator)
-      },
-
-      mx_handleColumnsByField (index, isGridGenerator) {
-        if (!this.columns[index]) {
-          return this.mx_setDefaultColumnClass(isGridGenerator)
-        }
-
-        return this.mx_getBreakpoint(this.columns[index])
-      },
-
-      mx_handleColumnsByIndex (index, isGridGenerator) {
-        const fields = isGridGenerator ? this.fields : this.groupedFields.visible;
-
-        if (!Array.isArray(fields)) {
-          index = Object.keys(fields).findIndex(field => field === index);
-        }
-
-        const length = this.columns.length;
-
-        if (!length) {
-          return this.mx_setDefaultColumnClass(isGridGenerator)
-        }
-
-        return this.mx_getBreakpoint(this.columns[index])
-      },
-
-      mx_setDefaultColumnClass (isGridGenerator) {
-        return isGridGenerator ? 'col-6 col-xs-12 col-sm-4' : 'col-6'
-      }
-    }
-  };
-
-  const levels = {
-    0: {
-      color: 'negative',
-      label: 'Muito fraco',
-      progress: 0.05,
-      textClass: 'text-negative'
-    },
-
-    1: {
-      color: 'warning',
-      label: 'Fraco',
-      progress: 0.25,
-      textClass: 'text-warning'
-    },
-
-    2: {
-      color: 'warning',
-      label: 'Bom',
-      progress: 0.5,
-      textClass: 'text-warning'
-    },
-
-    3: {
-      color: 'positive',
-      label: 'Forte',
-      progress: 0.75,
-      textClass: 'text-positive'
-    },
-
-    4: {
-      color: 'positive',
-      label: 'Muito forte',
-      progress: 1,
-      textClass: 'text-positive'
-    }
-  };
-
-  var passwordMixin = {
-    props: {
-      levels: {
-        default: () => levels,
-        type: Object
-      },
-
-      // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength
-      minlength: {
-        default: 8,
-        type: [Number, String]
-      },
-
-      specials: {
-        default: /[!@#$%^&*()_+\-=[\]{}|;:'",<.>/?`~]/g,
-        type: RegExp
-      },
-
-      trackColor: {
-        default: 'blue-grey-1',
-        type: String
-      },
-
-      useLowercase: {
-        default: true,
-        type: Boolean
-      },
-
-      useNumbers: {
-        default: true,
-        type: Boolean
-      },
-
-      useSpecial: {
-        default: true,
-        type: Boolean
-      },
-
-      useUppercase: {
-        default: true,
-        type: Boolean
-      }
-    }
-  };
-
-  var screenMixin = {
-    // TODO: Esses nomes precisam ser alterados para algo mais inteligente.
-
-    computed: {
-      mx_isSmall () {
-        // until 599
-        return this.$q.screen.xs
-      },
-
-      mx_isMedium () {
-        // from 600 until 1023
-        return this.$q.screen.sm
-      },
-
-      mx_isLarge () {
-        // from 1024 until the limit
-        return this.$q.screen.gt.sm
-      },
-
-      mx_untilMedium () {
-        // from 0 until 599
-        return this.$q.screen.lt.sm
-      },
-
-      mx_untilLarge () {
-        // from 0 until 1023
-        return this.$q.screen.lt.md
-      },
-
-      mx_isMobile () {
-        return this.$q.platform.is.mobile
-      }
-    }
-  };
-
-  var viewMixin = {
-    props: {
-      dialog: {
-        type: Boolean
-      },
-
-      entity: {
-        required: true,
-        type: String
-      },
-
-      url: {
-        default: '',
-        type: String
-      },
-
-      fields: {
-        default: () => ({}),
-        type: Object
-      },
-
-      errors: {
-        default: () => ({}),
-        type: Object
-      },
-
-      metadata: {
-        default: () => ({}),
-        type: Object
-      },
-
-      fetching: {
-        type: Boolean
-      }
-    },
-
-    emits: [
-      'update:fields',
-      'update:errors',
-      'update:metadata',
-      'update:fetching'
-    ],
-
-    data () {
-      return {
-        mx_errors: {},
-        mx_fields: {},
-        mx_metadata: {},
-
-        mx_isFetching: false
-      }
-    },
-
-    watch: {
-      mx_isFetching (value) {
-        this.$emit('update:fetching', value);
-      }
-    },
-
-    computed: {
-      mx_componentTag () {
-        return this.dialog ? 'div' : 'q-page'
-      },
-
-      mx_componentClass () {
-        return !this.dialog && 'container spaced'
-      },
-
-      mx_hasFooterSlot () {
-        return !!(this.$slots.footer)
-      },
-
-      mx_hasHeaderSlot () {
-        return !!(this.$slots.header)
-      }
-    },
-
-    methods: {
-      mx_fetchError (error) {
-        const { response } = error;
-        const exception = response?.data?.exception || error.message;
-
-        this.$qas.error('Ops! Erro ao obter os dados.', exception);
-
-        const status = response?.status;
-        const redirect = ({ 403: 'Forbidden', 404: 'NotFound' })[status];
-
-        if (redirect) {
-          this.$router.replace({ name: redirect });
-        }
-      },
-
-      mx_setErrors (errors = {}) {
-        this.mx_errors = vue.markRaw(errors);
-      },
-
-      mx_setFields (fields = {}) {
-        for (const field in fields) {
-          fields[field].name = humps.camelize(fields[field].name);
-        }
-
-        this.mx_fields = vue.markRaw(fields);
-      },
-
-      mx_setMetadata (metadata = {}) {
-        this.mx_metadata = vue.markRaw(metadata);
-      },
-
-      mx_updateModels (models) {
-        for (const key in models) {
-          this.$emit(`update:${key}`, models[key]);
-        }
-      }
-    }
-  };
-
   var script$L = {
     name: 'QasActions',
 
-    mixins: [screenMixin],
-
     props: {
       align: {
         default: 'end',
@@ -372,7 +40,7 @@
         return [
           `justify-${this.align}`,
           `q-col-gutter-${this.gutter}`,
-          this.mx_isSmall ? 'column reverse' : 'row'
+          this.$qas.screen.isSmall ? 'column reverse' : 'row'
         ]
       }
     }
@@ -400,28 +68,31 @@
   var script$K = {
     name: 'QasBtn',
 
-    mixins: [screenMixin],
-
-    inheritAttrs: false,
-
     props: {
       hideLabelOnSmallScreen: {
         type: Boolean
+      },
+
+      label: {
+        type: String,
+        default: ''
       }
     },
 
     computed: {
       attributes () {
-        const { label, ...attributes } = this.$attrs;
-        return attributes
+        return {
+          ...(this.showLabel && { label: this.label }),
+          ...this.$attrs
+        }
       },
 
       hasLabel () {
-        return !!(this.$attrs.label || this.$slots.default)
+        return !!(this.label || this.$slots.default)
       },
 
       showLabel () {
-        return this.hasLabel && !(this.hideLabelOnSmallScreen && this.mx_isSmall)
+        return this.hasLabel && !(this.hideLabelOnSmallScreen && this.$qas.screen.isSmall)
       },
 
       slots () {
@@ -441,9 +112,7 @@
     }, $options.attributes), vue.createSlots({
       default: vue.withCtx(() => [
         ($options.showLabel)
-          ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }, () => [
-              vue.createTextVNode(vue.toDisplayString(_ctx.$attrs.label), 1 /* TEXT */)
-            ])
+          ? vue.renderSlot(_ctx.$slots, "default", { key: 0 })
           : vue.createCommentVNode("v-if", true)
       ]),
       _: 2 /* DYNAMIC */
@@ -541,10 +210,10 @@
       "hide-label-on-small-screen": "",
       icon: $props.icon,
       label: $props.label,
-      outline: ""
+      outline: "",
+      padding: "md"
     }, {
       default: vue.withCtx(() => [
-        vue.createElementVNode("span", null, vue.toDisplayString($props.label), 1 /* TEXT */),
         vue.createVNode(_component_q_menu, { class: "qas-actions-menu__menu" }, {
           default: vue.withCtx(() => [
             vue.createVNode(_component_q_list, {
@@ -567,8 +236,8 @@
                             vue.createElementVNode("div", _hoisted_1$r, [
                               vue.createVNode(_component_q_icon, {
                                 name: item.icon,
-                                size: item.iconSize
-                              }, null, 8 /* PROPS */, ["name", "size"]),
+                                size: "sm"
+                              }, null, 8 /* PROPS */, ["name"]),
                               vue.createElementVNode("div", null, vue.toDisplayString(item.label), 1 /* TEXT */)
                             ])
                           ]),
@@ -590,7 +259,10 @@
                         vue.createVNode(_component_q_item_section, null, {
                           default: vue.withCtx(() => [
                             vue.createElementVNode("div", _hoisted_2$k, [
-                              vue.createVNode(_component_q_icon, { name: $props.deleteIcon }, null, 8 /* PROPS */, ["name"]),
+                              vue.createVNode(_component_q_icon, {
+                                name: $props.deleteIcon,
+                                size: "sm"
+                              }, null, 8 /* PROPS */, ["name"]),
                               vue.createElementVNode("div", null, vue.toDisplayString($props.deleteLabel), 1 /* TEXT */)
                             ])
                           ]),
@@ -751,11 +423,10 @@
   }
 
   /**
-   * Function to filter specific field inside a fields
-   * Função para filtrar propriedades espessificas dentro de um objeto
+   * Função para filtrar propriedades especificas dentro de um objeto
    *
    * @param {object} fields objeto com propriedades
-   * @param {array} models array de string com nomes das proproiedades que serão filtradas
+   * @param {array} models array de string com nomes das propriedades que serão filtradas
    * @returns {object} objeto com propriedades filtradas
    *
    * @example
@@ -1335,7 +1006,7 @@
   const _hoisted_11$1 = { class: "ellipsis q-mt-lg qs-lh-sm text-bold text-subtitle1" };
   const _hoisted_12$1 = { class: "ellipsis q-mt-xs text-caption" };
   const _hoisted_13$1 = { class: "q-mt-sm" };
-  const _hoisted_14 = { class: "q-mt-sm" };
+  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");
@@ -1481,7 +1152,7 @@
                                 to: $props.user.to
                               }, null, 8 /* PROPS */, ["to"])
                             ]),
-                            vue.createElementVNode("div", _hoisted_14, [
+                            vue.createElementVNode("div", _hoisted_14$1, [
                               vue.withDirectives(vue.createVNode(_component_qas_btn, {
                                 class: "q-px-lg q-py-xs",
                                 dense: "",
@@ -1516,8 +1187,6 @@
   var script$E = {
     name: 'QasAppMenu',
 
-    mixins: [screenMixin],
-
     props: {
       items: {
         default: () => [],
@@ -1619,7 +1288,7 @@
       },
 
       beforeHide () {
-        if (this.mx_isLarge) {
+        if (this.$qas.screen.isLarge) {
           this.model = true;
           this.miniMode = !this.miniMode;
         }
@@ -2518,8 +2187,6 @@
       QasActions: script$L
     },
 
-    mixins: [screenMixin],
-
     props: {
       actionsProps: {
         default: () => ({}),
@@ -2602,8 +2269,8 @@
 
       style () {
         return {
-          maxWidth: this.maxWidth || (this.mx_isSmall ? '' : '600px'),
-          minWidth: this.minWidth || (this.mx_isSmall ? '' : '400px')
+          maxWidth: this.maxWidth || (this.$qas.screen.isSmall ? '' : '600px'),
+          minWidth: this.minWidth || (this.$qas.screen.isSmall ? '' : '400px')
         }
       },
 
@@ -2624,12 +2291,12 @@
         this.useForm && this.$emit('validate', await this.$refs.form.validate());
       },
 
-      // metodo para funcionar como plugin
+      // método para funcionar como plugin
       show () {
         this.$refs.dialog.show();
       },
 
-      // metodo para funcionar como plugin
+      // método para funcionar como plugin
       hide () {
         this.$refs.dialog.hide();
       },
@@ -2765,9 +2432,87 @@
     progress: true
   });
 
-  var NotifySuccess = (message, caption) => {
-    quasar.Notify?.create({ caption, message, type: 'success' });
-  };
+  var NotifySuccess = (message, caption) => {
+    quasar.Notify?.create({ caption, message, type: 'success' });
+  };
+
+  var Screen = () => {
+    const screensModel = {
+      // até 599px
+      isSmall: () => quasar.Screen.xs,
+      // de 600 até 1023px
+      isMedium: () => quasar.Screen.sm,
+      // de 600 até 1023px
+      isLarge: () => quasar.Screen.gt.sm,
+      // de 0 até 599px
+      untilMedium: () => quasar.Screen.lt.sm,
+      // de 0 ate 1023px
+      untilLarge: () => quasar.Screen.lt.md,
+
+      // Plataforma
+      isMobile: () => quasar.Platform.is.mobile || false
+    };
+
+    const screens = {};
+
+    for (const key in screensModel) {
+      // infelizmente esta é a única forma que conseguimos para que nossa função se tornasse reativa na view
+      // é como o próprio quasar implementa
+      Object.defineProperty(screens, key, {
+        get () {
+          return screensModel[key]()
+        },
+
+        enumerable: true
+      });
+    }
+
+    return screens
+  };
+
+  const history$2 = vue.reactive({ list: [] });
+
+  function useHistory () {
+    const hasPreviousRoute = vue.computed(() => history$2.list.length > 1);
+
+    function getPreviousRoute (currentRoute) {
+      const index = lodashEs.findLastIndex(history$2.list, item => item.name === currentRoute.name);
+
+      if (~index) {
+        history$2.list.splice(index, 1);
+      }
+
+      return history$2.list[history$2.list.length - 1]
+    }
+
+    function addRoute (route) {
+      const routeExistsInList = history$2.list?.[history$2.list?.length - 1]?.name === route.name;
+
+      if (routeExistsInList) return
+
+      history$2.list.push(route);
+    }
+
+    function destroyRoutes (routes) {
+      if (!history$2.list.length) return null
+
+      routes.forEach(route => {
+        const index = history$2.list.findIndex(item => item.name === route.name);
+
+        if (~index) {
+          history$2.list.splice(index, 1);
+        }
+      });
+    }
+
+    return {
+      history: history$2,
+      hasPreviousRoute,
+      getPreviousRoute,
+      addRoute,
+      destroyRoutes
+    }
+  }
 
   var script$w = {
     name: 'QasDelete',
@@ -2805,6 +2550,11 @@
 
       deleting: {
         type: Boolean
+      },
+
+      useAutoDeleteRoute: {
+        default: true,
+        type: Boolean
       }
     },
 
@@ -2852,9 +2602,21 @@
         this.$emit('update:deleting', true);
 
         try {
+          const { destroyRoutes, history } = useHistory();
+
           await this.$store.dispatch(`${this.entity}/destroy`, { id: this.id, url: this.url });
+
           NotifySuccess('Item deletado com sucesso!');
+
+          if (this.useAutoDeleteRoute) {
+            // remove todas rotas que possuem o id do item excluído.
+            const routesToBeDeleted = this.getRoutesToBeDeletedById(history.list);
+            destroyRoutes(routesToBeDeleted);
+          }
+
+          // cria um evento para notificar que o item foi excluído no "window".
           this.createDeleteSuccessEvent();
+
           this.$emit('success');
         } catch (error) {
           NotifyError('Ops! Não foi possível deletar o item.');
@@ -2865,6 +2627,10 @@
         }
       },
 
+      getRoutesToBeDeletedById (routes = []) {
+        return routes.filter(({ params }) => params.id === this.id)
+      },
+
       createDeleteSuccessEvent () {
         const event = new CustomEvent('delete-success', {
           bubbles: false,
@@ -3023,7 +2789,7 @@
     props: {
       modelValue: {
         default: '',
-        type: String
+        type: [String, Number]
       },
 
       unmaskedValue: {
@@ -3034,11 +2800,31 @@
       outlined: {
         default: true,
         type: Boolean
+      },
+
+      removeErrorOnType: {
+        type: Boolean
+      },
+
+      error: {
+        type: Boolean
+      },
+
+      errorMessage: {
+        type: String,
+        default: ''
       }
     },
 
     emits: ['update:modelValue'],
 
+    data () {
+      return {
+        errorData: false,
+        messageErrorData: ''
+      }
+    },
+
     computed: {
       hasError () {
         return this.inputReference.hasError
@@ -3071,6 +2857,11 @@
         },
 
         set (value) {
+          if (this.removeErrorOnType && this.error) {
+            this.errorData = false;
+            this.errorMessageData = '';
+          }
+
           return this.$emit('update:modelValue', value)
         }
       }
@@ -3083,6 +2874,22 @@
         requestAnimationFrame(() => {
           input.selectionStart = input.value ? input.value.length : '';
         });
+      },
+
+      error: {
+        handler (value) {
+          this.errorData = value;
+        },
+
+        immediate: true
+      },
+
+      errorMessage: {
+        handler (value) {
+          this.errorMessageData = value;
+        },
+
+        immediate: true
       }
     },
 
@@ -3114,8 +2921,10 @@
         ref: "input",
         modelValue: $options.model,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.model) = $event)),
-        "bottom-slots": ""
+        "bottom-slots": "",
+        error: $data.errorData
       }, _ctx.$attrs, {
+        "error-message": _ctx.errorMessageData,
         mask: $options.mask,
         outlined: $props.outlined,
         "unmasked-value": $props.unmaskedValue
@@ -3128,7 +2937,7 @@
             ])
           }
         })
-      ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "mask", "outlined", "unmasked-value"])
+      ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "error", "error-message", "mask", "outlined", "unmasked-value"])
     ]))
   }
 
@@ -3283,6 +3092,88 @@
   script$t.render = render$t;
   script$t.__file = "src/components/numeric-input/QasNumericInput.vue";
 
+  const levels = {
+    0: {
+      color: 'negative',
+      label: 'Muito fraco',
+      progress: 0.05,
+      textClass: 'text-negative'
+    },
+
+    1: {
+      color: 'warning',
+      label: 'Fraco',
+      progress: 0.25,
+      textClass: 'text-warning'
+    },
+
+    2: {
+      color: 'warning',
+      label: 'Bom',
+      progress: 0.5,
+      textClass: 'text-warning'
+    },
+
+    3: {
+      color: 'positive',
+      label: 'Forte',
+      progress: 0.75,
+      textClass: 'text-positive'
+    },
+
+    4: {
+      color: 'positive',
+      label: 'Muito forte',
+      progress: 1,
+      textClass: 'text-positive'
+    }
+  };
+
+  var passwordMixin = {
+    props: {
+      levels: {
+        default: () => levels,
+        type: Object
+      },
+
+      // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength
+      minlength: {
+        default: 8,
+        type: [Number, String]
+      },
+
+      specials: {
+        default: /[!@#$%^&*()_+\-=[\]{}|;:'",<.>/?`~]/g,
+        type: RegExp
+      },
+
+      trackColor: {
+        default: 'blue-grey-1',
+        type: String
+      },
+
+      useLowercase: {
+        default: true,
+        type: Boolean
+      },
+
+      useNumbers: {
+        default: true,
+        type: Boolean
+      },
+
+      useSpecial: {
+        default: true,
+        type: Boolean
+      },
+
+      useUppercase: {
+        default: true,
+        type: Boolean
+      }
+    }
+  };
+
   var script$s = {
     name: 'QasPasswordStrengthChecker',
 
@@ -3387,9 +3278,8 @@
     mixins: [passwordMixin],
 
     props: {
-      useStrengthChecker: {
-        type: Boolean,
-        default: true
+      hideStrengthChecker: {
+        type: Boolean
       },
 
       iconColor: {
@@ -3407,7 +3297,6 @@
 
     data () {
       return {
-        key: 'error',
         toggleType: true
       }
     },
@@ -3437,15 +3326,6 @@
       }
     },
 
-    watch: {
-      modelValue () {
-        if (this.$attrs.error) {
-          this.$attrs.error = false;
-          this.$attrs.errorMessage = '';
-        }
-      }
-    },
-
     methods: {
       toggle () {
         this.toggleType = !this.toggleType;
@@ -3458,39 +3338,43 @@
     const _component_qas_password_strength_checker = vue.resolveComponent("qas-password-strength-checker");
     const _component_qas_input = vue.resolveComponent("qas-input");
 
-    return (vue.openBlock(), vue.createBlock(_component_qas_input, {
-      modelValue: $options.model,
-      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.model) = $event)),
-      "bottom-slots": "",
-      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 || {})))
-          ])
-        }
-      }),
-      ($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"])
+    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": ""
+      }, _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 || {})))
             ])
           }
-        : undefined
-    ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "type"]))
+        }),
+        (!$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"])
+    ]))
   }
 
   script$r.render = render$r;
@@ -3689,7 +3573,7 @@
         this.isFetching = true;
 
         try {
-          const { data } = await api__default["default"].post('/upload-credentials/', {
+          const { data } = await this.$axios.post('/upload-credentials/', {
             entity: this.entity,
             filename
           });
@@ -4167,6 +4051,11 @@
     },
 
     props: {
+      dialogProps: {
+        type: Object,
+        default: () => ({})
+      },
+
       uploadLabel: {
         default: '',
         type: String
@@ -4215,6 +4104,32 @@
 
       headerClass () {
         return `q-pa-${this.readonly ? 'md' : 'sm'}`
+      },
+
+      defaultDialogProps () {
+        return {
+          maxWidth: '620px',
+          ...this.dialogProps
+        }
+      },
+
+      signaturePadWidth () {
+        const sizes = {
+          [this.$qas.screen.isSmall]: { width: '100%' },
+          [this.$qas.screen.isMedium]: { width: '570px' },
+          [this.$qas.screen.isLarge]: { width: '350px' }
+        };
+        return sizes.true
+      },
+
+      signaturePadHeight () {
+        const sizes = {
+          [this.$qas.screen.isSmall]: '250',
+          [this.$qas.screen.isMedium]: '400',
+          [this.$qas.screen.isLarge]: '250'
+        };
+
+        return sizes.true
       }
     },
 
@@ -4314,20 +4229,24 @@
         ]),
         _: 1 /* STABLE */
       }, 16 /* FULL_PROPS */, ["modelValue", "label", "readonly"]),
-      vue.createVNode(_component_qas_dialog, {
+      vue.createVNode(_component_qas_dialog, vue.mergeProps({
         modelValue: $data.isOpenedDialog,
         "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => (($data.isOpenedDialog) = $event))
-      }, {
+      }, $options.defaultDialogProps), {
         header: vue.withCtx(() => [
           _hoisted_3$8
         ]),
         description: vue.withCtx(() => [
-          vue.createVNode(_component_qas_signature_pad, {
-            ref: "signaturePadModal",
-            empty: $data.isEmpty,
-            "onUpdate:empty": _cache[2] || (_cache[2] = $event => (($data.isEmpty) = $event)),
-            height: "250"
-          }, null, 8 /* PROPS */, ["empty"])
+          vue.createElementVNode("div", {
+            style: vue.normalizeStyle($options.signaturePadWidth)
+          }, [
+            vue.createVNode(_component_qas_signature_pad, {
+              ref: "signaturePadModal",
+              empty: $data.isEmpty,
+              "onUpdate:empty": _cache[2] || (_cache[2] = $event => (($data.isEmpty) = $event)),
+              height: $options.signaturePadHeight
+            }, null, 8 /* PROPS */, ["empty", "height"])
+          ], 4 /* STYLE */)
         ]),
         actions: vue.withCtx(() => [
           vue.createVNode(_component_q_btn, {
@@ -4348,7 +4267,7 @@
           }, null, 8 /* PROPS */, ["onClick"])
         ]),
         _: 1 /* STABLE */
-      }, 8 /* PROPS */, ["modelValue"])
+      }, 16 /* FULL_PROPS */, ["modelValue"])
     ]))
   }
 
@@ -4412,7 +4331,6 @@
           prefix,
           type,
           mask,
-          pattern,
           maxFiles,
           searchable,
           gmt
@@ -4463,7 +4381,7 @@
           number: { is: 'qas-input', type: 'number', ...input },
           hidden: { is: 'input', name, type },
           email: { is: 'qas-input', type, ...input },
-          password: { is: 'qas-password-input', type, pattern, hideStrengthChecker: !pattern, ...input },
+          password: { is: 'qas-password-input', ...input },
 
           decimal: { ...numericInput, mode: 'decimal' },
           money: { ...numericInput, mode: 'money' },
@@ -4565,6 +4483,15 @@
   script$n.render = render$n;
   script$n.__file = "src/components/field/QasField.vue";
 
+  var contextMixin = {
+    computed: {
+      mx_context () {
+        const { limit, ordering, page, search, ...filters } = this.$route.query;
+        return { filters, limit, ordering, page: page ? parseInt(page) : 1, search }
+      }
+    }
+  };
+
   var script$m = {
     name: 'QasFilters',
 
@@ -4608,6 +4535,10 @@
       url: {
         default: '',
         type: String
+      },
+
+      forceRefetch: {
+        type: Boolean
       }
     },
 
@@ -4737,7 +4668,7 @@
       },
 
       async fetchFilters () {
-        if (this.hasFields || !this.useFilterButton) {
+        if (!this.forceRefetch && (this.hasFields || !this.useFilterButton)) {
           return null
         }
 
@@ -4903,7 +4834,7 @@
                         label: $options.filterButtonLabel
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_component_q_menu, { onBeforeShow: $options.fetchFilters }, {
+                          vue.createVNode(_component_q_menu, null, {
                             default: vue.withCtx(() => [
                               ($data.isFetching)
                                 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6, [
@@ -4957,7 +4888,7 @@
                                     }))
                             ]),
                             _: 1 /* STABLE */
-                          }, 8 /* PROPS */, ["onBeforeShow"])
+                          })
                         ]),
                         _: 1 /* STABLE */
                       }, 8 /* PROPS */, ["color", "label"]))
@@ -4995,8 +4926,95 @@
     ]))
   }
 
-  script$m.render = render$m;
-  script$m.__file = "src/components/filters/QasFilters.vue";
+  script$m.render = render$m;
+  script$m.__file = "src/components/filters/QasFilters.vue";
+
+  const irregularClasses = ['col', 'col-auto', 'fit'];
+
+  var generatorMixin = {
+    props: {
+      columns: {
+        default: () => [],
+        type: [Array, String, Object]
+      },
+
+      fields: {
+        default: () => ({}),
+        type: Object
+      },
+
+      gutter: {
+        default: 'md',
+        type: [String, Boolean],
+        validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+
+    computed: {
+      mx_classes () {
+        const classes = ['row'];
+
+        if (this.gutter) {
+          classes.push(`q-col-gutter-${this.gutter}`);
+        }
+
+        return classes
+      }
+    },
+
+    methods: {
+      mx_getBreakpoint (columns) {
+        const classes = [];
+        const profiles = { col: 'col', xs: 'col-xs', sm: 'col-sm', md: 'col-md', lg: 'col-lg', xl: 'col-xl' };
+        const { fieldProps, classes: renamedClasses, ...formattedColumns } = columns || {};
+
+        for (const key in formattedColumns) {
+          const value = formattedColumns[key];
+          classes.push(irregularClasses.includes(value) ? value : `${profiles[key]}-${value}`);
+        }
+
+        return [...classes, renamedClasses]
+      },
+
+      mx_getFieldClass (index, isGridGenerator) {
+        if (typeof this.columns === 'string') {
+          return irregularClasses.includes(this.columns) ? this.columns : `col-${this.columns}`
+        }
+
+        return Array.isArray(this.columns)
+          ? this.mx_handleColumnsByIndex(index, isGridGenerator)
+          : this.mx_handleColumnsByField(index, isGridGenerator)
+      },
+
+      mx_handleColumnsByField (index, isGridGenerator) {
+        if (!this.columns[index]) {
+          return this.mx_setDefaultColumnClass(isGridGenerator)
+        }
+
+        return this.mx_getBreakpoint(this.columns[index])
+      },
+
+      mx_handleColumnsByIndex (index, isGridGenerator) {
+        const fields = isGridGenerator ? this.fields : this.groupedFields.visible;
+
+        if (!Array.isArray(fields)) {
+          index = Object.keys(fields).findIndex(field => field === index);
+        }
+
+        const length = this.columns.length;
+
+        if (!length) {
+          return this.mx_setDefaultColumnClass(isGridGenerator)
+        }
+
+        return this.mx_getBreakpoint(this.columns[index])
+      },
+
+      mx_setDefaultColumnClass (isGridGenerator) {
+        return isGridGenerator ? 'col-6 col-xs-12 col-sm-4' : 'col-6'
+      }
+    }
+  };
 
   var script$l = {
     name: 'QasFormGenerator',
@@ -5105,27 +5123,123 @@
   script$l.render = render$l;
   script$l.__file = "src/components/form-generator/QasFormGenerator.vue";
 
-  const history$1 = vue.reactive({ hasPreviousRoute: false, list: [] });
+  var viewMixin = {
+    props: {
+      dialog: {
+        type: Boolean
+      },
 
-  function getPreviousRoute (currentRoute) {
-    const index = lodashEs.findLastIndex(history$1.list, item => item.name === currentRoute.name);
+      entity: {
+        required: true,
+        type: String
+      },
 
-    if (~index) {
-      history$1.list.splice(index, 1);
-    }
+      url: {
+        default: '',
+        type: String
+      },
 
-    history$1.hasPreviousRoute = history$1.list.length > 1;
-    return history$1.list[history$1.list.length - 1]
-  }
+      fields: {
+        default: () => ({}),
+        type: Object
+      },
 
-  function addRoute (route) {
-    const routeExistsInList = history$1.list?.[history$1.list?.length - 1]?.name === route.name;
+      errors: {
+        default: () => ({}),
+        type: Object
+      },
 
-    if (routeExistsInList) return
+      metadata: {
+        default: () => ({}),
+        type: Object
+      },
 
-    history$1.list.push(route);
-    history$1.hasPreviousRoute = history$1.list.length > 1;
-  }
+      fetching: {
+        type: Boolean
+      }
+    },
+
+    emits: [
+      'update:fields',
+      'update:errors',
+      'update:metadata',
+      'update:fetching'
+    ],
+
+    data () {
+      return {
+        mx_errors: {},
+        mx_fields: {},
+        mx_metadata: {},
+
+        mx_isFetching: false
+      }
+    },
+
+    watch: {
+      mx_isFetching (value) {
+        this.$emit('update:fetching', value);
+      }
+    },
+
+    computed: {
+      mx_componentTag () {
+        return this.dialog ? 'div' : 'q-page'
+      },
+
+      mx_componentClass () {
+        return !this.dialog && 'container spaced'
+      },
+
+      mx_hasFooterSlot () {
+        return !!(this.$slots.footer)
+      },
+
+      mx_hasHeaderSlot () {
+        return !!(this.$slots.header)
+      }
+    },
+
+    methods: {
+      mx_fetchError (error) {
+        const { response } = error;
+        const exception = response?.data?.exception || error.message;
+
+        this.$qas.error('Ops! Erro ao obter os dados.', exception);
+
+        const status = response?.status;
+        const redirect = ({ 403: 'Forbidden', 404: 'NotFound' })[status];
+
+        if (redirect) {
+          this.$router.replace({ name: redirect });
+        }
+      },
+
+      mx_setErrors (errors = {}) {
+        this.mx_errors = vue.markRaw(errors);
+      },
+
+      mx_setFields (fields = {}) {
+        for (const field in fields) {
+          fields[field].name = humps.camelize(fields[field].name);
+        }
+
+        this.mx_fields = vue.markRaw(fields);
+      },
+
+      mx_setMetadata (metadata = {}) {
+        this.mx_metadata = vue.markRaw(metadata);
+      },
+
+      mx_updateModels (models) {
+        for (const key in models) {
+          if (!models[key]) continue
+
+          this.$emit(`update:${key}`, models[key]);
+        }
+      }
+    }
+  };
 
   var script$k = {
     name: 'QasFormView',
@@ -5135,7 +5249,7 @@
       QasDialog: script$x
     },
 
-    mixins: [viewMixin, screenMixin],
+    mixins: [viewMixin],
 
     props: {
       cancelButton: {
@@ -5145,7 +5259,7 @@
 
       cancelRoute: {
         default: '',
-        type: [Boolean, Object, String]
+        type: [Boolean, Object, String, Function]
       },
 
       customId: {
@@ -5229,7 +5343,7 @@
 
     computed: {
       cancelButtonClass () {
-        return this.mx_isSmall && 'order-last'
+        return this.$qas.screen.isSmall && 'order-last'
       },
 
       fetchURL () {
@@ -5257,17 +5371,13 @@
       },
 
       saveButtonClass () {
-        return this.mx_isSmall && 'order-first'
+        return this.$qas.screen.isSmall && 'order-first'
       },
 
       isCancelButtonDisabled () {
         return this.disable || this.isSubmitting
       },
 
-      history () {
-        return history$1.list
-      },
-
       fieldsNameWithDefaultValue () {
         return Object.keys(this.fields).filter(field => 'default' in this.fields[field])
       }
@@ -5336,7 +5446,7 @@
           this.mx_updateModels({
             errors: errors,
             fields: this.mx_fields,
-            metadata: metadata
+            metadata
           });
 
           if (result) {
@@ -5365,9 +5475,11 @@
       },
 
       handleCancelRoute () {
-        const acceptTypes = ['string', 'object'];
+        if (typeof this.cancelRoute === 'function') {
+          return this.cancelRoute()
+        }
 
-        if (this.cancelRoute && acceptTypes.includes(typeof this.cancelRoute)) {
+        if (this.cancelRoute && ['string', 'object'].includes(typeof this.cancelRoute)) {
           return this.$router.push(this.cancelRoute)
         }
 
@@ -5380,6 +5492,8 @@
       handleDialog (next) {
         this.openDialog();
 
+        const { addRoute } = useHistory();
+
         this.defaultDialogProps.ok.onClick = () => addRoute(this.$route);
         this.defaultDialogProps.cancel.onClick = next;
       },
@@ -5462,7 +5576,9 @@
     const _component_q_inner_loading = vue.resolveComponent("q-inner-loading");
     const _directive_close_popup = vue.resolveDirective("close-popup");
 
-    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.mx_componentTag), null, {
+    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.mx_componentTag), {
+      class: vue.normalizeClass(_ctx.mx_componentClass)
+    }, {
       default: vue.withCtx(() => [
         (_ctx.mx_hasHeaderSlot)
           ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_1$d, [
@@ -5534,7 +5650,7 @@
         }, 8 /* PROPS */, ["showing"])
       ]),
       _: 3 /* FORWARDED */
-    }))
+    }, 8 /* PROPS */, ["class"]))
   }
 
   script$k.render = render$k;
@@ -5543,8 +5659,6 @@
   var script$j = {
     name: 'QasGallery',
 
-    mixins: [screenMixin],
-
     props: {
       carouselNextIcon: {
         type: String,
@@ -5601,13 +5715,13 @@
           return this.height || 'auto'
         }
 
-        return this.mx_isSmall ? '90px' : '120px'
+        return this.$qas.screen.isSmall ? '90px' : '120px'
       },
 
       galleryColumnsClasses () {
         if (this.isSingleImage) return 'col-12'
 
-        return this.mx_isSmall ? 'col-6' : 'col-2'
+        return this.$qas.screen.isSmall ? 'col-6' : 'col-2'
       },
 
       hideShowMore () {
@@ -5742,9 +5856,9 @@
                 modelValue: $data.imageIndex,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($data.imageIndex) = $event)),
                 animated: "",
-                arrows: !_ctx.mx_isSmall,
+                arrows: !_ctx.$qas.screen.isSmall,
                 "control-text-color": "primary",
-                fullscreen: _ctx.mx_isSmall,
+                fullscreen: _ctx.$qas.screen.isSmall,
                 height: $options.carouselImageHeight,
                 "next-icon": $props.carouselNextIcon,
                 "prev-icon": $props.carouselPreviousIcon,
@@ -5760,7 +5874,7 @@
                       name: index
                     }, {
                       default: vue.withCtx(() => [
-                        (_ctx.mx_isSmall)
+                        (_ctx.$qas.screen.isSmall)
                           ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [
                               vue.createVNode(_component_qas_btn, {
                                 dense: "",
@@ -6524,7 +6638,10 @@
       QasBtn: script$K,
       QasFormGenerator: script$l,
       QasInput: script$u,
-      QasLabel: script$h
+      QasLabel: script$h,
+
+      // vue
+      TransitionGroup: vue.TransitionGroup
     },
 
     props: {
@@ -6688,6 +6805,16 @@
 
       componentTag () {
         return this.useAnimation ? 'transition-group' : 'div'
+      },
+
+      componentProps () {
+        if (!this.useAnimation) return {}
+
+        return {
+          tag: 'div',
+          enterActiveClass: 'animated slideInDown',
+          leaveActiveClass: 'animated slideOutUp'
+        }
       }
     },
 
@@ -6772,23 +6899,24 @@
 
   const _hoisted_1$8 = ["id"];
   const _hoisted_2$5 = { class: "text-left" };
-  const _hoisted_3$3 = ["id"];
-  const _hoisted_4$3 = { class: "flex items-center justify-between q-py-xs" };
-  const _hoisted_5$2 = {
+  const _hoisted_3$3 = { ref: "inputContent" };
+  const _hoisted_4$3 = ["id"];
+  const _hoisted_5$2 = { class: "flex items-center justify-between q-py-xs" };
+  const _hoisted_6 = {
     key: 1,
     class: "q-gutter-x-sm"
   };
-  const _hoisted_6 = {
+  const _hoisted_7 = {
     key: 0,
     class: "flex items-center qas-nested-fields__actions"
   };
-  const _hoisted_7 = { class: "col-auto" };
   const _hoisted_8 = { class: "col-auto" };
-  const _hoisted_9 = { class: "col-12" };
-  const _hoisted_10 = { class: "q-mt-md" };
-  const _hoisted_11 = { class: "col" };
-  const _hoisted_12 = { class: "col-auto" };
-  const _hoisted_13 = {
+  const _hoisted_9 = { class: "col-auto" };
+  const _hoisted_10 = { class: "col-12" };
+  const _hoisted_11 = { class: "q-mt-md" };
+  const _hoisted_12 = { class: "col" };
+  const _hoisted_13 = { class: "col-auto" };
+  const _hoisted_14 = {
     key: 1,
     class: "q-mt-lg"
   };
@@ -6811,134 +6939,122 @@
             }, null, 8 /* PROPS */, ["label"]))
           : vue.createCommentVNode("v-if", true)
       ]),
-      vue.createElementVNode("div", null, [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.componentTag), {
-          ref: "inputContent",
-          name: "fade",
-          tag: "div"
-        }, {
+      vue.createElementVNode("div", _hoisted_3$3, [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.componentTag), vue.normalizeProps(vue.guardReactiveProps($options.componentProps)), {
           default: vue.withCtx(() => [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.nested, (row, index) => {
               return (vue.openBlock(), vue.createElementBlock("div", {
                 id: `row-${index}`,
-                key: index,
+                key: `row-${index}`,
                 class: "full-width"
               }, [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.componentTag), {
-                  name: "fade",
-                  tag: "div"
-                }, {
-                  default: vue.withCtx(() => [
-                    (!row[$props.destroyKey])
-                      ? (vue.openBlock(), vue.createElementBlock("div", {
-                          key: index,
-                          class: "col-12 q-mt-md"
+                (!row[$props.destroyKey])
+                  ? (vue.openBlock(), vue.createElementBlock("div", {
+                      key: index,
+                      class: "col-12 q-mt-md"
+                    }, [
+                      vue.createElementVNode("div", null, [
+                        vue.createElementVNode("div", _hoisted_5$2, [
+                          (!$props.useSingleLabel)
+                            ? (vue.openBlock(), vue.createBlock(_component_qas_label, {
+                                key: 0,
+                                label: $options.setRowLabel(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, {
+                                      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, {
+                                      onClick: $event => ($options.destroy(index, row))
+                                    }), null, 16 /* FULL_PROPS */, ["onClick"]))
+                                  : vue.createCommentVNode("v-if", true)
+                              ]))
+                            : vue.createCommentVNode("v-if", true)
+                        ]),
+                        vue.createElementVNode("div", {
+                          ref_for: true,
+                          ref: "formGenerator",
+                          class: "col-12 justify-between q-col-gutter-x-md row"
                         }, [
-                          vue.createElementVNode("div", null, [
-                            vue.createElementVNode("div", _hoisted_4$3, [
-                              (!$props.useSingleLabel)
-                                ? (vue.openBlock(), vue.createBlock(_component_qas_label, {
-                                    key: 0,
-                                    label: $options.setRowLabel(index)
-                                  }, null, 8 /* PROPS */, ["label"]))
-                                : vue.createCommentVNode("v-if", true),
-                              (!$props.useInlineActions)
-                                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$2, [
-                                    ($props.useDuplicate)
-                                      ? (vue.openBlock(), vue.createBlock(_component_qas_btn, vue.mergeProps({ key: 0 }, $props.btnDuplicateProps, {
-                                          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, {
-                                          onClick: $event => ($options.destroy(index, row))
-                                        }), null, 16 /* FULL_PROPS */, ["onClick"]))
-                                      : vue.createCommentVNode("v-if", true)
-                                  ]))
-                                : vue.createCommentVNode("v-if", true)
-                            ]),
-                            vue.createElementVNode("div", {
-                              ref_for: true,
-                              ref: "formGenerator",
-                              class: "col-12 justify-between q-col-gutter-x-md row"
-                            }, [
-                              vue.renderSlot(_ctx.$slots, "fields", {
-                                errors: $options.transformedErrors,
-                                fields: $options.children,
-                                index: index,
-                                updateValue: $options.updateValuesFromInput
-                              }, () => [
-                                vue.createVNode(_component_qas_form_generator, {
-                                  modelValue: $data.nested[index],
-                                  "onUpdate:modelValue": [$event => (($data.nested[index]) = $event), $event => ($options.updateValuesFromInput($event, index))],
-                                  class: vue.normalizeClass($options.formClasses),
-                                  columns: $props.formColumns,
-                                  errors: $options.transformedErrors[index],
-                                  fields: $options.children,
-                                  "fields-props": $props.fieldsProps
-                                }, vue.createSlots({ _: 2 /* DYNAMIC */ }, [
-                                  vue.renderList(_ctx.$slots, (slot, key) => {
-                                    return {
-                                      name: key,
-                                      fn: vue.withCtx((scope) => [
-                                        vue.renderSlot(_ctx.$slots, key, vue.mergeProps(scope, {
-                                          errors: $options.transformedErrors,
-                                          index: index
-                                        }))
-                                      ])
-                                    }
-                                  })
-                                ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "onUpdate:modelValue", "class", "columns", "errors", "fields", "fields-props"])
-                              ]),
-                              ($props.useInlineActions)
-                                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
-                                    vue.createElementVNode("div", _hoisted_7, [
-                                      ($props.useDuplicate)
-                                        ? (vue.openBlock(), vue.createBlock(_component_qas_btn, {
-                                            key: 0,
-                                            color: "primary",
-                                            flat: "",
-                                            icon: "o_content_copy",
-                                            round: "",
-                                            onClick: $event => ($options.add(row))
-                                          }, null, 8 /* PROPS */, ["onClick"]))
-                                        : vue.createCommentVNode("v-if", true)
-                                    ]),
-                                    vue.createElementVNode("div", _hoisted_8, [
-                                      ($options.showDestroyBtn)
-                                        ? (vue.openBlock(), vue.createBlock(_component_qas_btn, {
-                                            key: 0,
-                                            color: "negative",
-                                            flat: "",
-                                            icon: "o_cancel",
-                                            round: "",
-                                            onClick: $event => ($options.destroy(index, row))
-                                          }, null, 8 /* PROPS */, ["onClick"]))
-                                        : vue.createCommentVNode("v-if", true)
-                                    ])
-                                  ]))
-                                : vue.createCommentVNode("v-if", true)
-                            ], 512 /* NEED_PATCH */),
-                            vue.createElementVNode("div", _hoisted_9, [
-                              vue.renderSlot(_ctx.$slots, "custom-fields", {
-                                fields: $options.children,
-                                index: index,
-                                model: $data.nested[index],
-                                updateValue: $options.updateValuesFromInput
+                          vue.renderSlot(_ctx.$slots, "fields", {
+                            errors: $options.transformedErrors,
+                            fields: $options.children,
+                            index: index,
+                            updateValue: $options.updateValuesFromInput
+                          }, () => [
+                            vue.createVNode(_component_qas_form_generator, {
+                              modelValue: $data.nested[index],
+                              "onUpdate:modelValue": [$event => (($data.nested[index]) = $event), $event => ($options.updateValuesFromInput($event, index))],
+                              class: vue.normalizeClass($options.formClasses),
+                              columns: $props.formColumns,
+                              errors: $options.transformedErrors[index],
+                              fields: $options.children,
+                              "fields-props": $props.fieldsProps
+                            }, vue.createSlots({ _: 2 /* DYNAMIC */ }, [
+                              vue.renderList(_ctx.$slots, (slot, key) => {
+                                return {
+                                  name: key,
+                                  fn: vue.withCtx((scope) => [
+                                    vue.renderSlot(_ctx.$slots, key, vue.mergeProps(scope, {
+                                      errors: $options.transformedErrors,
+                                      index: index
+                                    }))
+                                  ])
+                                }
                               })
-                            ])
-                          ])
-                        ]))
-                      : vue.createCommentVNode("v-if", true)
-                  ]),
-                  _: 2 /* DYNAMIC */
-                }, 1024 /* DYNAMIC_SLOTS */))
-              ], 8 /* PROPS */, _hoisted_3$3))
+                            ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "onUpdate:modelValue", "class", "columns", "errors", "fields", "fields-props"])
+                          ]),
+                          ($props.useInlineActions)
+                            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+                                vue.createElementVNode("div", _hoisted_8, [
+                                  ($props.useDuplicate)
+                                    ? (vue.openBlock(), vue.createBlock(_component_qas_btn, {
+                                        key: 0,
+                                        color: "primary",
+                                        flat: "",
+                                        icon: "o_content_copy",
+                                        round: "",
+                                        onClick: $event => ($options.add(row))
+                                      }, null, 8 /* PROPS */, ["onClick"]))
+                                    : vue.createCommentVNode("v-if", true)
+                                ]),
+                                vue.createElementVNode("div", _hoisted_9, [
+                                  ($options.showDestroyBtn)
+                                    ? (vue.openBlock(), vue.createBlock(_component_qas_btn, {
+                                        key: 0,
+                                        color: "negative",
+                                        flat: "",
+                                        icon: "o_cancel",
+                                        round: "",
+                                        onClick: $event => ($options.destroy(index, row))
+                                      }, null, 8 /* PROPS */, ["onClick"]))
+                                    : vue.createCommentVNode("v-if", true)
+                                ])
+                              ]))
+                            : vue.createCommentVNode("v-if", true)
+                        ], 512 /* NEED_PATCH */),
+                        vue.createElementVNode("div", _hoisted_10, [
+                          vue.renderSlot(_ctx.$slots, "custom-fields", {
+                            fields: $options.children,
+                            index: index,
+                            model: $data.nested[index],
+                            updateValue: $options.updateValuesFromInput
+                          })
+                        ])
+                      ])
+                    ]))
+                  : vue.createCommentVNode("v-if", true)
+              ], 8 /* PROPS */, _hoisted_4$3))
             }), 128 /* KEYED_FRAGMENT */))
           ]),
           _: 3 /* FORWARDED */
-        }, 512 /* NEED_PATCH */)),
-        vue.createElementVNode("div", _hoisted_10, [
+        }, 16 /* FULL_PROPS */)),
+        vue.createElementVNode("div", _hoisted_11, [
           vue.renderSlot(_ctx.$slots, "add-input", { add: $options.add }, () => [
             ($props.useInlineActions)
               ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -6946,7 +7062,7 @@
                   class: "cursor-pointer items-center q-col-gutter-x-md q-mt-md row",
                   onClick: _cache[1] || (_cache[1] = $event => ($options.add()))
                 }, [
-                  vue.createElementVNode("div", _hoisted_11, [
+                  vue.createElementVNode("div", _hoisted_12, [
                     vue.createVNode(_component_qas_input, {
                       class: "disabled no-pointer-events",
                       "hide-bottom-space": "",
@@ -6955,7 +7071,7 @@
                       onFocus: _cache[0] || (_cache[0] = $event => ($options.add()))
                     }, null, 8 /* PROPS */, ["label"])
                   ]),
-                  vue.createElementVNode("div", _hoisted_12, [
+                  vue.createElementVNode("div", _hoisted_13, [
                     vue.createVNode(_component_qas_btn, {
                       color: "green",
                       flat: "",
@@ -6964,9 +7080,9 @@
                     })
                   ])
                 ]))
-              : (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
+              : (vue.openBlock(), vue.createElementBlock("div", _hoisted_14, [
                   vue.createVNode(_component_qas_btn, {
-                    class: "full-width q-py-sm",
+                    class: "full-width q-py-md",
                     icon: "o_add",
                     outline: "",
                     onClick: _cache[2] || (_cache[2] = $event => ($options.add()))
@@ -6979,13 +7095,15 @@
                 ]))
           ])
         ])
-      ])
+      ], 512 /* NEED_PATCH */)
     ], 8 /* PROPS */, _hoisted_1$8))
   }
 
   script$c.render = render$c;
   script$c.__file = "src/components/nested-fields/QasNestedFields.vue";
 
+  const { hasPreviousRoute, history: history$1, getPreviousRoute } = useHistory();
+
   var script$b = {
     name: 'QasPageHeader',
 
@@ -7013,7 +7131,7 @@
 
     computed: {
       hasPreviousRoute () {
-        return history$1.hasPreviousRoute
+        return hasPreviousRoute.value
       },
 
       transformedBreadcrumbs () {
@@ -7130,8 +7248,6 @@
       QasGridGenerator: script$i
     },
 
-    mixins: [screenMixin],
-
     props: {
       columns: {
         type: Object,
@@ -7172,7 +7288,7 @@
 
     computed: {
       directionClasses () {
-        return this.mx_untilMedium ? 'col' : 'row items-center'
+        return this.$qas.screen.untilMedium ? 'col' : 'row items-center'
       },
 
       userAvatarImage () {
@@ -7180,7 +7296,7 @@
       },
 
       avatarSize () {
-        return this.mx_isSmall ? '145px' : '188px'
+        return this.$qas.screen.isSmall ? '145px' : '188px'
       }
     },
 
@@ -7448,6 +7564,7 @@
           this.fuse = new Fuse__default["default"](value, this.defaultFuseOptions);
 
           this.setResults(this.search);
+          this.updateResultsModel(value);
         },
 
         deep: true
@@ -7464,7 +7581,7 @@
 
       searchResults: {
         handler (value) {
-          this.$emit('update:results', value.map(result => result.item || result));
+          this.updateResultsModel(value);
         },
         immediate: true
       }
@@ -7481,6 +7598,10 @@
         this.searchResults = value
           ? this.fuse.search(value)
           : this.list;
+      },
+
+      updateResultsModel (value) {
+        this.$emit('update:results', value.map(result => result.item || result));
       }
     }
   };
@@ -7756,8 +7877,6 @@
       QasSearchBox: script$8
     },
 
-    mixins: [screenMixin],
-
     props: {
       deleteOnly: {
         type: Boolean
@@ -7838,15 +7957,17 @@
         immediate: true
       },
 
-      modelValue (value) {
-        this.values = [...value];
+      modelValue: {
+        handler (value) {
+          this.values = [...value];
+        },
+
+        immediate: true
       }
     },
 
     created () {
-      this.values = [...this.modelValue];
-
-      this.handleOptions();
+      this.handleList();
     },
 
     methods: {
@@ -7861,9 +7982,9 @@
         const isSelected = this.values.includes(value);
 
         return {
-          dense: this.mx_isSmall,
+          dense: this.$qas.screen.isSmall,
           hideLabelOnSmallScreen: true,
-          icon: !this.mx_isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
+          icon: !this.$qas.screen.isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
           label: isSelected ? 'Remover' : 'Adicionar',
           outline: isSelected,
           size: 'sm'
@@ -7874,7 +7995,7 @@
         return this.values.includes(item.value) ? this.remove(item) : this.add(item)
       },
 
-      handleOptions () {
+      handleList () {
         if (this.modelValue.length) {
           return this.sortList()
         }
@@ -7905,8 +8026,8 @@
 
       sortList () {
         this.sortedList = this.deleteOnly
-          ? this.list.filter(option => this.modelValue.includes(option.value))
-          : lodashEs.sortBy(this.list, option => !this.modelValue.includes(option.value));
+          ? this.list.filter(item => this.modelValue.includes(item.value))
+          : lodashEs.sortBy(this.list, item => !this.modelValue.includes(item.value));
       },
 
       updateModel (model) {
@@ -8264,8 +8385,6 @@
   var script$3 = {
     name: 'QasTableGenerator',
 
-    mixins: [screenMixin],
-
     props: {
       columns: {
         default: () => [],
@@ -8392,7 +8511,7 @@
       },
 
       tableClass () {
-        return this.mx_isSmall && 'qas-table-generator--mobile'
+        return this.$qas.screen.isSmall && 'qas-table-generator--mobile'
       },
 
       hasScrollOnGrab () {
@@ -8433,8 +8552,8 @@
       },
 
       getFullTableWidth () {
-        const tableElemet = this.getTableElement();
-        return tableElemet?.getBoundingClientRect?.()?.width
+        const tableElement = this.getTableElement();
+        return tableElement?.getBoundingClientRect?.()?.width
       },
 
       getContainerTableWidth () {
@@ -8633,8 +8752,6 @@
       QasDialog: script$x
     },
 
-    mixins: [screenMixin],
-
     props: {
       dialogProps: {
         type: Object,
@@ -8674,7 +8791,7 @@
 
     computed: {
       truncateTextClass () {
-        return (this.isTruncated || this.mx_isSmall) && 'ellipsis q-pr-sm'
+        return (this.isTruncated || this.$qas.screen.isSmall) && 'ellipsis q-pr-sm'
       },
 
       isTruncated () {
@@ -8776,8 +8893,6 @@
       QasSearchBox: script$8
     },
 
-    mixins: [screenMixin],
-
     props: {
       emitValue: {
         type: Boolean
@@ -8827,21 +8942,23 @@
         firstQueue: [],
         optionsList: [],
         secondQueue: [],
-        selectedList: []
+        selectedList: [],
+        firstResults: [],
+        secondResults: []
       }
     },
 
     computed: {
       actionsClass () {
-        return !this.mx_isSmall && 'column'
+        return !this.$qas.screen.isSmall && 'column'
       },
 
       gutterClass () {
-        return `q-col-gutter-${this.mx_untilLarge ? 'md' : 'xl'}`
+        return `q-col-gutter-${this.$qas.screen.untilLarge ? 'md' : 'xl'}`
       },
 
       iconClass () {
-        return !this.mx_isSmall && 'qas-transfer__icon'
+        return !this.$qas.screen.isSmall && 'qas-transfer__icon'
       },
 
       searchBoxProps () {
@@ -8965,13 +9082,15 @@
           quantity: $data.optionsList.length
         }, null, 8 /* PROPS */, ["label", "quantity"]),
         vue.createVNode(_component_qas_search_box, vue.mergeProps({
-          "form-mode": "",
-          list: $data.optionsList
+          results: $data.firstResults,
+          "onUpdate:results": _cache[0] || (_cache[0] = $event => (($data.firstResults) = $event)),
+          list: $data.optionsList,
+          outlined: ""
         }, $options.searchBoxProps), {
-          default: vue.withCtx(({ results }) => [
+          default: vue.withCtx(() => [
             vue.createVNode(_component_q_list, { separator: "" }, {
               default: vue.withCtx(() => [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(results, (item, index) => {
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.firstResults, (item, index) => {
                   return (vue.openBlock(), vue.createBlock(_component_q_item, {
                     key: index,
                     class: vue.normalizeClass($options.getItemClass(item, true)),
@@ -8992,11 +9111,11 @@
                   }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "onClick"]))
                 }), 128 /* KEYED_FRAGMENT */))
               ]),
-              _: 2 /* DYNAMIC */
-            }, 1024 /* DYNAMIC_SLOTS */)
+              _: 3 /* FORWARDED */
+            })
           ]),
           _: 3 /* FORWARDED */
-        }, 16 /* FULL_PROPS */, ["list"])
+        }, 16 /* FULL_PROPS */, ["results", "list"])
       ]),
       vue.createElementVNode("div", {
         class: vue.normalizeClass(["col-12 col-sm-auto items-center justify-center q-col-gutter-md row", $options.actionsClass])
@@ -9009,7 +9128,7 @@
             flat: "",
             icon: "o_arrow_circle_down",
             rounded: "",
-            onClick: _cache[0] || (_cache[0] = $event => ($options.setSelectedFromClick(true)))
+            onClick: _cache[1] || (_cache[1] = $event => ($options.setSelectedFromClick(true)))
           }, null, 8 /* PROPS */, ["class", "disabled"]),
           vue.createVNode(_component_q_tooltip, {
             anchor: "top middle",
@@ -9030,7 +9149,7 @@
               flat: "",
               icon: "o_arrow_circle_up",
               rounded: "",
-              onClick: _cache[1] || (_cache[1] = $event => ($options.setSelectedFromClick()))
+              onClick: _cache[2] || (_cache[2] = $event => ($options.setSelectedFromClick()))
             }, null, 8 /* PROPS */, ["class", "disabled"]),
             vue.createVNode(_component_q_tooltip, {
               anchor: "bottom middle",
@@ -9049,16 +9168,19 @@
           label: "Selecionadas",
           quantity: $data.selectedList.length
         }, null, 8 /* PROPS */, ["quantity"]),
-        vue.createVNode(_component_qas_search_box, vue.mergeProps($options.searchBoxProps, {
+        vue.createVNode(_component_qas_search_box, vue.mergeProps({
+          results: $data.secondResults,
+          "onUpdate:results": _cache[3] || (_cache[3] = $event => (($data.secondResults) = $event))
+        }, $options.searchBoxProps, {
           "empty-list-height": "300px",
-          "form-mode": "",
           label: "Selecionadas",
-          list: $data.selectedList
+          list: $data.selectedList,
+          outlined: ""
         }), {
-          default: vue.withCtx(({ results }) => [
+          default: vue.withCtx(() => [
             vue.createVNode(_component_q_list, { separator: "" }, {
               default: vue.withCtx(() => [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(results, (item, index) => {
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.secondResults, (item, index) => {
                   return (vue.openBlock(), vue.createBlock(_component_q_item, {
                     key: index,
                     class: vue.normalizeClass($options.getItemClass(item)),
@@ -9079,11 +9201,11 @@
                   }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "onClick"]))
                 }), 128 /* KEYED_FRAGMENT */))
               ]),
-              _: 2 /* DYNAMIC */
-            }, 1024 /* DYNAMIC_SLOTS */)
+              _: 3 /* FORWARDED */
+            })
           ]),
           _: 3 /* FORWARDED */
-        }, 16 /* FULL_PROPS */, ["list"])
+        }, 16 /* FULL_PROPS */, ["results", "list"])
       ])
     ], 2 /* CLASS */))
   }
@@ -9093,7 +9215,7 @@
 
   var name = "@bildvitta/quasar-ui-asteroid";
   var description = "Asteroid";
-  var version$1 = "3.0.0-alpha.3";
+  var version$1 = "3.0.0-beta.3";
   var author = "Bild & Vitta <systemteam@bild.com.br>";
   var license = "MIT";
   var main = "dist/asteroid.cjs.min.js";
@@ -9174,6 +9296,20 @@
   	vetur: vetur
   };
 
+  var Test = {
+    name: 'test',
+
+    bind (element, { arg: argument, value }) {
+      if (element && argument) {
+        element.dataset.test = argument;
+      }
+
+      if (element && value) {
+        element.dataset.testKey = value;
+      }
+    }
+  };
+
   const version = packageInfo.version;
 
   function install (app) {
@@ -9235,8 +9371,11 @@
     app.config.globalProperties.$qas = {
       dialog: Dialog,
       error: NotifyError,
-      success: NotifySuccess
+      success: NotifySuccess,
+      screen: Screen()
     };
+
+    app.directive(Test.name, Test);
   }
 
   var VuePlugin = /*#__PURE__*/Object.freeze({
@@ -9293,6 +9432,7 @@
     Dialog: Dialog,
     NotifyError: NotifyError,
     NotifySuccess: NotifySuccess,
+    Screen: Screen,
     install: install
   });