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

package/dist/asteroid.esm.js

@@ -1,10 +1,10 @@
 /*!
-* @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.
 */
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, resolveComponent, createBlock, mergeProps, createSlots, withCtx, createCommentVNode, renderList, normalizeProps, guardReactiveProps, createVNode, Fragment, toDisplayString, resolveDynamicComponent, createTextVNode, resolveDirective, withDirectives, reactive, computed, markRaw, vShow, normalizeStyle, withModifiers, TransitionGroup } from 'vue';
 import { camelize, camelizeKeys } from 'humps';
-import { markRaw, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, resolveComponent, createBlock, mergeProps, createSlots, withCtx, createCommentVNode, renderList, normalizeProps, guardReactiveProps, createVNode, Fragment, toDisplayString, resolveDynamicComponent, createTextVNode, resolveDirective, withDirectives, reactive, computed, vShow, normalizeStyle, withModifiers, TransitionGroup } from 'vue';
 import { parseISO, format, isMatch } from 'date-fns';
 import { ptBR } from 'date-fns/locale';
 import { copyToClipboard, date as date$1, Dialog as Dialog$1, Notify, Screen as Screen$1, Platform, Loading, extend, uid, Quasar } from 'quasar';
@@ -17,342 +17,9 @@ import Fuse from 'fuse.js';
 import Sortable from 'sortablejs';
 import VueGoogleMaps from '@fawmi/vue-google-maps';
 
-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 = markRaw(errors);
-    },
-
-    mx_setFields (fields = {}) {
-      for (const field in fields) {
-        fields[field].name = camelize(fields[field].name);
-      }
-
-      this.mx_fields = markRaw(fields);
-    },
-
-    mx_setMetadata (metadata = {}) {
-      this.mx_metadata = 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',
@@ -372,7 +39,7 @@ var script$L = {
       return [
         `justify-${this.align}`,
         `q-col-gutter-${this.gutter}`,
-        this.mx_isSmall ? 'column reverse' : 'row'
+        this.$qas.screen.isSmall ? 'column reverse' : 'row'
       ]
     }
   }
@@ -400,30 +67,31 @@ script$L.__file = "src/components/actions/QasActions.vue";
 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 () {
@@ -1518,8 +1186,6 @@ script$F.__file = "src/components/app-bar/QasAppBar.vue";
 var script$E = {
   name: 'QasAppMenu',
 
-  mixins: [screenMixin],
-
   props: {
     items: {
       default: () => [],
@@ -1621,7 +1287,7 @@ var script$E = {
     },
 
     beforeHide () {
-      if (this.mx_isLarge) {
+      if (this.$qas.screen.isLarge) {
         this.model = true;
         this.miniMode = !this.miniMode;
       }
@@ -2520,8 +2186,6 @@ var script$x = {
     QasActions: script$L
   },
 
-  mixins: [screenMixin],
-
   props: {
     actionsProps: {
       default: () => ({}),
@@ -2604,8 +2268,8 @@ var script$x = {
 
     style () {
       return {
-        maxWidth: this.maxWidth || (this.mx_isSmall ? '' : '600px'),
-        minWidth: this.minWidth || (this.mx_isSmall ? '' : '400px')
+        maxWidth: this.maxWidth || (this.$qas.screen.isSmall ? '' : '600px'),
+        minWidth: this.minWidth || (this.$qas.screen.isSmall ? '' : '400px')
       }
     },
 
@@ -2773,10 +2437,15 @@ var NotifySuccess = (message, caption) => {
 
 var Screen = () => {
   const screensModel = {
+    // até 599px
     isSmall: () => Screen$1.xs,
+    // de 600 até 1023px
     isMedium: () => Screen$1.sm,
+    // de 600 até 1023px
     isLarge: () => Screen$1.gt.sm,
+    // de 0 até 599px
     untilMedium: () => Screen$1.lt.sm,
+    // de 0 ate 1023px
     untilLarge: () => Screen$1.lt.md,
 
     // Plataforma
@@ -3389,39 +3058,121 @@ var script$t = {
     });
   },
 
-  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 = resolveComponent("q-field");
+
+  return (openBlock(), createBlock(_component_q_field, {
+    modelValue: $options.model,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.model) = $event)),
+    outlined: ""
+  }, {
+    control: withCtx(({ emitValue, floatingLabel, id, value }) => [
+      withDirectives(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), [
+        [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 = resolveComponent("q-field");
-
-  return (openBlock(), createBlock(_component_q_field, {
-    modelValue: $options.model,
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.model) = $event)),
-    outlined: ""
-  }, {
-    control: withCtx(({ emitValue, floatingLabel, id, value }) => [
-      withDirectives(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), [
-        [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',
 
@@ -4298,8 +4049,6 @@ var script$o = {
     QasSignaturePad: script$p
   },
 
-  mixins: [screenMixin],
-
   props: {
     dialogProps: {
       type: Object,
@@ -4365,18 +4114,18 @@ var script$o = {
 
     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
@@ -4733,6 +4482,15 @@ function render$n(_ctx, _cache, $props, $setup, $data, $options) {
 script$n.render = render$n;
 script$n.__file = "src/components/field/QasField.vue";
 
+var contextMixin = {
+  computed: {
+    mx_context () {
+      const { limit, ordering, page, search, ...filters } = this.$route.query;
+      return { filters, limit, ordering, page: page ? parseInt(page) : 1, search }
+    }
+  }
+};
+
 var script$m = {
   name: 'QasFilters',
 
@@ -5170,6 +4928,93 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
 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',
 
@@ -5277,6 +5122,124 @@ function render$l(_ctx, _cache, $props, $setup, $data, $options) {
 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 = markRaw(errors);
+    },
+
+    mx_setFields (fields = {}) {
+      for (const field in fields) {
+        fields[field].name = camelize(fields[field].name);
+      }
+
+      this.mx_fields = markRaw(fields);
+    },
+
+    mx_setMetadata (metadata = {}) {
+      this.mx_metadata = 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',
 
@@ -5285,7 +5248,7 @@ var script$k = {
     QasDialog: script$x
   },
 
-  mixins: [viewMixin, screenMixin],
+  mixins: [viewMixin],
 
   props: {
     cancelButton: {
@@ -5379,7 +5342,7 @@ var script$k = {
 
   computed: {
     cancelButtonClass () {
-      return this.mx_isSmall && 'order-last'
+      return this.$qas.screen.isSmall && 'order-last'
     },
 
     fetchURL () {
@@ -5407,7 +5370,7 @@ var script$k = {
     },
 
     saveButtonClass () {
-      return this.mx_isSmall && 'order-first'
+      return this.$qas.screen.isSmall && 'order-first'
     },
 
     isCancelButtonDisabled () {
@@ -5695,8 +5658,6 @@ script$k.__file = "src/components/form-view/QasFormView.vue";
 var script$j = {
   name: 'QasGallery',
 
-  mixins: [screenMixin],
-
   props: {
     carouselNextIcon: {
       type: String,
@@ -5753,13 +5714,13 @@ var script$j = {
         return this.height || 'auto'
       }
 
-      return this.mx_isSmall ? '90px' : '120px'
+      return this.$qas.screen.isSmall ? '90px' : '120px'
     },
 
     galleryColumnsClasses () {
       if (this.isSingleImage) return 'col-12'
 
-      return this.mx_isSmall ? 'col-6' : 'col-2'
+      return this.$qas.screen.isSmall ? 'col-6' : 'col-2'
     },
 
     hideShowMore () {
@@ -5894,9 +5855,9 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
               modelValue: $data.imageIndex,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($data.imageIndex) = $event)),
               animated: "",
-              arrows: !_ctx.mx_isSmall,
+              arrows: !_ctx.$qas.screen.isSmall,
               "control-text-color": "primary",
-              fullscreen: _ctx.mx_isSmall,
+              fullscreen: _ctx.$qas.screen.isSmall,
               height: $options.carouselImageHeight,
               "next-icon": $props.carouselNextIcon,
               "prev-icon": $props.carouselPreviousIcon,
@@ -5912,7 +5873,7 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
                     name: index
                   }, {
                     default: withCtx(() => [
-                      (_ctx.mx_isSmall)
+                      (_ctx.$qas.screen.isSmall)
                         ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
                             createVNode(_component_qas_btn, {
                               dense: "",
@@ -7286,8 +7247,6 @@ var script$a = {
     QasGridGenerator: script$i
   },
 
-  mixins: [screenMixin],
-
   props: {
     columns: {
       type: Object,
@@ -7328,7 +7287,7 @@ var script$a = {
 
   computed: {
     directionClasses () {
-      return this.mx_untilMedium ? 'col' : 'row items-center'
+      return this.$qas.screen.untilMedium ? 'col' : 'row items-center'
     },
 
     userAvatarImage () {
@@ -7336,7 +7295,7 @@ var script$a = {
     },
 
     avatarSize () {
-      return this.mx_isSmall ? '145px' : '188px'
+      return this.$qas.screen.isSmall ? '145px' : '188px'
     }
   },
 
@@ -7917,8 +7876,6 @@ var script$6 = {
     QasSearchBox: script$8
   },
 
-  mixins: [screenMixin],
-
   props: {
     deleteOnly: {
       type: Boolean
@@ -8024,9 +7981,9 @@ var script$6 = {
       const isSelected = this.values.includes(value);
 
       return {
-        dense: this.mx_isSmall,
+        dense: this.$qas.screen.isSmall,
         hideLabelOnSmallScreen: true,
-        icon: !this.mx_isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
+        icon: !this.$qas.screen.isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
         label: isSelected ? 'Remover' : 'Adicionar',
         outline: isSelected,
         size: 'sm'
@@ -8427,8 +8384,6 @@ script$4.__file = "src/components/sortable/QasSortable.vue";
 var script$3 = {
   name: 'QasTableGenerator',
 
-  mixins: [screenMixin],
-
   props: {
     columns: {
       default: () => [],
@@ -8555,7 +8510,7 @@ var script$3 = {
     },
 
     tableClass () {
-      return this.mx_isSmall && 'qas-table-generator--mobile'
+      return this.$qas.screen.isSmall && 'qas-table-generator--mobile'
     },
 
     hasScrollOnGrab () {
@@ -8796,8 +8751,6 @@ var script$1 = {
     QasDialog: script$x
   },
 
-  mixins: [screenMixin],
-
   props: {
     dialogProps: {
       type: Object,
@@ -8837,7 +8790,7 @@ var script$1 = {
 
   computed: {
     truncateTextClass () {
-      return (this.isTruncated || this.mx_isSmall) && 'ellipsis q-pr-sm'
+      return (this.isTruncated || this.$qas.screen.isSmall) && 'ellipsis q-pr-sm'
     },
 
     isTruncated () {
@@ -8939,8 +8892,6 @@ var script = {
     QasSearchBox: script$8
   },
 
-  mixins: [screenMixin],
-
   props: {
     emitValue: {
       type: Boolean
@@ -8998,15 +8949,15 @@ var script = {
 
   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 () {
@@ -9263,7 +9214,7 @@ script.__file = "src/components/transfer/QasTransfer.vue";
 
 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";