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

package/dist/asteroid.umd.js

@@ -1,19 +1,18 @@
 /*!
-* @bildvitta/quasar-ui-asteroid v3.0.0-alpha.2
+* @bildvitta/quasar-ui-asteroid v3.0.0-beta.2
 * (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('humps'), require('vue'), 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(['humps', 'vue', '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.humps, global.Vue, global.dateFns, global.dateFnsLocale, global.Quasar, global._, global.AutoNumeric, global.Pica, global.SignaturePad, global.VueRouter, global.Fuse, global.Sortable, global.VueGoogleMaps));
+})(this, (function (humps, vue, 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);
@@ -342,6 +341,8 @@
 
       mx_updateModels (models) {
         for (const key in models) {
+          if (!models[key]) continue
+
           this.$emit(`update:${key}`, models[key]);
         }
       }
@@ -402,8 +403,6 @@
 
     mixins: [screenMixin],
 
-    inheritAttrs: false,
-
     props: {
       hideLabelOnSmallScreen: {
         type: Boolean
@@ -413,7 +412,11 @@
     computed: {
       attributes () {
         const { label, ...attributes } = this.$attrs;
-        return attributes
+
+        return {
+          ...(this.showLabel && { label }),
+          ...attributes
+        }
       },
 
       hasLabel () {
@@ -441,9 +444,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 +542,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 +568,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 +591,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 +755,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 +1338,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 +1484,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: "",
@@ -2624,12 +2627,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();
       },
@@ -2769,6 +2772,79 @@
     quasar.Notify?.create({ caption, message, type: 'success' });
   };
 
+  var Screen = () => {
+    const screensModel = {
+      isSmall: () => quasar.Screen.xs,
+      isMedium: () => quasar.Screen.sm,
+      isLarge: () => quasar.Screen.gt.sm,
+      untilMedium: () => quasar.Screen.lt.sm,
+      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 +2881,11 @@
 
       deleting: {
         type: Boolean
+      },
+
+      useAutoDeleteRoute: {
+        default: true,
+        type: Boolean
       }
     },
 
@@ -2852,9 +2933,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 +2958,10 @@
         }
       },
 
+      getRoutesToBeDeletedById (routes = []) {
+        return routes.filter(({ params }) => params.id === this.id)
+      },
+
       createDeleteSuccessEvent () {
         const event = new CustomEvent('delete-success', {
           bubbles: false,
@@ -3023,7 +3120,7 @@
     props: {
       modelValue: {
         default: '',
-        type: String
+        type: [String, Number]
       },
 
       unmaskedValue: {
@@ -3034,11 +3131,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 +3188,11 @@
         },
 
         set (value) {
+          if (this.removeErrorOnType && this.error) {
+            this.errorData = false;
+            this.errorMessageData = '';
+          }
+
           return this.$emit('update:modelValue', value)
         }
       }
@@ -3083,6 +3205,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 +3252,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 +3268,7 @@
             ])
           }
         })
-      ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "mask", "outlined", "unmasked-value"])
+      ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "error", "error-message", "mask", "outlined", "unmasked-value"])
     ]))
   }
 
@@ -3387,9 +3527,8 @@
     mixins: [passwordMixin],
 
     props: {
-      useStrengthChecker: {
-        type: Boolean,
-        default: true
+      hideStrengthChecker: {
+        type: Boolean
       },
 
       iconColor: {
@@ -3407,7 +3546,6 @@
 
     data () {
       return {
-        key: 'error',
         toggleType: true
       }
     },
@@ -3437,15 +3575,6 @@
       }
     },
 
-    watch: {
-      modelValue () {
-        if (this.$attrs.error) {
-          this.$attrs.error = false;
-          this.$attrs.errorMessage = '';
-        }
-      }
-    },
-
     methods: {
       toggle () {
         this.toggleType = !this.toggleType;
@@ -3458,39 +3587,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 +3822,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
           });
@@ -4166,7 +4299,14 @@
       QasSignaturePad: script$p
     },
 
+    mixins: [screenMixin],
+
     props: {
+      dialogProps: {
+        type: Object,
+        default: () => ({})
+      },
+
       uploadLabel: {
         default: '',
         type: String
@@ -4215,6 +4355,32 @@
 
       headerClass () {
         return `q-pa-${this.readonly ? 'md' : 'sm'}`
+      },
+
+      defaultDialogProps () {
+        return {
+          maxWidth: '620px',
+          ...this.dialogProps
+        }
+      },
+
+      signaturePadWidth () {
+        const sizes = {
+          [this.mx_isSmall]: { width: '100%' },
+          [this.mx_isMedium]: { width: '570px' },
+          [this.mx_isLarge]: { width: '350px' }
+        };
+        return sizes.true
+      },
+
+      signaturePadHeight () {
+        const sizes = {
+          [this.mx_isSmall]: '250',
+          [this.mx_isMedium]: '400',
+          [this.mx_isLarge]: '250'
+        };
+
+        return sizes.true
       }
     },
 
@@ -4314,20 +4480,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 +4518,7 @@
           }, null, 8 /* PROPS */, ["onClick"])
         ]),
         _: 1 /* STABLE */
-      }, 8 /* PROPS */, ["modelValue"])
+      }, 16 /* FULL_PROPS */, ["modelValue"])
     ]))
   }
 
@@ -4412,7 +4582,6 @@
           prefix,
           type,
           mask,
-          pattern,
           maxFiles,
           searchable,
           gmt
@@ -4463,7 +4632,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' },
@@ -4608,6 +4777,10 @@
       url: {
         default: '',
         type: String
+      },
+
+      forceRefetch: {
+        type: Boolean
       }
     },
 
@@ -4737,7 +4910,7 @@
       },
 
       async fetchFilters () {
-        if (this.hasFields || !this.useFilterButton) {
+        if (!this.forceRefetch && (this.hasFields || !this.useFilterButton)) {
           return null
         }
 
@@ -4903,7 +5076,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 +5130,7 @@
                                     }))
                             ]),
                             _: 1 /* STABLE */
-                          }, 8 /* PROPS */, ["onBeforeShow"])
+                          })
                         ]),
                         _: 1 /* STABLE */
                       }, 8 /* PROPS */, ["color", "label"]))
@@ -5105,28 +5278,6 @@
   script$l.render = render$l;
   script$l.__file = "src/components/form-generator/QasFormGenerator.vue";
 
-  const history$1 = vue.reactive({ hasPreviousRoute: false, list: [] });
-
-  function getPreviousRoute (currentRoute) {
-    const index = lodashEs.findLastIndex(history$1.list, item => item.name === currentRoute.name);
-
-    if (~index) {
-      history$1.list.splice(index, 1);
-    }
-
-    history$1.hasPreviousRoute = history$1.list.length > 1;
-    return history$1.list[history$1.list.length - 1]
-  }
-
-  function addRoute (route) {
-    const routeExistsInList = history$1.list?.[history$1.list?.length - 1]?.name === route.name;
-
-    if (routeExistsInList) return
-
-    history$1.list.push(route);
-    history$1.hasPreviousRoute = history$1.list.length > 1;
-  }
-
   var script$k = {
     name: 'QasFormView',
 
@@ -5145,7 +5296,7 @@
 
       cancelRoute: {
         default: '',
-        type: [Boolean, Object, String]
+        type: [Boolean, Object, String, Function]
       },
 
       customId: {
@@ -5264,10 +5415,6 @@
         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 +5483,7 @@
           this.mx_updateModels({
             errors: errors,
             fields: this.mx_fields,
-            metadata: metadata
+            metadata
           });
 
           if (result) {
@@ -5365,9 +5512,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 +5529,8 @@
       handleDialog (next) {
         this.openDialog();
 
+        const { addRoute } = useHistory();
+
         this.defaultDialogProps.ok.onClick = () => addRoute(this.$route);
         this.defaultDialogProps.cancel.onClick = next;
       },
@@ -5462,7 +5613,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 +5687,7 @@
         }, 8 /* PROPS */, ["showing"])
       ]),
       _: 3 /* FORWARDED */
-    }))
+    }, 8 /* PROPS */, ["class"]))
   }
 
   script$k.render = render$k;
@@ -6524,7 +6677,10 @@
       QasBtn: script$K,
       QasFormGenerator: script$l,
       QasInput: script$u,
-      QasLabel: script$h
+      QasLabel: script$h,
+
+      // vue
+      TransitionGroup: vue.TransitionGroup
     },
 
     props: {
@@ -6688,6 +6844,16 @@
 
       componentTag () {
         return this.useAnimation ? 'transition-group' : 'div'
+      },
+
+      componentProps () {
+        if (!this.useAnimation) return {}
+
+        return {
+          tag: 'div',
+          enterActiveClass: 'animated slideInDown',
+          leaveActiveClass: 'animated slideOutUp'
+        }
       }
     },
 
@@ -6772,23 +6938,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 +6978,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 +7101,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 +7110,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 +7119,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 +7134,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 +7170,7 @@
 
     computed: {
       hasPreviousRoute () {
-        return history$1.hasPreviousRoute
+        return hasPreviousRoute.value
       },
 
       transformedBreadcrumbs () {
@@ -7448,6 +7605,7 @@
           this.fuse = new Fuse__default["default"](value, this.defaultFuseOptions);
 
           this.setResults(this.search);
+          this.updateResultsModel(value);
         },
 
         deep: true
@@ -7464,7 +7622,7 @@
 
       searchResults: {
         handler (value) {
-          this.$emit('update:results', value.map(result => result.item || result));
+          this.updateResultsModel(value);
         },
         immediate: true
       }
@@ -7481,6 +7639,10 @@
         this.searchResults = value
           ? this.fuse.search(value)
           : this.list;
+      },
+
+      updateResultsModel (value) {
+        this.$emit('update:results', value.map(result => result.item || result));
       }
     }
   };
@@ -7838,15 +8000,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: {
@@ -7874,7 +8038,7 @@
         return this.values.includes(item.value) ? this.remove(item) : this.add(item)
       },
 
-      handleOptions () {
+      handleList () {
         if (this.modelValue.length) {
           return this.sortList()
         }
@@ -7905,8 +8069,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) {
@@ -8433,8 +8597,8 @@
       },
 
       getFullTableWidth () {
-        const tableElemet = this.getTableElement();
-        return tableElemet?.getBoundingClientRect?.()?.width
+        const tableElement = this.getTableElement();
+        return tableElement?.getBoundingClientRect?.()?.width
       },
 
       getContainerTableWidth () {
@@ -8827,7 +8991,9 @@
         firstQueue: [],
         optionsList: [],
         secondQueue: [],
-        selectedList: []
+        selectedList: [],
+        firstResults: [],
+        secondResults: []
       }
     },
 
@@ -8965,13 +9131,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 +9160,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 +9177,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 +9198,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 +9217,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 +9250,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 +9264,7 @@
 
   var name = "@bildvitta/quasar-ui-asteroid";
   var description = "Asteroid";
-  var version$1 = "3.0.0-alpha.2";
+  var version$1 = "3.0.0-beta.2";
   var author = "Bild & Vitta <systemteam@bild.com.br>";
   var license = "MIT";
   var main = "dist/asteroid.cjs.min.js";
@@ -9174,6 +9345,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 +9420,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 +9481,7 @@
     Dialog: Dialog,
     NotifyError: NotifyError,
     NotifySuccess: NotifySuccess,
+    Screen: Screen,
     install: install
   });