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

package/dist/asteroid.cjs.js

@@ -1,5 +1,5 @@
 /*!
-* @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.
 */
@@ -7,15 +7,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var humps = require('humps');
 var vue = require('vue');
+var humps = require('humps');
 var dateFns = require('date-fns');
 var locale = require('date-fns/locale');
 var quasar = require('quasar');
+var lodashEs = require('lodash-es');
 var AutoNumeric = require('autonumeric');
 var Pica = require('pica');
-var api = require('axios');
-var lodashEs = require('lodash-es');
 var SignaturePad = require('signature_pad');
 var vueRouter = require('vue-router');
 var Fuse = require('fuse.js');
@@ -26,346 +25,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 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',
@@ -385,7 +52,7 @@ var script$L = {
       return [
         `justify-${this.align}`,
         `q-col-gutter-${this.gutter}`,
-        this.mx_isSmall ? 'column reverse' : 'row'
+        this.$qas.screen.isSmall ? 'column reverse' : 'row'
       ]
     }
   }
@@ -413,28 +80,31 @@ script$L.__file = "src/components/actions/QasActions.vue";
 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 () {
@@ -454,9 +124,7 @@ function render$K(_ctx, _cache, $props, $setup, $data, $options) {
   }, $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 */
@@ -554,10 +222,10 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
     "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, {
@@ -580,8 +248,8 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
                           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 */)
                           ])
                         ]),
@@ -603,7 +271,10 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
                       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 */)
                           ])
                         ]),
@@ -764,11 +435,10 @@ function constructObject (name, object) {
 }
 
 /**
- * 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
@@ -1348,7 +1018,7 @@ const _hoisted_10$1 = { class: "q-pa-lg text-center" };
 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");
@@ -1494,7 +1164,7 @@ function render$F(_ctx, _cache, $props, $setup, $data, $options) {
                               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: "",
@@ -1529,8 +1199,6 @@ script$F.__file = "src/components/app-bar/QasAppBar.vue";
 var script$E = {
   name: 'QasAppMenu',
 
-  mixins: [screenMixin],
-
   props: {
     items: {
       default: () => [],
@@ -1632,7 +1300,7 @@ var script$E = {
     },
 
     beforeHide () {
-      if (this.mx_isLarge) {
+      if (this.$qas.screen.isLarge) {
         this.model = true;
         this.miniMode = !this.miniMode;
       }
@@ -2531,8 +2199,6 @@ var script$x = {
     QasActions: script$L
   },
 
-  mixins: [screenMixin],
-
   props: {
     actionsProps: {
       default: () => ({}),
@@ -2615,8 +2281,8 @@ var script$x = {
 
     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')
       }
     },
 
@@ -2637,12 +2303,12 @@ var script$x = {
       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();
     },
@@ -2778,9 +2444,87 @@ quasar.Notify.registerType('success', {
   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',
@@ -2818,6 +2562,11 @@ var script$w = {
 
     deleting: {
       type: Boolean
+    },
+
+    useAutoDeleteRoute: {
+      default: true,
+      type: Boolean
     }
   },
 
@@ -2865,9 +2614,21 @@ var script$w = {
       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.');
@@ -2878,6 +2639,10 @@ var script$w = {
       }
     },
 
+    getRoutesToBeDeletedById (routes = []) {
+      return routes.filter(({ params }) => params.id === this.id)
+    },
+
     createDeleteSuccessEvent () {
       const event = new CustomEvent('delete-success', {
         bubbles: false,
@@ -3036,7 +2801,7 @@ var script$u = {
   props: {
     modelValue: {
       default: '',
-      type: String
+      type: [String, Number]
     },
 
     unmaskedValue: {
@@ -3047,11 +2812,31 @@ var script$u = {
     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
@@ -3084,6 +2869,11 @@ var script$u = {
       },
 
       set (value) {
+        if (this.removeErrorOnType && this.error) {
+          this.errorData = false;
+          this.errorMessageData = '';
+        }
+
         return this.$emit('update:modelValue', value)
       }
     }
@@ -3096,6 +2886,22 @@ var script$u = {
       requestAnimationFrame(() => {
         input.selectionStart = input.value ? input.value.length : '';
       });
+    },
+
+    error: {
+      handler (value) {
+        this.errorData = value;
+      },
+
+      immediate: true
+    },
+
+    errorMessage: {
+      handler (value) {
+        this.errorMessageData = value;
+      },
+
+      immediate: true
     }
   },
 
@@ -3127,8 +2933,10 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
       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
@@ -3141,7 +2949,7 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         }
       })
-    ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "mask", "outlined", "unmasked-value"])
+    ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "error", "error-message", "mask", "outlined", "unmasked-value"])
   ]))
 }
 
@@ -3296,6 +3104,88 @@ function render$t(_ctx, _cache, $props, $setup, $data, $options) {
 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',
 
@@ -3400,9 +3290,8 @@ var script$r = {
   mixins: [passwordMixin],
 
   props: {
-    useStrengthChecker: {
-      type: Boolean,
-      default: true
+    hideStrengthChecker: {
+      type: Boolean
     },
 
     iconColor: {
@@ -3420,7 +3309,6 @@ var script$r = {
 
   data () {
     return {
-      key: 'error',
       toggleType: true
     }
   },
@@ -3450,15 +3338,6 @@ var script$r = {
     }
   },
 
-  watch: {
-    modelValue () {
-      if (this.$attrs.error) {
-        this.$attrs.error = false;
-        this.$attrs.errorMessage = '';
-      }
-    }
-  },
-
   methods: {
     toggle () {
       this.toggleType = !this.toggleType;
@@ -3471,39 +3350,43 @@ 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.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;
@@ -3702,7 +3585,7 @@ var script$q = {
       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
         });
@@ -4180,6 +4063,11 @@ var script$o = {
   },
 
   props: {
+    dialogProps: {
+      type: Object,
+      default: () => ({})
+    },
+
     uploadLabel: {
       default: '',
       type: String
@@ -4228,6 +4116,32 @@ var script$o = {
 
     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
     }
   },
 
@@ -4327,20 +4241,24 @@ function render$o(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 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, {
@@ -4361,7 +4279,7 @@ function render$o(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8 /* PROPS */, ["onClick"])
       ]),
       _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["modelValue"])
+    }, 16 /* FULL_PROPS */, ["modelValue"])
   ]))
 }
 
@@ -4425,7 +4343,6 @@ var script$n = {
         prefix,
         type,
         mask,
-        pattern,
         maxFiles,
         searchable,
         gmt
@@ -4476,7 +4393,7 @@ var script$n = {
         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' },
@@ -4578,6 +4495,15 @@ function render$n(_ctx, _cache, $props, $setup, $data, $options) {
 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',
 
@@ -4621,6 +4547,10 @@ var script$m = {
     url: {
       default: '',
       type: String
+    },
+
+    forceRefetch: {
+      type: Boolean
     }
   },
 
@@ -4750,7 +4680,7 @@ var script$m = {
     },
 
     async fetchFilters () {
-      if (this.hasFields || !this.useFilterButton) {
+      if (!this.forceRefetch && (this.hasFields || !this.useFilterButton)) {
         return null
       }
 
@@ -4916,7 +4846,7 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
                       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, [
@@ -4970,7 +4900,7 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
                                   }))
                           ]),
                           _: 1 /* STABLE */
-                        }, 8 /* PROPS */, ["onBeforeShow"])
+                        })
                       ]),
                       _: 1 /* STABLE */
                     }, 8 /* PROPS */, ["color", "label"]))
@@ -5008,8 +4938,95 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-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',
@@ -5118,27 +5135,123 @@ function render$l(_ctx, _cache, $props, $setup, $data, $options) {
 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',
@@ -5148,7 +5261,7 @@ var script$k = {
     QasDialog: script$x
   },
 
-  mixins: [viewMixin, screenMixin],
+  mixins: [viewMixin],
 
   props: {
     cancelButton: {
@@ -5158,7 +5271,7 @@ var script$k = {
 
     cancelRoute: {
       default: '',
-      type: [Boolean, Object, String]
+      type: [Boolean, Object, String, Function]
     },
 
     customId: {
@@ -5242,7 +5355,7 @@ var script$k = {
 
   computed: {
     cancelButtonClass () {
-      return this.mx_isSmall && 'order-last'
+      return this.$qas.screen.isSmall && 'order-last'
     },
 
     fetchURL () {
@@ -5270,17 +5383,13 @@ var script$k = {
     },
 
     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])
     }
@@ -5349,7 +5458,7 @@ var script$k = {
         this.mx_updateModels({
           errors: errors,
           fields: this.mx_fields,
-          metadata: metadata
+          metadata
         });
 
         if (result) {
@@ -5378,9 +5487,11 @@ var script$k = {
     },
 
     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)
       }
 
@@ -5393,6 +5504,8 @@ var script$k = {
     handleDialog (next) {
       this.openDialog();
 
+      const { addRoute } = useHistory();
+
       this.defaultDialogProps.ok.onClick = () => addRoute(this.$route);
       this.defaultDialogProps.cancel.onClick = next;
     },
@@ -5475,7 +5588,9 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
   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, [
@@ -5547,7 +5662,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8 /* PROPS */, ["showing"])
     ]),
     _: 3 /* FORWARDED */
-  }))
+  }, 8 /* PROPS */, ["class"]))
 }
 
 script$k.render = render$k;
@@ -5556,8 +5671,6 @@ script$k.__file = "src/components/form-view/QasFormView.vue";
 var script$j = {
   name: 'QasGallery',
 
-  mixins: [screenMixin],
-
   props: {
     carouselNextIcon: {
       type: String,
@@ -5614,13 +5727,13 @@ var script$j = {
         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 () {
@@ -5755,9 +5868,9 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
               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,
@@ -5773,7 +5886,7 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
                     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: "",
@@ -6537,7 +6650,10 @@ var script$c = {
     QasBtn: script$K,
     QasFormGenerator: script$l,
     QasInput: script$u,
-    QasLabel: script$h
+    QasLabel: script$h,
+
+    // vue
+    TransitionGroup: vue.TransitionGroup
   },
 
   props: {
@@ -6701,6 +6817,16 @@ var script$c = {
 
     componentTag () {
       return this.useAnimation ? 'transition-group' : 'div'
+    },
+
+    componentProps () {
+      if (!this.useAnimation) return {}
+
+      return {
+        tag: 'div',
+        enterActiveClass: 'animated slideInDown',
+        leaveActiveClass: 'animated slideOutUp'
+      }
     }
   },
 
@@ -6785,23 +6911,24 @@ var script$c = {
 
 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"
 };
@@ -6824,134 +6951,122 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
           }, 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", {
@@ -6959,7 +7074,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
                 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": "",
@@ -6968,7 +7083,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
                     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: "",
@@ -6977,9 +7092,9 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
                   })
                 ])
               ]))
-            : (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()))
@@ -6992,13 +7107,15 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
               ]))
         ])
       ])
-    ])
+    ], 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',
 
@@ -7026,7 +7143,7 @@ var script$b = {
 
   computed: {
     hasPreviousRoute () {
-      return history$1.hasPreviousRoute
+      return hasPreviousRoute.value
     },
 
     transformedBreadcrumbs () {
@@ -7143,8 +7260,6 @@ var script$a = {
     QasGridGenerator: script$i
   },
 
-  mixins: [screenMixin],
-
   props: {
     columns: {
       type: Object,
@@ -7185,7 +7300,7 @@ var script$a = {
 
   computed: {
     directionClasses () {
-      return this.mx_untilMedium ? 'col' : 'row items-center'
+      return this.$qas.screen.untilMedium ? 'col' : 'row items-center'
     },
 
     userAvatarImage () {
@@ -7193,7 +7308,7 @@ var script$a = {
     },
 
     avatarSize () {
-      return this.mx_isSmall ? '145px' : '188px'
+      return this.$qas.screen.isSmall ? '145px' : '188px'
     }
   },
 
@@ -7461,6 +7576,7 @@ var script$8 = {
         this.fuse = new Fuse__default["default"](value, this.defaultFuseOptions);
 
         this.setResults(this.search);
+        this.updateResultsModel(value);
       },
 
       deep: true
@@ -7477,7 +7593,7 @@ var script$8 = {
 
     searchResults: {
       handler (value) {
-        this.$emit('update:results', value.map(result => result.item || result));
+        this.updateResultsModel(value);
       },
       immediate: true
     }
@@ -7494,6 +7610,10 @@ var script$8 = {
       this.searchResults = value
         ? this.fuse.search(value)
         : this.list;
+    },
+
+    updateResultsModel (value) {
+      this.$emit('update:results', value.map(result => result.item || result));
     }
   }
 };
@@ -7769,8 +7889,6 @@ var script$6 = {
     QasSearchBox: script$8
   },
 
-  mixins: [screenMixin],
-
   props: {
     deleteOnly: {
       type: Boolean
@@ -7851,15 +7969,17 @@ var script$6 = {
       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: {
@@ -7874,9 +7994,9 @@ var script$6 = {
       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'
@@ -7887,7 +8007,7 @@ var script$6 = {
       return this.values.includes(item.value) ? this.remove(item) : this.add(item)
     },
 
-    handleOptions () {
+    handleList () {
       if (this.modelValue.length) {
         return this.sortList()
       }
@@ -7918,8 +8038,8 @@ var script$6 = {
 
     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) {
@@ -8277,8 +8397,6 @@ script$4.__file = "src/components/sortable/QasSortable.vue";
 var script$3 = {
   name: 'QasTableGenerator',
 
-  mixins: [screenMixin],
-
   props: {
     columns: {
       default: () => [],
@@ -8405,7 +8523,7 @@ var script$3 = {
     },
 
     tableClass () {
-      return this.mx_isSmall && 'qas-table-generator--mobile'
+      return this.$qas.screen.isSmall && 'qas-table-generator--mobile'
     },
 
     hasScrollOnGrab () {
@@ -8446,8 +8564,8 @@ var script$3 = {
     },
 
     getFullTableWidth () {
-      const tableElemet = this.getTableElement();
-      return tableElemet?.getBoundingClientRect?.()?.width
+      const tableElement = this.getTableElement();
+      return tableElement?.getBoundingClientRect?.()?.width
     },
 
     getContainerTableWidth () {
@@ -8646,8 +8764,6 @@ var script$1 = {
     QasDialog: script$x
   },
 
-  mixins: [screenMixin],
-
   props: {
     dialogProps: {
       type: Object,
@@ -8687,7 +8803,7 @@ var script$1 = {
 
   computed: {
     truncateTextClass () {
-      return (this.isTruncated || this.mx_isSmall) && 'ellipsis q-pr-sm'
+      return (this.isTruncated || this.$qas.screen.isSmall) && 'ellipsis q-pr-sm'
     },
 
     isTruncated () {
@@ -8789,8 +8905,6 @@ var script = {
     QasSearchBox: script$8
   },
 
-  mixins: [screenMixin],
-
   props: {
     emitValue: {
       type: Boolean
@@ -8840,21 +8954,23 @@ var script = {
       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 () {
@@ -8978,13 +9094,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         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)),
@@ -9005,11 +9123,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 }, 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])
@@ -9022,7 +9140,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           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",
@@ -9043,7 +9161,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             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",
@@ -9062,16 +9180,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         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)),
@@ -9092,11 +9213,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 }, 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 */))
 }
@@ -9106,7 +9227,7 @@ script.__file = "src/components/transfer/QasTransfer.vue";
 
 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";
@@ -9187,6 +9308,20 @@ var packageInfo = {
 	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) {
@@ -9248,8 +9383,11 @@ function install (app) {
   app.config.globalProperties.$qas = {
     dialog: Dialog,
     error: NotifyError,
-    success: NotifySuccess
+    success: NotifySuccess,
+    screen: Screen()
   };
+
+  app.directive(Test.name, Test);
 }
 
 exports.Dialog = Dialog;
@@ -9303,5 +9441,6 @@ exports.QasTabsGenerator = script$2;
 exports.QasTextTruncate = script$1;
 exports.QasTransfer = script;
 exports.QasUploader = script$q;
+exports.Screen = Screen;
 exports.install = install;
 exports.version = version;