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

package/dist/asteroid.cjs.js

@@ -1,5 +1,5 @@
 /*!
-* @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.
 */
@@ -12,10 +12,9 @@ var vue = require('vue');
 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,7 +25,6 @@ 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);
@@ -355,6 +353,8 @@ var viewMixin = {
 
     mx_updateModels (models) {
       for (const key in models) {
+        if (!models[key]) continue
+
         this.$emit(`update:${key}`, models[key]);
       }
     }
@@ -415,8 +415,6 @@ var script$K = {
 
   mixins: [screenMixin],
 
-  inheritAttrs: false,
-
   props: {
     hideLabelOnSmallScreen: {
       type: Boolean
@@ -426,7 +424,11 @@ var script$K = {
   computed: {
     attributes () {
       const { label, ...attributes } = this.$attrs;
-      return attributes
+
+      return {
+        ...(this.showLabel && { label }),
+        ...attributes
+      }
     },
 
     hasLabel () {
@@ -454,9 +456,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 +554,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 +580,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 +603,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 +767,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 +1350,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 +1496,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: "",
@@ -2637,12 +2639,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();
     },
@@ -2782,6 +2784,79 @@ var NotifySuccess = (message, caption) => {
   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',
 
@@ -2818,6 +2893,11 @@ var script$w = {
 
     deleting: {
       type: Boolean
+    },
+
+    useAutoDeleteRoute: {
+      default: true,
+      type: Boolean
     }
   },
 
@@ -2865,9 +2945,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 +2970,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 +3132,7 @@ var script$u = {
   props: {
     modelValue: {
       default: '',
-      type: String
+      type: [String, Number]
     },
 
     unmaskedValue: {
@@ -3047,11 +3143,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 +3200,11 @@ var script$u = {
       },
 
       set (value) {
+        if (this.removeErrorOnType && this.error) {
+          this.errorData = false;
+          this.errorMessageData = '';
+        }
+
         return this.$emit('update:modelValue', value)
       }
     }
@@ -3096,6 +3217,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 +3264,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 +3280,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"])
   ]))
 }
 
@@ -3400,9 +3539,8 @@ var script$r = {
   mixins: [passwordMixin],
 
   props: {
-    useStrengthChecker: {
-      type: Boolean,
-      default: true
+    hideStrengthChecker: {
+      type: Boolean
     },
 
     iconColor: {
@@ -3420,7 +3558,6 @@ var script$r = {
 
   data () {
     return {
-      key: 'error',
       toggleType: true
     }
   },
@@ -3450,15 +3587,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 +3599,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 +3834,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
         });
@@ -4179,7 +4311,14 @@ var script$o = {
     QasSignaturePad: script$p
   },
 
+  mixins: [screenMixin],
+
   props: {
+    dialogProps: {
+      type: Object,
+      default: () => ({})
+    },
+
     uploadLabel: {
       default: '',
       type: String
@@ -4228,6 +4367,32 @@ var script$o = {
 
     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
     }
   },
 
@@ -4327,20 +4492,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 +4530,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 +4594,6 @@ var script$n = {
         prefix,
         type,
         mask,
-        pattern,
         maxFiles,
         searchable,
         gmt
@@ -4476,7 +4644,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' },
@@ -4621,6 +4789,10 @@ var script$m = {
     url: {
       default: '',
       type: String
+    },
+
+    forceRefetch: {
+      type: Boolean
     }
   },
 
@@ -4750,7 +4922,7 @@ var script$m = {
     },
 
     async fetchFilters () {
-      if (this.hasFields || !this.useFilterButton) {
+      if (!this.forceRefetch && (this.hasFields || !this.useFilterButton)) {
         return null
       }
 
@@ -4916,7 +5088,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 +5142,7 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
                                   }))
                           ]),
                           _: 1 /* STABLE */
-                        }, 8 /* PROPS */, ["onBeforeShow"])
+                        })
                       ]),
                       _: 1 /* STABLE */
                     }, 8 /* PROPS */, ["color", "label"]))
@@ -5118,28 +5290,6 @@ 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: [] });
-
-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',
 
@@ -5158,7 +5308,7 @@ var script$k = {
 
     cancelRoute: {
       default: '',
-      type: [Boolean, Object, String]
+      type: [Boolean, Object, String, Function]
     },
 
     customId: {
@@ -5277,10 +5427,6 @@ var script$k = {
       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 +5495,7 @@ var script$k = {
         this.mx_updateModels({
           errors: errors,
           fields: this.mx_fields,
-          metadata: metadata
+          metadata
         });
 
         if (result) {
@@ -5378,9 +5524,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 +5541,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 +5625,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 +5699,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8 /* PROPS */, ["showing"])
     ]),
     _: 3 /* FORWARDED */
-  }))
+  }, 8 /* PROPS */, ["class"]))
 }
 
 script$k.render = render$k;
@@ -6537,7 +6689,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 +6856,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 +6950,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 +6990,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 +7113,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 +7122,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 +7131,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 +7146,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 +7182,7 @@ var script$b = {
 
   computed: {
     hasPreviousRoute () {
-      return history$1.hasPreviousRoute
+      return hasPreviousRoute.value
     },
 
     transformedBreadcrumbs () {
@@ -7461,6 +7617,7 @@ var script$8 = {
         this.fuse = new Fuse__default["default"](value, this.defaultFuseOptions);
 
         this.setResults(this.search);
+        this.updateResultsModel(value);
       },
 
       deep: true
@@ -7477,7 +7634,7 @@ var script$8 = {
 
     searchResults: {
       handler (value) {
-        this.$emit('update:results', value.map(result => result.item || result));
+        this.updateResultsModel(value);
       },
       immediate: true
     }
@@ -7494,6 +7651,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));
     }
   }
 };
@@ -7851,15 +8012,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: {
@@ -7887,7 +8050,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 +8081,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) {
@@ -8446,8 +8609,8 @@ var script$3 = {
     },
 
     getFullTableWidth () {
-      const tableElemet = this.getTableElement();
-      return tableElemet?.getBoundingClientRect?.()?.width
+      const tableElement = this.getTableElement();
+      return tableElement?.getBoundingClientRect?.()?.width
     },
 
     getContainerTableWidth () {
@@ -8840,7 +9003,9 @@ var script = {
       firstQueue: [],
       optionsList: [],
       secondQueue: [],
-      selectedList: []
+      selectedList: [],
+      firstResults: [],
+      secondResults: []
     }
   },
 
@@ -8978,13 +9143,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 +9172,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 +9189,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 +9210,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 +9229,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 +9262,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 +9276,7 @@ script.__file = "src/components/transfer/QasTransfer.vue";
 
 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";
@@ -9187,6 +9357,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 +9432,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 +9490,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;