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

package/dist/asteroid.umd.js

@@ -1,13 +1,13 @@
 /*!
-* @bildvitta/quasar-ui-asteroid v3.0.0-beta.2
+* @bildvitta/quasar-ui-asteroid v3.0.0-beta.3
 * (c) 2022 Bild & Vitta <systemteam@bild.com.br>
 * Released under the MIT License.
 */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('humps'), require('vue'), require('date-fns'), require('date-fns/locale'), require('quasar'), require('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';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue'), require('humps'), require('date-fns'), require('date-fns/locale'), require('quasar'), require('lodash-es'), require('autonumeric'), require('pica'), require('signature_pad'), require('vue-router'), require('fuse.js'), require('sortablejs'), require('@fawmi/vue-google-maps')) :
+  typeof define === 'function' && define.amd ? define(['vue', 'humps', 'date-fns', 'date-fns/locale', 'quasar', 'lodash-es', 'autonumeric', 'pica', 'signature_pad', 'vue-router', 'fuse.js', 'sortablejs', '@fawmi/vue-google-maps'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global["{{ umdExportName }}"] = factory(global.Vue, global.humps, global.dateFns, global.dateFnsLocale, global.Quasar, global._, global.AutoNumeric, global.Pica, global.SignaturePad, global.VueRouter, global.Fuse, global.Sortable, global.VueGoogleMaps));
+})(this, (function (vue, humps, dateFns, locale, quasar, lodashEs, AutoNumeric, Pica, SignaturePad, vueRouter, Fuse, Sortable, VueGoogleMaps) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -18,342 +18,9 @@
   var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
   var VueGoogleMaps__default = /*#__PURE__*/_interopDefaultLegacy(VueGoogleMaps);
 
-  var contextMixin = {
-    computed: {
-      mx_context () {
-        const { limit, ordering, page, search, ...filters } = this.$route.query;
-        return { filters, limit, ordering, page: page ? parseInt(page) : 1, search }
-      }
-    }
-  };
-
-  const irregularClasses = ['col', 'col-auto', 'fit'];
-
-  var generatorMixin = {
-    props: {
-      columns: {
-        default: () => [],
-        type: [Array, String, Object]
-      },
-
-      fields: {
-        default: () => ({}),
-        type: Object
-      },
-
-      gutter: {
-        default: 'md',
-        type: [String, Boolean],
-        validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
-      }
-    },
-
-    computed: {
-      mx_classes () {
-        const classes = ['row'];
-
-        if (this.gutter) {
-          classes.push(`q-col-gutter-${this.gutter}`);
-        }
-
-        return classes
-      }
-    },
-
-    methods: {
-      mx_getBreakpoint (columns) {
-        const classes = [];
-        const profiles = { col: 'col', xs: 'col-xs', sm: 'col-sm', md: 'col-md', lg: 'col-lg', xl: 'col-xl' };
-        const { fieldProps, classes: renamedClasses, ...formattedColumns } = columns || {};
-
-        for (const key in formattedColumns) {
-          const value = formattedColumns[key];
-          classes.push(irregularClasses.includes(value) ? value : `${profiles[key]}-${value}`);
-        }
-
-        return [...classes, renamedClasses]
-      },
-
-      mx_getFieldClass (index, isGridGenerator) {
-        if (typeof this.columns === 'string') {
-          return irregularClasses.includes(this.columns) ? this.columns : `col-${this.columns}`
-        }
-
-        return Array.isArray(this.columns)
-          ? this.mx_handleColumnsByIndex(index, isGridGenerator)
-          : this.mx_handleColumnsByField(index, isGridGenerator)
-      },
-
-      mx_handleColumnsByField (index, isGridGenerator) {
-        if (!this.columns[index]) {
-          return this.mx_setDefaultColumnClass(isGridGenerator)
-        }
-
-        return this.mx_getBreakpoint(this.columns[index])
-      },
-
-      mx_handleColumnsByIndex (index, isGridGenerator) {
-        const fields = isGridGenerator ? this.fields : this.groupedFields.visible;
-
-        if (!Array.isArray(fields)) {
-          index = Object.keys(fields).findIndex(field => field === index);
-        }
-
-        const length = this.columns.length;
-
-        if (!length) {
-          return this.mx_setDefaultColumnClass(isGridGenerator)
-        }
-
-        return this.mx_getBreakpoint(this.columns[index])
-      },
-
-      mx_setDefaultColumnClass (isGridGenerator) {
-        return isGridGenerator ? 'col-6 col-xs-12 col-sm-4' : 'col-6'
-      }
-    }
-  };
-
-  const levels = {
-    0: {
-      color: 'negative',
-      label: 'Muito fraco',
-      progress: 0.05,
-      textClass: 'text-negative'
-    },
-
-    1: {
-      color: 'warning',
-      label: 'Fraco',
-      progress: 0.25,
-      textClass: 'text-warning'
-    },
-
-    2: {
-      color: 'warning',
-      label: 'Bom',
-      progress: 0.5,
-      textClass: 'text-warning'
-    },
-
-    3: {
-      color: 'positive',
-      label: 'Forte',
-      progress: 0.75,
-      textClass: 'text-positive'
-    },
-
-    4: {
-      color: 'positive',
-      label: 'Muito forte',
-      progress: 1,
-      textClass: 'text-positive'
-    }
-  };
-
-  var passwordMixin = {
-    props: {
-      levels: {
-        default: () => levels,
-        type: Object
-      },
-
-      // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength
-      minlength: {
-        default: 8,
-        type: [Number, String]
-      },
-
-      specials: {
-        default: /[!@#$%^&*()_+\-=[\]{}|;:'",<.>/?`~]/g,
-        type: RegExp
-      },
-
-      trackColor: {
-        default: 'blue-grey-1',
-        type: String
-      },
-
-      useLowercase: {
-        default: true,
-        type: Boolean
-      },
-
-      useNumbers: {
-        default: true,
-        type: Boolean
-      },
-
-      useSpecial: {
-        default: true,
-        type: Boolean
-      },
-
-      useUppercase: {
-        default: true,
-        type: Boolean
-      }
-    }
-  };
-
-  var screenMixin = {
-    // TODO: Esses nomes precisam ser alterados para algo mais inteligente.
-
-    computed: {
-      mx_isSmall () {
-        // until 599
-        return this.$q.screen.xs
-      },
-
-      mx_isMedium () {
-        // from 600 until 1023
-        return this.$q.screen.sm
-      },
-
-      mx_isLarge () {
-        // from 1024 until the limit
-        return this.$q.screen.gt.sm
-      },
-
-      mx_untilMedium () {
-        // from 0 until 599
-        return this.$q.screen.lt.sm
-      },
-
-      mx_untilLarge () {
-        // from 0 until 1023
-        return this.$q.screen.lt.md
-      },
-
-      mx_isMobile () {
-        return this.$q.platform.is.mobile
-      }
-    }
-  };
-
-  var viewMixin = {
-    props: {
-      dialog: {
-        type: Boolean
-      },
-
-      entity: {
-        required: true,
-        type: String
-      },
-
-      url: {
-        default: '',
-        type: String
-      },
-
-      fields: {
-        default: () => ({}),
-        type: Object
-      },
-
-      errors: {
-        default: () => ({}),
-        type: Object
-      },
-
-      metadata: {
-        default: () => ({}),
-        type: Object
-      },
-
-      fetching: {
-        type: Boolean
-      }
-    },
-
-    emits: [
-      'update:fields',
-      'update:errors',
-      'update:metadata',
-      'update:fetching'
-    ],
-
-    data () {
-      return {
-        mx_errors: {},
-        mx_fields: {},
-        mx_metadata: {},
-
-        mx_isFetching: false
-      }
-    },
-
-    watch: {
-      mx_isFetching (value) {
-        this.$emit('update:fetching', value);
-      }
-    },
-
-    computed: {
-      mx_componentTag () {
-        return this.dialog ? 'div' : 'q-page'
-      },
-
-      mx_componentClass () {
-        return !this.dialog && 'container spaced'
-      },
-
-      mx_hasFooterSlot () {
-        return !!(this.$slots.footer)
-      },
-
-      mx_hasHeaderSlot () {
-        return !!(this.$slots.header)
-      }
-    },
-
-    methods: {
-      mx_fetchError (error) {
-        const { response } = error;
-        const exception = response?.data?.exception || error.message;
-
-        this.$qas.error('Ops! Erro ao obter os dados.', exception);
-
-        const status = response?.status;
-        const redirect = ({ 403: 'Forbidden', 404: 'NotFound' })[status];
-
-        if (redirect) {
-          this.$router.replace({ name: redirect });
-        }
-      },
-
-      mx_setErrors (errors = {}) {
-        this.mx_errors = vue.markRaw(errors);
-      },
-
-      mx_setFields (fields = {}) {
-        for (const field in fields) {
-          fields[field].name = humps.camelize(fields[field].name);
-        }
-
-        this.mx_fields = vue.markRaw(fields);
-      },
-
-      mx_setMetadata (metadata = {}) {
-        this.mx_metadata = vue.markRaw(metadata);
-      },
-
-      mx_updateModels (models) {
-        for (const key in models) {
-          if (!models[key]) continue
-
-          this.$emit(`update:${key}`, models[key]);
-        }
-      }
-    }
-  };
-
   var script$L = {
     name: 'QasActions',
 
-    mixins: [screenMixin],
-
     props: {
       align: {
         default: 'end',
@@ -373,7 +40,7 @@
         return [
           `justify-${this.align}`,
           `q-col-gutter-${this.gutter}`,
-          this.mx_isSmall ? 'column reverse' : 'row'
+          this.$qas.screen.isSmall ? 'column reverse' : 'row'
         ]
       }
     }
@@ -401,30 +68,31 @@
   var script$K = {
     name: 'QasBtn',
 
-    mixins: [screenMixin],
-
     props: {
       hideLabelOnSmallScreen: {
         type: Boolean
+      },
+
+      label: {
+        type: String,
+        default: ''
       }
     },
 
     computed: {
       attributes () {
-        const { label, ...attributes } = this.$attrs;
-
         return {
-          ...(this.showLabel && { label }),
-          ...attributes
+          ...(this.showLabel && { label: this.label }),
+          ...this.$attrs
         }
       },
 
       hasLabel () {
-        return !!(this.$attrs.label || this.$slots.default)
+        return !!(this.label || this.$slots.default)
       },
 
       showLabel () {
-        return this.hasLabel && !(this.hideLabelOnSmallScreen && this.mx_isSmall)
+        return this.hasLabel && !(this.hideLabelOnSmallScreen && this.$qas.screen.isSmall)
       },
 
       slots () {
@@ -1519,8 +1187,6 @@
   var script$E = {
     name: 'QasAppMenu',
 
-    mixins: [screenMixin],
-
     props: {
       items: {
         default: () => [],
@@ -1622,7 +1288,7 @@
       },
 
       beforeHide () {
-        if (this.mx_isLarge) {
+        if (this.$qas.screen.isLarge) {
           this.model = true;
           this.miniMode = !this.miniMode;
         }
@@ -2521,8 +2187,6 @@
       QasActions: script$L
     },
 
-    mixins: [screenMixin],
-
     props: {
       actionsProps: {
         default: () => ({}),
@@ -2605,8 +2269,8 @@
 
       style () {
         return {
-          maxWidth: this.maxWidth || (this.mx_isSmall ? '' : '600px'),
-          minWidth: this.minWidth || (this.mx_isSmall ? '' : '400px')
+          maxWidth: this.maxWidth || (this.$qas.screen.isSmall ? '' : '600px'),
+          minWidth: this.minWidth || (this.$qas.screen.isSmall ? '' : '400px')
         }
       },
 
@@ -2774,10 +2438,15 @@
 
   var Screen = () => {
     const screensModel = {
+      // até 599px
       isSmall: () => quasar.Screen.xs,
+      // de 600 até 1023px
       isMedium: () => quasar.Screen.sm,
+      // de 600 até 1023px
       isLarge: () => quasar.Screen.gt.sm,
+      // de 0 até 599px
       untilMedium: () => quasar.Screen.lt.sm,
+      // de 0 ate 1023px
       untilLarge: () => quasar.Screen.lt.md,
 
       // Plataforma
@@ -3390,39 +3059,121 @@
       });
     },
 
-    beforeUnmount () {
-      this.autoNumeric.remove();
+    beforeUnmount () {
+      this.autoNumeric.remove();
+    }
+  };
+
+  const _hoisted_1$j = ["id", "model-value", "onInput"];
+
+  function render$t(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_q_field = vue.resolveComponent("q-field");
+
+    return (vue.openBlock(), vue.createBlock(_component_q_field, {
+      modelValue: $options.model,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.model) = $event)),
+      outlined: ""
+    }, {
+      control: vue.withCtx(({ emitValue, floatingLabel, id, value }) => [
+        vue.withDirectives(vue.createElementVNode("input", {
+          id: id,
+          ref: "input",
+          class: "q-field__input",
+          "model-value": value,
+          onInput: $event => (emitValue($event.target.value))
+        }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$j), [
+          [vue.vShow, floatingLabel]
+        ])
+      ]),
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["modelValue"]))
+  }
+
+  script$t.render = render$t;
+  script$t.__file = "src/components/numeric-input/QasNumericInput.vue";
+
+  const levels = {
+    0: {
+      color: 'negative',
+      label: 'Muito fraco',
+      progress: 0.05,
+      textClass: 'text-negative'
+    },
+
+    1: {
+      color: 'warning',
+      label: 'Fraco',
+      progress: 0.25,
+      textClass: 'text-warning'
+    },
+
+    2: {
+      color: 'warning',
+      label: 'Bom',
+      progress: 0.5,
+      textClass: 'text-warning'
+    },
+
+    3: {
+      color: 'positive',
+      label: 'Forte',
+      progress: 0.75,
+      textClass: 'text-positive'
+    },
+
+    4: {
+      color: 'positive',
+      label: 'Muito forte',
+      progress: 1,
+      textClass: 'text-positive'
+    }
+  };
+
+  var passwordMixin = {
+    props: {
+      levels: {
+        default: () => levels,
+        type: Object
+      },
+
+      // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength
+      minlength: {
+        default: 8,
+        type: [Number, String]
+      },
+
+      specials: {
+        default: /[!@#$%^&*()_+\-=[\]{}|;:'",<.>/?`~]/g,
+        type: RegExp
+      },
+
+      trackColor: {
+        default: 'blue-grey-1',
+        type: String
+      },
+
+      useLowercase: {
+        default: true,
+        type: Boolean
+      },
+
+      useNumbers: {
+        default: true,
+        type: Boolean
+      },
+
+      useSpecial: {
+        default: true,
+        type: Boolean
+      },
+
+      useUppercase: {
+        default: true,
+        type: Boolean
+      }
     }
   };
 
-  const _hoisted_1$j = ["id", "model-value", "onInput"];
-
-  function render$t(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_q_field = vue.resolveComponent("q-field");
-
-    return (vue.openBlock(), vue.createBlock(_component_q_field, {
-      modelValue: $options.model,
-      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.model) = $event)),
-      outlined: ""
-    }, {
-      control: vue.withCtx(({ emitValue, floatingLabel, id, value }) => [
-        vue.withDirectives(vue.createElementVNode("input", {
-          id: id,
-          ref: "input",
-          class: "q-field__input",
-          "model-value": value,
-          onInput: $event => (emitValue($event.target.value))
-        }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$j), [
-          [vue.vShow, floatingLabel]
-        ])
-      ]),
-      _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["modelValue"]))
-  }
-
-  script$t.render = render$t;
-  script$t.__file = "src/components/numeric-input/QasNumericInput.vue";
-
   var script$s = {
     name: 'QasPasswordStrengthChecker',
 
@@ -4299,8 +4050,6 @@
       QasSignaturePad: script$p
     },
 
-    mixins: [screenMixin],
-
     props: {
       dialogProps: {
         type: Object,
@@ -4366,18 +4115,18 @@
 
       signaturePadWidth () {
         const sizes = {
-          [this.mx_isSmall]: { width: '100%' },
-          [this.mx_isMedium]: { width: '570px' },
-          [this.mx_isLarge]: { width: '350px' }
+          [this.$qas.screen.isSmall]: { width: '100%' },
+          [this.$qas.screen.isMedium]: { width: '570px' },
+          [this.$qas.screen.isLarge]: { width: '350px' }
         };
         return sizes.true
       },
 
       signaturePadHeight () {
         const sizes = {
-          [this.mx_isSmall]: '250',
-          [this.mx_isMedium]: '400',
-          [this.mx_isLarge]: '250'
+          [this.$qas.screen.isSmall]: '250',
+          [this.$qas.screen.isMedium]: '400',
+          [this.$qas.screen.isLarge]: '250'
         };
 
         return sizes.true
@@ -4734,6 +4483,15 @@
   script$n.render = render$n;
   script$n.__file = "src/components/field/QasField.vue";
 
+  var contextMixin = {
+    computed: {
+      mx_context () {
+        const { limit, ordering, page, search, ...filters } = this.$route.query;
+        return { filters, limit, ordering, page: page ? parseInt(page) : 1, search }
+      }
+    }
+  };
+
   var script$m = {
     name: 'QasFilters',
 
@@ -5171,6 +4929,93 @@
   script$m.render = render$m;
   script$m.__file = "src/components/filters/QasFilters.vue";
 
+  const irregularClasses = ['col', 'col-auto', 'fit'];
+
+  var generatorMixin = {
+    props: {
+      columns: {
+        default: () => [],
+        type: [Array, String, Object]
+      },
+
+      fields: {
+        default: () => ({}),
+        type: Object
+      },
+
+      gutter: {
+        default: 'md',
+        type: [String, Boolean],
+        validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
+    },
+
+    computed: {
+      mx_classes () {
+        const classes = ['row'];
+
+        if (this.gutter) {
+          classes.push(`q-col-gutter-${this.gutter}`);
+        }
+
+        return classes
+      }
+    },
+
+    methods: {
+      mx_getBreakpoint (columns) {
+        const classes = [];
+        const profiles = { col: 'col', xs: 'col-xs', sm: 'col-sm', md: 'col-md', lg: 'col-lg', xl: 'col-xl' };
+        const { fieldProps, classes: renamedClasses, ...formattedColumns } = columns || {};
+
+        for (const key in formattedColumns) {
+          const value = formattedColumns[key];
+          classes.push(irregularClasses.includes(value) ? value : `${profiles[key]}-${value}`);
+        }
+
+        return [...classes, renamedClasses]
+      },
+
+      mx_getFieldClass (index, isGridGenerator) {
+        if (typeof this.columns === 'string') {
+          return irregularClasses.includes(this.columns) ? this.columns : `col-${this.columns}`
+        }
+
+        return Array.isArray(this.columns)
+          ? this.mx_handleColumnsByIndex(index, isGridGenerator)
+          : this.mx_handleColumnsByField(index, isGridGenerator)
+      },
+
+      mx_handleColumnsByField (index, isGridGenerator) {
+        if (!this.columns[index]) {
+          return this.mx_setDefaultColumnClass(isGridGenerator)
+        }
+
+        return this.mx_getBreakpoint(this.columns[index])
+      },
+
+      mx_handleColumnsByIndex (index, isGridGenerator) {
+        const fields = isGridGenerator ? this.fields : this.groupedFields.visible;
+
+        if (!Array.isArray(fields)) {
+          index = Object.keys(fields).findIndex(field => field === index);
+        }
+
+        const length = this.columns.length;
+
+        if (!length) {
+          return this.mx_setDefaultColumnClass(isGridGenerator)
+        }
+
+        return this.mx_getBreakpoint(this.columns[index])
+      },
+
+      mx_setDefaultColumnClass (isGridGenerator) {
+        return isGridGenerator ? 'col-6 col-xs-12 col-sm-4' : 'col-6'
+      }
+    }
+  };
+
   var script$l = {
     name: 'QasFormGenerator',
 
@@ -5278,6 +5123,124 @@
   script$l.render = render$l;
   script$l.__file = "src/components/form-generator/QasFormGenerator.vue";
 
+  var viewMixin = {
+    props: {
+      dialog: {
+        type: Boolean
+      },
+
+      entity: {
+        required: true,
+        type: String
+      },
+
+      url: {
+        default: '',
+        type: String
+      },
+
+      fields: {
+        default: () => ({}),
+        type: Object
+      },
+
+      errors: {
+        default: () => ({}),
+        type: Object
+      },
+
+      metadata: {
+        default: () => ({}),
+        type: Object
+      },
+
+      fetching: {
+        type: Boolean
+      }
+    },
+
+    emits: [
+      'update:fields',
+      'update:errors',
+      'update:metadata',
+      'update:fetching'
+    ],
+
+    data () {
+      return {
+        mx_errors: {},
+        mx_fields: {},
+        mx_metadata: {},
+
+        mx_isFetching: false
+      }
+    },
+
+    watch: {
+      mx_isFetching (value) {
+        this.$emit('update:fetching', value);
+      }
+    },
+
+    computed: {
+      mx_componentTag () {
+        return this.dialog ? 'div' : 'q-page'
+      },
+
+      mx_componentClass () {
+        return !this.dialog && 'container spaced'
+      },
+
+      mx_hasFooterSlot () {
+        return !!(this.$slots.footer)
+      },
+
+      mx_hasHeaderSlot () {
+        return !!(this.$slots.header)
+      }
+    },
+
+    methods: {
+      mx_fetchError (error) {
+        const { response } = error;
+        const exception = response?.data?.exception || error.message;
+
+        this.$qas.error('Ops! Erro ao obter os dados.', exception);
+
+        const status = response?.status;
+        const redirect = ({ 403: 'Forbidden', 404: 'NotFound' })[status];
+
+        if (redirect) {
+          this.$router.replace({ name: redirect });
+        }
+      },
+
+      mx_setErrors (errors = {}) {
+        this.mx_errors = vue.markRaw(errors);
+      },
+
+      mx_setFields (fields = {}) {
+        for (const field in fields) {
+          fields[field].name = humps.camelize(fields[field].name);
+        }
+
+        this.mx_fields = vue.markRaw(fields);
+      },
+
+      mx_setMetadata (metadata = {}) {
+        this.mx_metadata = vue.markRaw(metadata);
+      },
+
+      mx_updateModels (models) {
+        for (const key in models) {
+          if (!models[key]) continue
+
+          this.$emit(`update:${key}`, models[key]);
+        }
+      }
+    }
+  };
+
   var script$k = {
     name: 'QasFormView',
 
@@ -5286,7 +5249,7 @@
       QasDialog: script$x
     },
 
-    mixins: [viewMixin, screenMixin],
+    mixins: [viewMixin],
 
     props: {
       cancelButton: {
@@ -5380,7 +5343,7 @@
 
     computed: {
       cancelButtonClass () {
-        return this.mx_isSmall && 'order-last'
+        return this.$qas.screen.isSmall && 'order-last'
       },
 
       fetchURL () {
@@ -5408,7 +5371,7 @@
       },
 
       saveButtonClass () {
-        return this.mx_isSmall && 'order-first'
+        return this.$qas.screen.isSmall && 'order-first'
       },
 
       isCancelButtonDisabled () {
@@ -5696,8 +5659,6 @@
   var script$j = {
     name: 'QasGallery',
 
-    mixins: [screenMixin],
-
     props: {
       carouselNextIcon: {
         type: String,
@@ -5754,13 +5715,13 @@
           return this.height || 'auto'
         }
 
-        return this.mx_isSmall ? '90px' : '120px'
+        return this.$qas.screen.isSmall ? '90px' : '120px'
       },
 
       galleryColumnsClasses () {
         if (this.isSingleImage) return 'col-12'
 
-        return this.mx_isSmall ? 'col-6' : 'col-2'
+        return this.$qas.screen.isSmall ? 'col-6' : 'col-2'
       },
 
       hideShowMore () {
@@ -5895,9 +5856,9 @@
                 modelValue: $data.imageIndex,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($data.imageIndex) = $event)),
                 animated: "",
-                arrows: !_ctx.mx_isSmall,
+                arrows: !_ctx.$qas.screen.isSmall,
                 "control-text-color": "primary",
-                fullscreen: _ctx.mx_isSmall,
+                fullscreen: _ctx.$qas.screen.isSmall,
                 height: $options.carouselImageHeight,
                 "next-icon": $props.carouselNextIcon,
                 "prev-icon": $props.carouselPreviousIcon,
@@ -5913,7 +5874,7 @@
                       name: index
                     }, {
                       default: vue.withCtx(() => [
-                        (_ctx.mx_isSmall)
+                        (_ctx.$qas.screen.isSmall)
                           ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [
                               vue.createVNode(_component_qas_btn, {
                                 dense: "",
@@ -7287,8 +7248,6 @@
       QasGridGenerator: script$i
     },
 
-    mixins: [screenMixin],
-
     props: {
       columns: {
         type: Object,
@@ -7329,7 +7288,7 @@
 
     computed: {
       directionClasses () {
-        return this.mx_untilMedium ? 'col' : 'row items-center'
+        return this.$qas.screen.untilMedium ? 'col' : 'row items-center'
       },
 
       userAvatarImage () {
@@ -7337,7 +7296,7 @@
       },
 
       avatarSize () {
-        return this.mx_isSmall ? '145px' : '188px'
+        return this.$qas.screen.isSmall ? '145px' : '188px'
       }
     },
 
@@ -7918,8 +7877,6 @@
       QasSearchBox: script$8
     },
 
-    mixins: [screenMixin],
-
     props: {
       deleteOnly: {
         type: Boolean
@@ -8025,9 +7982,9 @@
         const isSelected = this.values.includes(value);
 
         return {
-          dense: this.mx_isSmall,
+          dense: this.$qas.screen.isSmall,
           hideLabelOnSmallScreen: true,
-          icon: !this.mx_isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
+          icon: !this.$qas.screen.isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
           label: isSelected ? 'Remover' : 'Adicionar',
           outline: isSelected,
           size: 'sm'
@@ -8428,8 +8385,6 @@
   var script$3 = {
     name: 'QasTableGenerator',
 
-    mixins: [screenMixin],
-
     props: {
       columns: {
         default: () => [],
@@ -8556,7 +8511,7 @@
       },
 
       tableClass () {
-        return this.mx_isSmall && 'qas-table-generator--mobile'
+        return this.$qas.screen.isSmall && 'qas-table-generator--mobile'
       },
 
       hasScrollOnGrab () {
@@ -8797,8 +8752,6 @@
       QasDialog: script$x
     },
 
-    mixins: [screenMixin],
-
     props: {
       dialogProps: {
         type: Object,
@@ -8838,7 +8791,7 @@
 
     computed: {
       truncateTextClass () {
-        return (this.isTruncated || this.mx_isSmall) && 'ellipsis q-pr-sm'
+        return (this.isTruncated || this.$qas.screen.isSmall) && 'ellipsis q-pr-sm'
       },
 
       isTruncated () {
@@ -8940,8 +8893,6 @@
       QasSearchBox: script$8
     },
 
-    mixins: [screenMixin],
-
     props: {
       emitValue: {
         type: Boolean
@@ -8999,15 +8950,15 @@
 
     computed: {
       actionsClass () {
-        return !this.mx_isSmall && 'column'
+        return !this.$qas.screen.isSmall && 'column'
       },
 
       gutterClass () {
-        return `q-col-gutter-${this.mx_untilLarge ? 'md' : 'xl'}`
+        return `q-col-gutter-${this.$qas.screen.untilLarge ? 'md' : 'xl'}`
       },
 
       iconClass () {
-        return !this.mx_isSmall && 'qas-transfer__icon'
+        return !this.$qas.screen.isSmall && 'qas-transfer__icon'
       },
 
       searchBoxProps () {
@@ -9264,7 +9215,7 @@
 
   var name = "@bildvitta/quasar-ui-asteroid";
   var description = "Asteroid";
-  var version$1 = "3.0.0-beta.2";
+  var version$1 = "3.0.0-beta.3";
   var author = "Bild & Vitta <systemteam@bild.com.br>";
   var license = "MIT";
   var main = "dist/asteroid.cjs.min.js";