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

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.5
 * (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 () {
@@ -1352,7 +1020,7 @@ function render$F(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_close_popup = resolveDirective("close-popup");
 
   return (openBlock(), createBlock(_component_q_header, {
-    class: "bg-white qas-app-bar shadow-primary",
+    class: "bg-white qas-app-bar shadow-14",
     "height-hint": "70"
   }, {
     default: withCtx(() => [
@@ -1455,7 +1123,7 @@ function render$F(_ctx, _cache, $props, $setup, $data, $options) {
                   ]),
                   createVNode(_component_q_menu, {
                     anchor: "bottom end",
-                    class: "shadow-primary",
+                    class: "shadow-14",
                     "max-height": "400px",
                     offset: [0, 5],
                     self: "top end"
@@ -1518,8 +1186,6 @@ script$F.__file = "src/components/app-bar/QasAppBar.vue";
 var script$E = {
   name: 'QasAppMenu',
 
-  mixins: [screenMixin],
-
   props: {
     items: {
       default: () => [],
@@ -1536,6 +1202,11 @@ var script$E = {
       type: String
     },
 
+    brandMenu: {
+      default: '',
+      type: String
+    },
+
     modules: {
       default: () => [],
       type: Array
@@ -1621,7 +1292,7 @@ var script$E = {
     },
 
     beforeHide () {
-      if (this.mx_isLarge) {
+      if (this.$qas.screen.isLarge) {
         this.model = true;
         this.miniMode = !this.miniMode;
       }
@@ -1649,21 +1320,17 @@ var script$E = {
   }
 };
 
-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__*/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 = resolveComponent("qas-select");
@@ -1804,12 +1471,18 @@ function render$E(_ctx, _cache, $props, $setup, $data, $options) {
             _: 1 /* STABLE */
           })
         ]),
-        createElementVNode("div", _hoisted_4$9, [
-          createCommentVNode(" TODO: O Modular não é o Asteroid, então não podemos manter esse logo aqui. "),
-          (!$data.isMini)
-            ? (openBlock(), createElementBlock("img", _hoisted_5$6))
-            : createCommentVNode("v-if", true)
-        ])
+        ($props.brandMenu)
+          ? (openBlock(), createElementBlock("div", _hoisted_4$9, [
+              (!$data.isMini)
+                ? (openBlock(), createElementBlock("img", {
+                    key: 0,
+                    alt: $props.title,
+                    class: "block q-mb-md q-mx-auto",
+                    src: $props.brandMenu
+                  }, null, 8 /* PROPS */, _hoisted_5$6))
+                : createCommentVNode("v-if", true)
+            ]))
+          : createCommentVNode("v-if", true)
       ])
     ]),
     _: 1 /* STABLE */
@@ -1836,7 +1509,7 @@ var script$D = {
     boxClass () {
       return {
         'border-primary-contrast': this.outlined,
-        'shadow-primary': !this.unelevated
+        'shadow-14': !this.unelevated
       }
     }
   }
@@ -1893,7 +1566,7 @@ var script$C = {
     },
 
     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 () {
@@ -2217,7 +1890,7 @@ function render$A(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     createVNode(_component_qas_btn, {
       class: "q-ml-xs",
-      color: "grey-5",
+      color: "grey-7",
       flat: "",
       icon: $props.icon,
       loading: $data.isLoading,
@@ -2520,8 +2193,6 @@ var script$x = {
     QasActions: script$L
   },
 
-  mixins: [screenMixin],
-
   props: {
     actionsProps: {
       default: () => ({}),
@@ -2604,8 +2275,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 +2444,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 +3065,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',
 
@@ -3893,7 +3651,7 @@ var script$q = {
     },
 
     getFileNameClass (isFailed) {
-      return isFailed ? 'text-negative' : 'text-grey-8'
+      return isFailed ? 'text-negative' : 'text-grey-9'
     },
 
     isFailed (file) {
@@ -4085,7 +3843,7 @@ function render$q(_ctx, _cache, $props, $setup, $data, $options) {
                 }, [
                   createVNode(_component_qas_avatar, {
                     class: "q-mr-sm",
-                    color: "grey-3",
+                    color: "contrast-primary",
                     icon: "o_attach_file",
                     image: file.image,
                     rounded: "",
@@ -4298,8 +4056,6 @@ var script$o = {
     QasSignaturePad: script$p
   },
 
-  mixins: [screenMixin],
-
   props: {
     dialogProps: {
       type: Object,
@@ -4365,18 +4121,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 +4489,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',
 
@@ -4828,7 +4593,7 @@ var script$m = {
     },
 
     filterButtonColor () {
-      return this.hasActiveFilters ? 'primary' : 'grey-8'
+      return this.hasActiveFilters ? 'primary' : 'grey-9'
     },
 
     filterButtonLabel () {
@@ -5143,11 +4908,11 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.activeFilters, (filterItem, key) => {
             return (openBlock(), 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: withCtx(() => [
@@ -5170,6 +4935,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 +5129,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 +5255,7 @@ var script$k = {
     QasDialog: script$x
   },
 
-  mixins: [viewMixin, screenMixin],
+  mixins: [viewMixin],
 
   props: {
     cancelButton: {
@@ -5379,7 +5349,7 @@ var script$k = {
 
   computed: {
     cancelButtonClass () {
-      return this.mx_isSmall && 'order-last'
+      return this.$qas.screen.isSmall && 'order-last'
     },
 
     fetchURL () {
@@ -5407,7 +5377,7 @@ var script$k = {
     },
 
     saveButtonClass () {
-      return this.mx_isSmall && 'order-first'
+      return this.$qas.screen.isSmall && 'order-first'
     },
 
     isCancelButtonDisabled () {
@@ -5695,8 +5665,6 @@ script$k.__file = "src/components/form-view/QasFormView.vue";
 var script$j = {
   name: 'QasGallery',
 
-  mixins: [screenMixin],
-
   props: {
     carouselNextIcon: {
       type: String,
@@ -5753,13 +5721,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 +5862,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 +5880,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: "",
@@ -6248,7 +6216,7 @@ var script$f = {
   }
 };
 
-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 = resolveComponent("q-item-section");
@@ -6466,7 +6434,7 @@ const _hoisted_2$7 = { class: "relative-position" };
 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__*/createElementVNode("div", { class: "text-grey-6" }, "Nenhum item encontrado.", -1 /* HOISTED */);
+const _hoisted_6$1 = /*#__PURE__*/createElementVNode("div", { class: "text-grey-7" }, "Nenhum item encontrado.", -1 /* HOISTED */);
 const _hoisted_7$1 = {
   key: 2,
   class: "q-py-lg text-center"
@@ -6514,7 +6482,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
                       createElementVNode("div", _hoisted_5$3, [
                         createVNode(_component_q_icon, {
                           class: "q-mb-sm text-center",
-                          color: "grey-6",
+                          color: "grey-7",
                           name: "o_search",
                           size: "38px"
                         }),
@@ -7286,8 +7254,6 @@ var script$a = {
     QasGridGenerator: script$i
   },
 
-  mixins: [screenMixin],
-
   props: {
     columns: {
       type: Object,
@@ -7328,7 +7294,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 +7302,7 @@ var script$a = {
     },
 
     avatarSize () {
-      return this.mx_isSmall ? '145px' : '188px'
+      return this.$qas.screen.isSmall ? '145px' : '188px'
     }
   },
 
@@ -7490,7 +7456,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
 
   return (openBlock(), createBlock(_component_q_img, {
     ratio: $options.ratio,
-    "spinner-color": "grey-6",
+    "spinner-color": "grey-7",
     src: $options.imageSource
   }, {
     error: withCtx(() => [
@@ -7917,8 +7883,6 @@ var script$6 = {
     QasSearchBox: script$8
   },
 
-  mixins: [screenMixin],
-
   props: {
     deleteOnly: {
       type: Boolean
@@ -8024,9 +7988,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'
@@ -8229,7 +8193,7 @@ const _hoisted_2$2 = {
   key: 2,
   class: "q-my-xl text-center"
 };
-const _hoisted_3$1 = /*#__PURE__*/createElementVNode("div", { class: "text-grey-6" }, "Nenhum item encontrado.", -1 /* HOISTED */);
+const _hoisted_3$1 = /*#__PURE__*/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) {
@@ -8252,7 +8216,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
           ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
               createVNode(_component_q_icon, {
                 class: "q-mb-sm text-center",
-                color: "grey-6",
+                color: "grey-7",
                 name: "o_search",
                 size: "38px"
               }),
@@ -8427,8 +8391,6 @@ script$4.__file = "src/components/sortable/QasSortable.vue";
 var script$3 = {
   name: 'QasTableGenerator',
 
-  mixins: [screenMixin],
-
   props: {
     columns: {
       default: () => [],
@@ -8555,7 +8517,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 +8758,6 @@ var script$1 = {
     QasDialog: script$x
   },
 
-  mixins: [screenMixin],
-
   props: {
     dialogProps: {
       type: Object,
@@ -8837,7 +8797,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 +8899,6 @@ var script = {
     QasSearchBox: script$8
   },
 
-  mixins: [screenMixin],
-
   props: {
     emitValue: {
       type: Boolean
@@ -8998,15 +8956,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 +9221,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.5";
 var author = "Bild & Vitta <systemteam@bild.com.br>";
 var license = "MIT";
 var main = "dist/asteroid.cjs.min.js";