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

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.5
 * (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 () {
@@ -1353,7 +1021,7 @@
     const _directive_close_popup = vue.resolveDirective("close-popup");
 
     return (vue.openBlock(), vue.createBlock(_component_q_header, {
-      class: "bg-white qas-app-bar shadow-primary",
+      class: "bg-white qas-app-bar shadow-14",
       "height-hint": "70"
     }, {
       default: vue.withCtx(() => [
@@ -1456,7 +1124,7 @@
                     ]),
                     vue.createVNode(_component_q_menu, {
                       anchor: "bottom end",
-                      class: "shadow-primary",
+                      class: "shadow-14",
                       "max-height": "400px",
                       offset: [0, 5],
                       self: "top end"
@@ -1519,8 +1187,6 @@
   var script$E = {
     name: 'QasAppMenu',
 
-    mixins: [screenMixin],
-
     props: {
       items: {
         default: () => [],
@@ -1537,6 +1203,11 @@
         type: String
       },
 
+      brandMenu: {
+        default: '',
+        type: String
+      },
+
       modules: {
         default: () => [],
         type: Array
@@ -1622,7 +1293,7 @@
       },
 
       beforeHide () {
-        if (this.mx_isLarge) {
+        if (this.$qas.screen.isLarge) {
           this.model = true;
           this.miniMode = !this.miniMode;
         }
@@ -1650,21 +1321,17 @@
     }
   };
 
-  var _imports_0 = "data:image/svg+xml,%3Csvg%20width%3D%22126%22%20height%3D%2226%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20opacity%3D%22.3%22%3E%3Cg%20clip-path%3D%22url%28%23a%29%22%3E%3Cpath%20d%3D%22M6.829%2010.909c.02-2.295.059-4.6.119-6.895C9.197%202.653%2011.41%201.3%2013.58%200c2.172%201.301%204.393%202.653%206.634%204.014.07%202.295.11%204.6.12%206.895a342.175%20342.175%200%200%200%206.048%203.417c-.02%202.504-.1%205.017-.238%207.521A575.699%20575.699%200%200%200%2019.392%2026a404.892%20404.892%200%200%201-5.81-3.388A525.05%20525.05%200%200%201%207.77%2026a574.702%20574.702%200%200%200-6.753-4.153%20158.72%20158.72%200%200%201-.238-7.52%20381.833%20381.833%200%200%200%206.049-3.418Zm6.752-9.24c-1.487.884-2.994%201.788-4.521%202.702%201.487.855%202.994%201.73%204.521%202.613a830.152%20830.152%200%200%201%204.522-2.613c-1.527-.904-3.034-1.818-4.522-2.702Zm.714%206.577v5.295c1.537-.884%203.064-1.768%204.591-2.642-.01-1.759-.03-3.507-.06-5.266-1.487.855-3.004%201.729-4.53%202.613Zm5.87%2015.658a402.133%20402.133%200%200%201%204.602-2.792c.079-1.719.128-3.438.158-5.156-1.547.884-3.084%201.788-4.62%202.692-.04%201.749-.08%203.507-.14%205.256Zm4.046-9.16c-1.517-.845-3.044-1.72-4.571-2.593a767.782%20767.782%200%200%200-4.601%202.652c1.527.884%203.044%201.759%204.551%202.613%201.547-.894%203.084-1.788%204.621-2.672Zm-15.806%209.21c1.468-.835%202.955-1.71%204.462-2.594%200-1.768-.01-3.546-.01-5.315a577.521%20577.521%200%200%201-4.56%202.623c.029%201.758.059%203.527.108%205.285Zm3.719-9.15c-1.537-.885-3.064-1.78-4.601-2.653a310.65%20310.65%200%200%201-4.572%202.593c1.537.874%203.084%201.768%204.621%202.672a573.757%20573.757%200%200%200%204.552-2.613Z%22%20fill%3D%22%2300314D%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22m47.676%2021.17-.022-10.315-5.113%208.536h-1.29l-5.112-8.403V21.17h-2.756V5.61h2.378l6.18%2010.314L48.01%205.61h2.378l.022%2015.56h-2.734ZM58.193%2021.325c-1.2%200-2.282-.26-3.245-.778a5.774%205.774%200%200%201-2.268-2.156c-.533-.934-.8-1.986-.8-3.157%200-1.17.267-2.215.8-3.134a5.774%205.774%200%200%201%202.267-2.156c.964-.52%202.045-.778%203.246-.778%201.215%200%202.304.259%203.268.778a5.619%205.619%200%200%201%202.245%202.156c.548.919.822%201.963.822%203.134%200%201.17-.274%202.223-.822%203.157a5.62%205.62%200%200%201-2.245%202.156c-.964.518-2.053.778-3.268.778Zm0-2.379c1.023%200%201.867-.34%202.534-1.022.667-.682%201-1.578%201-2.69%200-1.111-.333-2.008-1-2.69-.667-.681-1.511-1.022-2.534-1.022s-1.867.34-2.534%201.022c-.652.682-.978%201.579-.978%202.69%200%201.112.326%202.008.978%202.69.667.681%201.511%201.022%202.534%201.022ZM78.513%204.675V21.17h-2.667v-1.534c-.46.563-1.03.986-1.712%201.267-.667.282-1.408.423-2.223.423-1.14%200-2.17-.252-3.09-.756a5.47%205.47%200%200%201-2.133-2.134c-.52-.934-.779-2-.779-3.2%200-1.201.26-2.26.778-3.18a5.471%205.471%200%200%201%202.135-2.134c.918-.504%201.948-.755%203.09-.755.785%200%201.503.133%202.155.4a4.337%204.337%200%200%201%201.668%201.2v-6.09h2.778Zm-6.268%2014.271c.667%200%201.267-.148%201.8-.444a3.372%203.372%200%200%200%201.267-1.312c.312-.563.467-1.215.467-1.956%200-.74-.155-1.393-.467-1.956a3.217%203.217%200%200%200-1.267-1.29%203.507%203.507%200%200%200-1.8-.466c-.667%200-1.267.155-1.8.467a3.217%203.217%200%200%200-1.268%201.289c-.311.563-.467%201.215-.467%201.956%200%20.741.156%201.393.467%201.956.311.563.734%201%201.267%201.312a3.644%203.644%200%200%200%201.8.444ZM91.854%209.299v11.87H89.21v-1.511c-.444.533-1%20.948-1.667%201.244a5.487%205.487%200%200%201-2.156.423c-1.586%200-2.838-.437-3.757-1.312-.904-.889-1.356-2.2-1.356-3.934v-6.78h2.779V15.7c0%201.067.237%201.867.711%202.4.49.52%201.178.779%202.067.779.993%200%201.779-.304%202.357-.912.592-.622.889-1.511.889-2.667V9.299h2.778ZM93.805%204.675h2.78V21.17h-2.78V4.675ZM103.773%209.166c1.749%200%203.083.422%204.002%201.267.933.83%201.4%202.09%201.4%203.778v6.958h-2.623v-1.445c-.341.519-.83.92-1.467%201.2-.622.267-1.378.4-2.267.4-.89%200-1.668-.147-2.334-.444-.667-.311-1.186-.733-1.556-1.267a3.317%203.317%200%200%201-.534-1.845c0-1.067.393-1.919%201.178-2.556.8-.652%202.053-.978%203.757-.978h3.067v-.178c0-.83-.252-1.467-.755-1.912-.489-.444-1.223-.667-2.201-.667-.667%200-1.326.104-1.978.312-.638.207-1.179.496-1.623.867l-1.09-2.023c.623-.475%201.371-.838%202.246-1.09a9.984%209.984%200%200%201%202.778-.377Zm-.377%2010.136c.696%200%201.311-.156%201.845-.467a2.638%202.638%200%200%200%201.155-1.378v-1.378h-2.867c-1.601%200-2.401.526-2.401%201.578%200%20.504.2.904.6%201.2.4.297.956.445%201.668.445ZM113.997%2011.033c.8-1.245%202.208-1.867%204.224-1.867v2.645a3.532%203.532%200%200%200-.645-.067c-1.082%200-1.927.319-2.534.956-.608.622-.912%201.526-.912%202.712v5.757h-2.778V9.3h2.645v1.734Z%22%20fill%3D%22%2300314D%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20fill%3D%22%23fff%22%20transform%3D%22matrix%28-1%200%200%201%2026.383%200%29%22%20d%3D%22M0%200h25.603v26H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
-
   const _hoisted_1$o = { class: "column flex full-height justify-between no-wrap overflow-x-hidden" };
   const _hoisted_2$h = {
     key: 0,
     class: "q-ma-md"
   };
   const _hoisted_3$d = /*#__PURE__*/vue.createElementVNode("div", { class: "q-mb-sm text-caption text-grey-7 text-weight-medium" }, " Você está no modulo: ", -1 /* HOISTED */);
-  const _hoisted_4$9 = { class: "q-mx-md" };
-  const _hoisted_5$6 = {
+  const _hoisted_4$9 = {
     key: 0,
-    alt: "Modular",
-    class: "block q-mb-md q-mx-auto",
-    src: _imports_0
+    class: "q-mx-md"
   };
+  const _hoisted_5$6 = ["alt", "src"];
 
   function render$E(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_qas_select = vue.resolveComponent("qas-select");
@@ -1805,12 +1472,18 @@
               _: 1 /* STABLE */
             })
           ]),
-          vue.createElementVNode("div", _hoisted_4$9, [
-            vue.createCommentVNode(" TODO: O Modular não é o Asteroid, então não podemos manter esse logo aqui. "),
-            (!$data.isMini)
-              ? (vue.openBlock(), vue.createElementBlock("img", _hoisted_5$6))
-              : vue.createCommentVNode("v-if", true)
-          ])
+          ($props.brandMenu)
+            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$9, [
+                (!$data.isMini)
+                  ? (vue.openBlock(), vue.createElementBlock("img", {
+                      key: 0,
+                      alt: $props.title,
+                      class: "block q-mb-md q-mx-auto",
+                      src: $props.brandMenu
+                    }, null, 8 /* PROPS */, _hoisted_5$6))
+                  : vue.createCommentVNode("v-if", true)
+              ]))
+            : vue.createCommentVNode("v-if", true)
         ])
       ]),
       _: 1 /* STABLE */
@@ -1837,7 +1510,7 @@
       boxClass () {
         return {
           'border-primary-contrast': this.outlined,
-          'shadow-primary': !this.unelevated
+          'shadow-14': !this.unelevated
         }
       }
     }
@@ -1894,7 +1567,7 @@
       },
 
       cardClasses () {
-        return this.formMode ? 'bg-white border-primary no-shadow' : 'box-shadow-1'
+        return this.formMode ? 'bg-white border-primary no-shadow' : 'shadow-14'
       },
 
       gutterClass () {
@@ -2218,7 +1891,7 @@
       ]),
       vue.createVNode(_component_qas_btn, {
         class: "q-ml-xs",
-        color: "grey-5",
+        color: "grey-7",
         flat: "",
         icon: $props.icon,
         loading: $data.isLoading,
@@ -2521,8 +2194,6 @@
       QasActions: script$L
     },
 
-    mixins: [screenMixin],
-
     props: {
       actionsProps: {
         default: () => ({}),
@@ -2605,8 +2276,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 +2445,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 +3066,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',
 
@@ -3894,7 +3652,7 @@
       },
 
       getFileNameClass (isFailed) {
-        return isFailed ? 'text-negative' : 'text-grey-8'
+        return isFailed ? 'text-negative' : 'text-grey-9'
       },
 
       isFailed (file) {
@@ -4086,7 +3844,7 @@
                   }, [
                     vue.createVNode(_component_qas_avatar, {
                       class: "q-mr-sm",
-                      color: "grey-3",
+                      color: "contrast-primary",
                       icon: "o_attach_file",
                       image: file.image,
                       rounded: "",
@@ -4299,8 +4057,6 @@
       QasSignaturePad: script$p
     },
 
-    mixins: [screenMixin],
-
     props: {
       dialogProps: {
         type: Object,
@@ -4366,18 +4122,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 +4490,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',
 
@@ -4829,7 +4594,7 @@
       },
 
       filterButtonColor () {
-        return this.hasActiveFilters ? 'primary' : 'grey-8'
+        return this.hasActiveFilters ? 'primary' : 'grey-9'
       },
 
       filterButtonLabel () {
@@ -5144,11 +4909,11 @@
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.activeFilters, (filterItem, key) => {
               return (vue.openBlock(), vue.createBlock(_component_q_chip, {
                 key: key,
-                color: "grey-4",
+                color: "primary",
                 dense: "",
                 removable: "",
                 size: "md",
-                "text-color": "grey-8",
+                "text-color": "white",
                 onRemove: $event => ($options.removeFilter(filterItem))
               }, {
                 default: vue.withCtx(() => [
@@ -5171,6 +4936,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 +5130,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 +5256,7 @@
       QasDialog: script$x
     },
 
-    mixins: [viewMixin, screenMixin],
+    mixins: [viewMixin],
 
     props: {
       cancelButton: {
@@ -5380,7 +5350,7 @@
 
     computed: {
       cancelButtonClass () {
-        return this.mx_isSmall && 'order-last'
+        return this.$qas.screen.isSmall && 'order-last'
       },
 
       fetchURL () {
@@ -5408,7 +5378,7 @@
       },
 
       saveButtonClass () {
-        return this.mx_isSmall && 'order-first'
+        return this.$qas.screen.isSmall && 'order-first'
       },
 
       isCancelButtonDisabled () {
@@ -5696,8 +5666,6 @@
   var script$j = {
     name: 'QasGallery',
 
-    mixins: [screenMixin],
-
     props: {
       carouselNextIcon: {
         type: String,
@@ -5754,13 +5722,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 +5863,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 +5881,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: "",
@@ -6249,7 +6217,7 @@
     }
   };
 
-  const _hoisted_1$b = { class: "qas-list-items shadow-primary" };
+  const _hoisted_1$b = { class: "qas-list-items shadow-14" };
 
   function render$f(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_q_item_section = vue.resolveComponent("q-item-section");
@@ -6467,7 +6435,7 @@
   const _hoisted_3$4 = { key: 0 };
   const _hoisted_4$4 = { key: 1 };
   const _hoisted_5$3 = { class: "q-my-xl text-center" };
-  const _hoisted_6$1 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-grey-6" }, "Nenhum item encontrado.", -1 /* HOISTED */);
+  const _hoisted_6$1 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-grey-7" }, "Nenhum item encontrado.", -1 /* HOISTED */);
   const _hoisted_7$1 = {
     key: 2,
     class: "q-py-lg text-center"
@@ -6515,7 +6483,7 @@
                         vue.createElementVNode("div", _hoisted_5$3, [
                           vue.createVNode(_component_q_icon, {
                             class: "q-mb-sm text-center",
-                            color: "grey-6",
+                            color: "grey-7",
                             name: "o_search",
                             size: "38px"
                           }),
@@ -7287,8 +7255,6 @@
       QasGridGenerator: script$i
     },
 
-    mixins: [screenMixin],
-
     props: {
       columns: {
         type: Object,
@@ -7329,7 +7295,7 @@
 
     computed: {
       directionClasses () {
-        return this.mx_untilMedium ? 'col' : 'row items-center'
+        return this.$qas.screen.untilMedium ? 'col' : 'row items-center'
       },
 
       userAvatarImage () {
@@ -7337,7 +7303,7 @@
       },
 
       avatarSize () {
-        return this.mx_isSmall ? '145px' : '188px'
+        return this.$qas.screen.isSmall ? '145px' : '188px'
       }
     },
 
@@ -7491,7 +7457,7 @@
 
     return (vue.openBlock(), vue.createBlock(_component_q_img, {
       ratio: $options.ratio,
-      "spinner-color": "grey-6",
+      "spinner-color": "grey-7",
       src: $options.imageSource
     }, {
       error: vue.withCtx(() => [
@@ -7918,8 +7884,6 @@
       QasSearchBox: script$8
     },
 
-    mixins: [screenMixin],
-
     props: {
       deleteOnly: {
         type: Boolean
@@ -8025,9 +7989,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'
@@ -8230,7 +8194,7 @@
     key: 2,
     class: "q-my-xl text-center"
   };
-  const _hoisted_3$1 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-grey-6" }, "Nenhum item encontrado.", -1 /* HOISTED */);
+  const _hoisted_3$1 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-grey-7" }, "Nenhum item encontrado.", -1 /* HOISTED */);
   const _hoisted_4$1 = { key: 3 };
 
   function render$5(_ctx, _cache, $props, $setup, $data, $options) {
@@ -8253,7 +8217,7 @@
             ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
                 vue.createVNode(_component_q_icon, {
                   class: "q-mb-sm text-center",
-                  color: "grey-6",
+                  color: "grey-7",
                   name: "o_search",
                   size: "38px"
                 }),
@@ -8428,8 +8392,6 @@
   var script$3 = {
     name: 'QasTableGenerator',
 
-    mixins: [screenMixin],
-
     props: {
       columns: {
         default: () => [],
@@ -8556,7 +8518,7 @@
       },
 
       tableClass () {
-        return this.mx_isSmall && 'qas-table-generator--mobile'
+        return this.$qas.screen.isSmall && 'qas-table-generator--mobile'
       },
 
       hasScrollOnGrab () {
@@ -8797,8 +8759,6 @@
       QasDialog: script$x
     },
 
-    mixins: [screenMixin],
-
     props: {
       dialogProps: {
         type: Object,
@@ -8838,7 +8798,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 +8900,6 @@
       QasSearchBox: script$8
     },
 
-    mixins: [screenMixin],
-
     props: {
       emitValue: {
         type: Boolean
@@ -8999,15 +8957,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 +9222,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.5";
   var author = "Bild & Vitta <systemteam@bild.com.br>";
   var license = "MIT";
   var main = "dist/asteroid.cjs.min.js";