@bildvitta/quasar-ui-asteroid 2.12.1 → 2.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
-  "version": "2.12.1",
+  "version": "2.13.0",
   "description": "",
   "main": "./src/index.js",
   "scripts": {
@@ -58,6 +58,7 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.9.14",
+    "autonumeric": "^4.6.0",
     "axios": "^0.21.1",
     "date-fns": "^2.16.1",
     "fuse.js": "^3.4.6",

package/src/assets/logo-modular.svg

@@ -0,0 +1 @@
+<svg width="126" height="26" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity=".3"><g clip-path="url(#a)"><path d="M6.829 10.909c.02-2.295.059-4.6.119-6.895C9.197 2.653 11.41 1.3 13.58 0c2.172 1.301 4.393 2.653 6.634 4.014.07 2.295.11 4.6.12 6.895a342.175 342.175 0 0 0 6.048 3.417c-.02 2.504-.1 5.017-.238 7.521A575.699 575.699 0 0 0 19.392 26a404.892 404.892 0 0 1-5.81-3.388A525.05 525.05 0 0 1 7.77 26a574.702 574.702 0 0 0-6.753-4.153 158.72 158.72 0 0 1-.238-7.52 381.833 381.833 0 0 0 6.049-3.418Zm6.752-9.24c-1.487.884-2.994 1.788-4.521 2.702 1.487.855 2.994 1.73 4.521 2.613a830.152 830.152 0 0 1 4.522-2.613c-1.527-.904-3.034-1.818-4.522-2.702Zm.714 6.577v5.295c1.537-.884 3.064-1.768 4.591-2.642-.01-1.759-.03-3.507-.06-5.266-1.487.855-3.004 1.729-4.53 2.613Zm5.87 15.658a402.133 402.133 0 0 1 4.602-2.792c.079-1.719.128-3.438.158-5.156-1.547.884-3.084 1.788-4.62 2.692-.04 1.749-.08 3.507-.14 5.256Zm4.046-9.16c-1.517-.845-3.044-1.72-4.571-2.593a767.782 767.782 0 0 0-4.601 2.652c1.527.884 3.044 1.759 4.551 2.613 1.547-.894 3.084-1.788 4.621-2.672Zm-15.806 9.21c1.468-.835 2.955-1.71 4.462-2.594 0-1.768-.01-3.546-.01-5.315a577.521 577.521 0 0 1-4.56 2.623c.029 1.758.059 3.527.108 5.285Zm3.719-9.15c-1.537-.885-3.064-1.78-4.601-2.653a310.65 310.65 0 0 1-4.572 2.593c1.537.874 3.084 1.768 4.621 2.672a573.757 573.757 0 0 0 4.552-2.613Z" fill="#00314D"/></g><path d="m47.676 21.17-.022-10.315-5.113 8.536h-1.29l-5.112-8.403V21.17h-2.756V5.61h2.378l6.18 10.314L48.01 5.61h2.378l.022 15.56h-2.734ZM58.193 21.325c-1.2 0-2.282-.26-3.245-.778a5.774 5.774 0 0 1-2.268-2.156c-.533-.934-.8-1.986-.8-3.157 0-1.17.267-2.215.8-3.134a5.774 5.774 0 0 1 2.267-2.156c.964-.52 2.045-.778 3.246-.778 1.215 0 2.304.259 3.268.778a5.619 5.619 0 0 1 2.245 2.156c.548.919.822 1.963.822 3.134 0 1.17-.274 2.223-.822 3.157a5.62 5.62 0 0 1-2.245 2.156c-.964.518-2.053.778-3.268.778Zm0-2.379c1.023 0 1.867-.34 2.534-1.022.667-.682 1-1.578 1-2.69 0-1.111-.333-2.008-1-2.69-.667-.681-1.511-1.022-2.534-1.022s-1.867.34-2.534 1.022c-.652.682-.978 1.579-.978 2.69 0 1.112.326 2.008.978 2.69.667.681 1.511 1.022 2.534 1.022ZM78.513 4.675V21.17h-2.667v-1.534c-.46.563-1.03.986-1.712 1.267-.667.282-1.408.423-2.223.423-1.14 0-2.17-.252-3.09-.756a5.47 5.47 0 0 1-2.133-2.134c-.52-.934-.779-2-.779-3.2 0-1.201.26-2.26.778-3.18a5.471 5.471 0 0 1 2.135-2.134c.918-.504 1.948-.755 3.09-.755.785 0 1.503.133 2.155.4a4.337 4.337 0 0 1 1.668 1.2v-6.09h2.778Zm-6.268 14.271c.667 0 1.267-.148 1.8-.444a3.372 3.372 0 0 0 1.267-1.312c.312-.563.467-1.215.467-1.956 0-.74-.155-1.393-.467-1.956a3.217 3.217 0 0 0-1.267-1.29 3.507 3.507 0 0 0-1.8-.466c-.667 0-1.267.155-1.8.467a3.217 3.217 0 0 0-1.268 1.289c-.311.563-.467 1.215-.467 1.956 0 .741.156 1.393.467 1.956.311.563.734 1 1.267 1.312a3.644 3.644 0 0 0 1.8.444ZM91.854 9.299v11.87H89.21v-1.511c-.444.533-1 .948-1.667 1.244a5.487 5.487 0 0 1-2.156.423c-1.586 0-2.838-.437-3.757-1.312-.904-.889-1.356-2.2-1.356-3.934v-6.78h2.779V15.7c0 1.067.237 1.867.711 2.4.49.52 1.178.779 2.067.779.993 0 1.779-.304 2.357-.912.592-.622.889-1.511.889-2.667V9.299h2.778ZM93.805 4.675h2.78V21.17h-2.78V4.675ZM103.773 9.166c1.749 0 3.083.422 4.002 1.267.933.83 1.4 2.09 1.4 3.778v6.958h-2.623v-1.445c-.341.519-.83.92-1.467 1.2-.622.267-1.378.4-2.267.4-.89 0-1.668-.147-2.334-.444-.667-.311-1.186-.733-1.556-1.267a3.317 3.317 0 0 1-.534-1.845c0-1.067.393-1.919 1.178-2.556.8-.652 2.053-.978 3.757-.978h3.067v-.178c0-.83-.252-1.467-.755-1.912-.489-.444-1.223-.667-2.201-.667-.667 0-1.326.104-1.978.312-.638.207-1.179.496-1.623.867l-1.09-2.023c.623-.475 1.371-.838 2.246-1.09a9.984 9.984 0 0 1 2.778-.377Zm-.377 10.136c.696 0 1.311-.156 1.845-.467a2.638 2.638 0 0 0 1.155-1.378v-1.378h-2.867c-1.601 0-2.401.526-2.401 1.578 0 .504.2.904.6 1.2.4.297.956.445 1.668.445ZM113.997 11.033c.8-1.245 2.208-1.867 4.224-1.867v2.645a3.532 3.532 0 0 0-.645-.067c-1.082 0-1.927.319-2.534.956-.608.622-.912 1.526-.912 2.712v5.757h-2.778V9.3h2.645v1.734Z" fill="#00314D"/></g><defs><clipPath id="a"><path fill="#fff" transform="matrix(-1 0 0 1 26.383 0)" d="M0 0h25.603v26H0z"/></clipPath></defs></svg>

package/src/components/app-bar/QasAppBar.stories.js

@@ -17,10 +17,6 @@ export default {
   },
 
   argTypes: {
-    apps: {
-      description: 'List of apps with `href`, `image` and `label`. Used by QasAppsMenu.'
-    },
-
     brand: {
       description: 'Brand image path.'
     },

package/src/components/app-bar/QasAppBar.vue

@@ -1,82 +1,77 @@
 <template>
-  <q-toolbar class="qas-toolbar">
-    <q-ajax-bar color="white" position="top" size="2px" />
+  <q-header v-bind="$attrs" class="bg-white shadow-primary" height-hint="70" v-on="$listeners">
+    <q-toolbar class="qas-toolbar" color="bg-white">
+      <q-ajax-bar color="white" position="top" size="2px" />
 
-    <q-btn dense flat icon="o_menu" round @click="toggleMenuDrawer" />
+      <q-btn color="grey-7" dense flat icon="o_menu" round @click="toggleMenuDrawer" />
 
-    <q-toolbar-title class="flex">
-      <div class="cursor-pointer" @click="goToRoot">
-        <img v-if="brand" :alt="title" class="q-mr-sm qas-toolbar__brand" :src="brand">
-        <span v-if="title" class="text-bold text-primary-contrast text-subtitle1 text-uppercase">{{ title }}</span>
-        <q-badge v-if="hasDevelopmentBadge" align="middle" class="q-ml-sm" color="negative" :label="developmentBadgeLabel" />
-      </div>
-    </q-toolbar-title>
+      <q-toolbar-title class="flex">
+        <div class="cursor-pointer" @click="goToRoot">
+          <img v-if="brand" :alt="title" class="q-mr-sm qas-toolbar__brand" :src="brand">
+          <span v-if="showTitle" class="text-bold text-grey-9 text-subtitle1 text-uppercase">{{ title }}</span>
+          <q-badge v-if="hasDevelopmentBadge" align="middle" class="q-ml-sm" color="negative" :label="developmentBadgeLabel" />
+        </div>
+      </q-toolbar-title>
 
-    <!-- TODO: Notificações. -->
-    <div v-if="hasNotifications" class="q-mr-md">
-      <q-btn class="q-mr-md" dense icon="o_notifications" round unelevated>
-        <q-badge v-if="notifications" color="red" floating>{{ notifications.count }}</q-badge>
-      </q-btn>
-    </div>
+      <!-- TODO: Notificações. -->
+      <div v-if="hasNotifications" class="q-mr-md">
+        <q-btn class="q-mr-md" dense icon="o_notifications" round unelevated>
+          <q-badge v-if="notifications" color="red" floating>{{ notifications.count }}</q-badge>
+        </q-btn>
+      </div>
 
-    <qas-apps-menu v-if="hasApps" :apps="apps" class="q-mr-md" />
+      <div class="items-center no-wrap q-gutter-md row">
+        <slot name="tools" />
 
-    <div class="items-center no-wrap q-gutter-md row">
-      <slot name="tools" />
+        <div v-if="isAuth" class="cursor-pointer items-center q-mr-sm qas-toolbar__user rounded-borders row text-grey-9" :title="user.name || user.givenName">
+          <qas-avatar class="rounded-borders-left" color="white" dark :image="user.photo" rounded size="42px" text-color="primary" :title="user.name || user.givenName" />
 
-      <div v-if="isAuth" class="cursor-pointer items-center q-mr-sm qas-toolbar__user rounded-borders row" :title="user.name || user.givenName">
-        <qas-avatar class="rounded-borders-left" color="white" dark :image="user.photo" rounded size="42px" text-color="primary" :title="user.name || user.givenName" />
+          <div class="q-px-sm qas-toolbar__user-data qs-lh-lg text-caption">
+            <div class="ellipsis">{{ user.name || user.givenName }}</div>
+            <div class="ellipsis text-bold">{{ user.email }}</div>
+          </div>
 
-        <div class="q-px-sm qas-toolbar__user-data qs-lh-lg text-caption">
-          <div class="ellipsis">{{ user.name || user.givenName }}</div>
-          <div class="ellipsis text-bold">{{ user.email }}</div>
-        </div>
+          <q-menu anchor="bottom end" content-class="shadow-primary" max-height="400px" :offset="[0, 5]" self="top end">
+            <div class="qas-toolbar__user-menu">
+              <div class="q-pa-lg text-center">
+                <button class="unset" @click="goToProfile">
+                  <qas-avatar :image="user.photo" size="145px" :title="user.name || user.givenName" />
+                </button>
 
-        <q-menu anchor="bottom end" content-class="shadow-primary" max-height="400px" :offset="[0, 5]" self="top end">
-          <div class="qas-toolbar__user-menu">
-            <div class="q-pa-lg text-center">
-              <button class="unset" @click="goToProfile">
-                <qas-avatar :image="user.photo" size="145px" :title="user.name || user.givenName" />
-              </button>
+                <div class="ellipsis q-mt-lg qs-lh-sm text-bold text-subtitle1">{{ user.name || user.givenName }}</div>
+                <div class="ellipsis q-mt-xs text-caption">{{ user.email }}</div>
 
-              <div class="ellipsis q-mt-lg qs-lh-sm text-bold text-subtitle1">{{ user.name || user.givenName }}</div>
-              <div class="ellipsis q-mt-xs text-caption">{{ user.email }}</div>
+                <div class="q-mt-sm">
+                  <qas-btn flat icon="o_edit" label="Editar" :to="user.to" />
+                </div>
 
-              <div class="q-mt-sm">
-                <qas-btn flat icon="o_edit" label="Editar" :to="user.to" />
-              </div>
+                <div class="q-mt-sm">
+                  <qas-btn v-close-popup class="q-px-lg q-py-xs" dense icon="o_exit_to_app" label="Sair" outline @click="signOut" />
+                </div>
 
-              <div class="q-mt-sm">
-                <qas-btn v-close-popup class="q-px-lg q-py-xs" dense icon="o_exit_to_app" label="Sair" outline @click="signOut" />
+                <slot name="user" :user="user" />
               </div>
-
-              <slot name="user" :user="user" />
             </div>
-          </div>
-        </q-menu>
+          </q-menu>
+        </div>
       </div>
-    </div>
-  </q-toolbar>
+    </q-toolbar>
+  </q-header>
 </template>
 
 <script>
-import QasAppsMenu from '../apps-menu/QasAppsMenu'
 import QasAvatar from '../avatar/QasAvatar'
 import QasBtn from '../btn/QasBtn'
 
 export default {
+  name: 'QasAppBar',
+
   components: {
-    QasAppsMenu,
     QasAvatar,
     QasBtn
   },
 
   props: {
-    apps: {
-      default: () => [],
-      type: Array
-    },
-
     brand: {
       default: '',
       type: String
@@ -128,16 +123,16 @@ export default {
       return current ? hosts[current] : ''
     },
 
-    hasApps () {
-      return !!this.apps.length
-    },
-
     hasDevelopmentBadge () {
       return !!this.developmentBadgeLabel
     },
 
     hasNotifications () {
       return !!Object.keys(this.notifications).length
+    },
+
+    showTitle () {
+      return this.title && !this.brand
     }
   },
 
@@ -173,7 +168,7 @@ export default {
   }
 
   &__user {
-    background-color: rgba(white, 0.1);
+    background-color: var(--qas-background-color);
     transition: background-color $generic-hover-transition;
 
     &:focus,

package/src/components/app-menu/QasAppMenu.vue

@@ -1,28 +1,44 @@
 <template>
-  <q-drawer v-model="model" content-class="bg-primary-contrast" :mini="miniMode" :width="230" @before-hide="beforeHide">
-    <q-list class="text-primary" padding>
-      <div v-for="(header, index) in items" :key="index">
-        <q-expansion-item v-if="hasChildren(header)" :active-class="activeSecondaryItemClasses" :default-opened="shouldExpand(header)" expand-icon="o_keyboard_arrow_down" expand-separator :icon="header.icon" :label="header.label" :to="header.to">
-          <q-item v-for="(item, itemIndex) in header.children" :key="itemIndex" v-ripple :active-class="activeItemClasses" clickable :to="item.to">
-            <q-item-section v-if="item.icon" avatar>
-              <q-icon :name="item.icon" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>{{ item.label }}</q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-expansion-item>
-
-        <q-item v-else :key="index" v-ripple :active-class="activeItemClasses" clickable :to="header.to">
-          <q-item-section v-if="header.icon" avatar>
-            <q-icon :name="header.icon" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>{{ header.label }}</q-item-label>
-          </q-item-section>
-        </q-item>
+  <q-drawer v-model="model" class="qas-app-menu" :mini="miniMode" :width="230" v-on="$listeners" @before-hide="beforeHide" @mini-state="setMiniState">
+    <div class="column flex full-height justify-between no-wrap overflow-x-hidden">
+      <div>
+        <div v-if="displayModuleSection" class="q-ma-md">
+          <div class="q-mb-sm text-caption text-grey-7 text-weight-medium">
+            Você está no modulo:
+          </div>
+
+          <qas-select v-model="module" :options="modules" @input="redirectHandler(currentModelOption)" />
+        </div>
+
+        <q-list class="text-grey-9 text-weight-medium">
+          <template v-for="(header, index) in items">
+            <q-expansion-item v-if="hasChildren(header)" :key="header.label" :ref="`item-${index}`" :default-opened="shouldExpand(header)" expand-icon="o_keyboard_arrow_down" expand-separator group="item" :icon="header.icon" :label="header.label" :to="header.to" @click="toggleItem(index)" :active-class="activeItemClassesSecondary">
+              <q-item v-for="(item, itemIndex) in header.children" :key="itemIndex" v-ripple :active-class="activeItemClasses" clickable :to="item.to">
+                <q-item-section v-if="item.icon" avatar>
+                  <q-icon :name="item.icon" />
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label>{{ item.label }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-expansion-item>
+
+            <q-item v-else :key="index" v-ripple :active-class="activeItemClasses" clickable :to="header.to">
+              <q-item-section v-if="header.icon" avatar>
+                <q-icon :name="header.icon" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label>{{ header.label }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-list>
       </div>
-    </q-list>
+
+      <div class="q-mx-md">
+        <img v-if="!isMini" alt="modular logo" class="block q-mb-md q-mx-auto" src="../../assets/logo-modular.svg">
+      </div>
+    </div>
   </q-drawer>
 </template>
 
@@ -30,6 +46,8 @@
 import { screenMixin } from '../../mixins'
 
 export default {
+  name: 'QasAppMenu',
+
   mixins: [screenMixin],
 
   props: {
@@ -46,22 +64,34 @@ export default {
     value: {
       default: true,
       type: Boolean
+    },
+
+    modules: {
+      default: () => [],
+      type: Array
+    },
+
+    currentModule: {
+      default: '',
+      type: String
     }
   },
 
   data () {
     return {
-      miniMode: false
+      miniMode: false,
+      module: '',
+      isMini: false
     }
   },
 
   computed: {
     activeItemClasses () {
-      return 'bg-primary text-primary-contrast'
+      return 'bg-primary-contrast text-primary text-weight-bold'
     },
 
-    activeSecondaryItemClasses () {
-      return 'active bg-secondary-contrast text-primary-contrast'
+    activeItemClassesSecondary () {
+      return 'text-primary bg-secondary-contrast'
     },
 
     model: {
@@ -72,6 +102,23 @@ export default {
       set (value) {
         return this.$emit('input', value)
       }
+    },
+
+    currentModelOption () {
+      return this.modules.find(module => module?.value === this.module)
+    },
+
+    displayModuleSection () {
+      return !this.isMini && this.modules.length
+    }
+  },
+
+  watch: {
+    currentModule: {
+      handler (value) {
+        this.module = value
+      },
+      immediate: true
     }
   },
 
@@ -81,7 +128,7 @@ export default {
     },
 
     shouldExpand ({ children, to }) {
-      return children?.length && this.$route.matched.some(item => item.path === to.path)
+      return children?.length && this.$route.matched.some(item => item?.path === to?.path)
     },
 
     beforeHide () {
@@ -89,21 +136,35 @@ export default {
         this.model = true
         this.miniMode = !this.miniMode
       }
+    },
+
+    setMiniState (value) {
+      this.isMini = value
+    },
+
+    redirectHandler ({ path }) {
+      if (!path.includes(window.location.host)) {
+        window.location.href = path
+      }
+    },
+
+    toggleItem (index) {
+      const component = this.getComponent(index)
+
+      component?.to && this.isMini && component.toggle()
+    },
+
+    getComponent (index) {
+      return this.$refs[`item-${index}`]?.[0]
     }
   }
 }
 </script>
 
 <style lang="scss">
-.q-expansion-item {
-  .active .q-expansion-item__toggle-icon {
-    color: white !important;
-    opacity: 1;
-  }
-
-  .q-expansion-item__toggle-icon {
-    color: $primary;
-    opacity: 0.2;
+.qas-app-menu {
+  .q-expansion-item--expanded .q-item:not(&--active.q-item) {
+    background-color: $grey-1;
   }
 }
 </style>

package/src/components/field/QasField.vue

@@ -12,8 +12,8 @@
 <script>
 import QasCheckboxGroup from '../checkbox-group/QasCheckboxGroup.vue'
 import QasDateTimeInput from '../date-time-input/QasDateTimeInput.vue'
-import QasDecimalInput from '../decimal-input/QasDecimalInput.vue'
 import QasInput from '../input/QasInput.vue'
+import QasNumericInput from '../numeric-input/QasNumericInput.vue'
 import QasPasswordInput from '../password-input/QasPasswordInput.vue'
 import QasUploader from '../uploader/QasUploader.vue'
 import QasSignatureUploader from '../signature-uploader/QasSignatureUploader.vue'
@@ -30,8 +30,8 @@ export default {
   components: {
     QasCheckboxGroup,
     QasDateTimeInput,
-    QasDecimalInput,
     QasInput,
+    QasNumericInput,
     QasPasswordInput,
     QasUploader,
     QasSignatureUploader
@@ -96,8 +96,8 @@ export default {
         gmt
       }
 
+      const numericInput = { is: 'qas-numeric-input', ...input }
       const datetimeInput = { is: 'qas-date-time-input', gmt, ...input }
-      const decimalInput = { is: 'qas-decimal-input', comma: true, fillMask: '0', reverseFillMask: true, ...input }
 
       // It'll generate a list of acceptable files extensions.
       const accept = extensions && extensions.length ? extensions.map(extension => `.${extension}`).join(',') : ''
@@ -121,9 +121,9 @@ export default {
         email: { is: 'q-input', type, ...input },
         password: { is: 'qas-password-input', type, pattern, hideStrengthChecker: !pattern, ...input },
 
-        decimal: { ...decimalInput },
-        money: { ...decimalInput, prefix: 'R$' },
-        percent: { ...decimalInput, suffix: '%' },
+        decimal: { ...numericInput, mode: 'decimal' },
+        money: { ...numericInput, mode: 'money' },
+        percent: { ...numericInput, mode: 'percent' },
 
         date: { ...datetimeInput, dateOnly: true },
         datetime: { ...datetimeInput },

package/src/components/filters/QasFilters.vue

@@ -41,7 +41,7 @@
     </div>
 
     <div v-if="badges && hasActiveFilters" class="q-mt-md">
-      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="grey-4" dense removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ filterItem.label }} = "{{ filterItem.value }}"</q-chip>
+      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="grey-4" dense removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ filterItem.label }} = "{{ getChipValue(filterItem.value) }}"</q-chip>
     </div>
 
     <slot :context="context" :filter="filter" :filters="activeFilters" :removeFilter="removeFilter" />
@@ -122,7 +122,7 @@ export default {
         const hasField = fields.includes(key)
 
         if (hasField) {
-          const value = humanize(this.fields[key], filters[key])
+          const value = humanize(this.fields[key], this.normalizeValues(filters[key], this.fields[key]?.multiple))
           const { label, name } = this.fields[key]
 
           activeFilters[key] = { label, name, value }
@@ -188,7 +188,7 @@ export default {
 
   created () {
     this.fetchFilters()
-    this.updateValues()
+    this.watchOnceFields()
   },
 
   methods: {
@@ -252,6 +252,10 @@ export default {
       this.$router.push({ query })
     },
 
+    getChipValue (value) {
+      return Array.isArray(value) ? value.join(', ') : value
+    },
+
     removeFilter ({ name }) {
       const query = { ...this.$route.query }
 
@@ -266,8 +270,23 @@ export default {
       this.search = search || ''
 
       for (const key in filters) {
-        this.$set(this.filters, key, parseValue(filters[key]))
+        this.$set(this.filters, key, parseValue(this.normalizeValues(filters[key], this.fields[key]?.multiple)))
       }
+    },
+
+    normalizeValues (value, isMultiple) {
+      if (Array.isArray(value)) return value
+
+      return isMultiple ? [value] : value
+    },
+
+    watchOnceFields () {
+      const watchOnce = this.$watch('fields', values => {
+        if (Object.keys(values).length) {
+          this.updateValues()
+          watchOnce()
+        }
+      })
     }
   }
 }

package/src/components/layout/QasLayout.stories.js

@@ -0,0 +1,106 @@
+import QasLayout from './QasLayout.vue'
+
+export default {
+  component: QasLayout,
+  title: 'Components/Layout',
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'Implementation of [QLayout](https://quasar.dev/layout/layout#introduction) with [QasAppMenu](http://localhost:6006/?path=/docs/components-appmenu--default) and [QasAppBar](http://localhost:6006/?path=/docs/components-appbar--default).'
+      }
+    }
+  },
+
+  argTypes: {
+    // Props
+    appMenuProps: {
+      description: '[QasAppMenu props](http://localhost:6006/?path=/docs/components-appmenu--default).'
+    },
+
+    appBarProps: {
+      description: '[QasAppBar props](http://localhost:6006/?path=/docs/components-appbar--default).'
+    },
+
+    appMenuEvents: {
+      description: '[QasAppMenu events](http://localhost:6006/?path=/docs/components-appmenu--default).'
+    },
+
+    appBarEvents: {
+      description: '[QasAppBar events](http://localhost:6006/?path=/docs/components-appbar--default).'
+    },
+
+    value: {
+      description: 'Model value for toggle drawer.'
+    },
+
+    // Slots
+    'app-bar': {
+      description: 'header slot.'
+    },
+
+    'app-menu': {
+      description: 'left side menu.'
+    },
+
+    default: {
+      description: 'page container with router-view.'
+    },
+
+    // events
+    input: {
+      description: 'input model event for toggle drawer.'
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => ({
+  components: { QasLayout },
+  props: Object.keys(argTypes),
+
+  template: '<qas-layout v-bind="$props" />'
+})
+
+export const Default = Template.bind({})
+
+Default.args = {
+  appMenuProps: {
+    items: [
+      {
+        label: 'Dialog',
+        icon: 'o_home',
+        to: { path: '/dialog-form' }
+      },
+
+      {
+        label: 'Teste expansivo',
+        icon: 'o_edit'
+      }
+    ],
+
+    modules: [
+      {
+        label: 'Modulo de teste',
+        value: 'test',
+        path: 'http://localhost:8080'
+      },
+      {
+        label: 'Segundo modulo de teste',
+        value: 'test-2',
+        path: 'https://google.com'
+      }
+    ],
+
+    currentModule: 'test'
+  },
+
+  appBarProps: {
+    isAuth: true,
+    title: 'Some title',
+    user: {
+      photo: 'https://www.abc.net.au/cm/lb/6367016/data/alan2c-see-the-person-data.jpg',
+      name: 'Eduardo Lima',
+      email: 'eduardolima@gmail.com'
+    }
+  }
+}

package/src/components/layout/QasLayout.vue

@@ -0,0 +1,84 @@
+<template>
+  <q-layout view="hHh Lpr lFf">
+    <slot name="app-bar">
+      <qas-app-bar v-bind="appBarProps" v-on="appBarEvents" @toggle-menu="toggleMenuDrawer" />
+    </slot>
+
+    <slot name="app-menu">
+      <qas-app-menu v-model="menuDrawer" v-bind="appMenuProps" v-on="appMenuEvents" />
+    </slot>
+
+    <slot>
+      <q-page-container>
+        <router-view />
+      </q-page-container>
+    </slot>
+  </q-layout>
+</template>
+
+<script>
+import QasAppMenu from '../app-menu/QasAppMenu'
+import QasAppBar from '../app-bar/QasAppBar'
+
+export default {
+  name: 'QasLayout',
+
+  components: {
+    QasAppMenu,
+    QasAppBar
+  },
+
+  props: {
+    value: {
+      default: true,
+      type: Boolean
+    },
+
+    appBarEvents: {
+      default: () => ({}),
+      type: Object
+    },
+
+    appBarProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    appMenuProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    appMenuEvents: {
+      default: () => ({}),
+      type: Object
+    }
+  },
+
+  data () {
+    return {
+      menuDrawer: true
+    }
+  },
+
+  watch: {
+    $route () {
+      console.log('chamado no layout')
+    },
+
+    value: {
+      handler (value) {
+        this.menuDrawer = value
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    toggleMenuDrawer () {
+      this.menuDrawer = !this.menuDrawer
+      this.$emit('input', this.menuDrawer)
+    }
+  }
+}
+</script>

package/src/components/{decimal-input/QasDecimalInput.stories.js → numeric-input/QasNumericInput.stories.js}

@@ -1,25 +1,41 @@
-import QasDecimalInput from './QasDecimalInput.vue'
+import QasNumericInput from './QasNumericInput.vue'
 
 export default {
-  component: QasDecimalInput,
-  title: 'Components/DecimalInput',
+  component: QasNumericInput,
+  title: 'Components/NumericInput',
 
   parameters: {
     docs: {
       description: {
-        component: 'Extends [QInput](https://quasar.dev/vue-components/input), but with decimal mask.'
+        component: 'Extends [QInput](https://quasar.dev/vue-components/input) with [AutoNumeric](http://autonumeric.org/) plugin.'
       }
     }
   },
 
   argTypes: {
     // Props
-    comma: {
-      description: 'Use comma instead of period as decimal separator.'
+    allowNegative: {
+      description: 'Allow negative values.'
     },
 
-    places: {
-      description: 'Number of decimal places.'
+    allowPositive: {
+      description: 'Allow positive values.'
+    },
+
+    autonumericProps: {
+      description: '(Autonumeric)[http://autonumeric.org/guide] options.'
+    },
+
+    decimalPlaces: {
+      description: 'Decimal places.'
+    },
+
+    mode: {
+      description: 'Component mode like integer, decimal, percent, and money.'
+    },
+
+    preset: {
+      description: 'Property to configure default nationality of currency.'
     },
 
     value: {
@@ -35,16 +51,12 @@ export default {
           summary: '{}'
         }
       }
-    },
-
-    mount: {
-      table: { disable: true }
     }
   }
 }
 
 const Template = (args, { argTypes }) => ({
-  components: { QasDecimalInput },
+  components: { QasNumericInput },
   props: Object.keys(argTypes),
 
   data () {
@@ -55,7 +67,7 @@ const Template = (args, { argTypes }) => ({
 
   template:
     `<div>
-      <qas-decimal-input v-bind="$props" v-model="model" />
+      <qas-numeric-input v-bind="$props" v-model="model" />
       <pre>{{ model }}</pre>
     </div>`
 })
@@ -64,19 +76,17 @@ export const Default = Template.bind({})
 
 Default.parameters = {
   docs: {
-    source: { code: '<qas-decimal-input v-model="model" />' }
+    source: { code: '<qas-numeric-input v-model="model" />' }
   }
 }
 
 export const BrazilianReal = Template.bind({})
 
 BrazilianReal.args = {
-  comma: true,
-  prefix: 'R$'
 }
 
 BrazilianReal.parameters = {
   docs: {
-    source: { code: '<qas-decimal-input v-model="model" comma prefix="R$" />' }
+    source: { code: '<qas-numeric-input v-model="model" />' }
   }
 }

package/src/components/numeric-input/QasNumericInput.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <q-field v-model="model" v-bind="$attrs">
+      <template #control="{ emitValue, floatingLabel, id, value: modelValue }">
+        <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :model-value="modelValue" @input="emitValue($event.target.value)">
+      </template>
+    </q-field>
+  </div>
+</template>
+
+<script>
+const defaultModes = {
+  integer: ['commaDecimalCharDotSeparator', 'integer'],
+  decimal: 'commaDecimalCharDotSeparator',
+  percent: 'percentageEU2dec',
+  money: 'Brazilian'
+}
+
+export default {
+  props: {
+    allowNegative: {
+      default: true,
+      type: Boolean
+    },
+
+    allowPositive: {
+      default: true,
+      type: Boolean
+    },
+
+    autonumericProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    decimalPlaces: {
+      default: 2,
+      type: Number
+    },
+
+    mode: {
+      default: 'integer',
+      type: String,
+      validator: value => ['integer', 'decimal', 'percent', 'money'].includes(value)
+    },
+
+    preset: {
+      default: false,
+      type: [Boolean, String]
+    },
+
+    value: {
+      default: '',
+      validator (value) {
+        return typeof value === 'number' || typeof value === 'string' || value === '' || value === null
+      }
+    }
+  },
+
+  data () {
+    return {
+      autoNumeric: null
+    }
+  },
+
+  computed: {
+    defaultMode () {
+      return defaultModes[this.mode]
+    },
+
+    model: {
+      get () {
+        return this.value
+      },
+
+      set () {
+        this.$emit('input', this.autoNumeric.getNumber())
+      }
+    }
+  },
+
+  async created () {
+    const AutoNumeric = (await import('autonumeric')).default
+    const autoNumericPredefinedOptions = AutoNumeric.getPredefinedOptions()
+
+    let option = this.preset || this.defaultMode
+
+    if (!Array.isArray(option)) {
+      option = [option]
+    }
+
+    const options = {}
+
+    for (const value of option) {
+      Object.assign(options, autoNumericPredefinedOptions[value])
+    }
+
+    if (!this.allowNegative) {
+      options.minimumValue = 0
+    }
+
+    if (!this.allowPositive) {
+      options.maximumValue = 0
+    }
+
+    if (this.mode !== 'integer') {
+      options.decimalPlaces = this.decimalPlaces
+    }
+
+    Object.assign(options, this.autonumericProps)
+
+    this.$nextTick(() => {
+      this.$refs.input.value = this.value
+      this.autoNumeric = new AutoNumeric(this.$refs.input, options)
+    })
+  },
+
+  beforeDestroy () {
+    this.autoNumeric.remove()
+  }
+}
+</script>

package/src/components/select/QasSelect.vue

@@ -26,6 +26,8 @@
 
 <script>
 export default {
+  name: 'QasSelect',
+
   props: {
     fuseOptions: {
       default: () => ({}),

package/src/helpers/filters.js

@@ -96,6 +96,8 @@ function handleMasks (value) {
 
 // Labels
 function humanize (field = {}, value) {
+  if (!value) return value
+  
   const mappedMasks = handleMasks(value)
 
   if (mappedMasks[field.mask]) {

package/src/index.js

@@ -14,7 +14,6 @@ import QasCheckboxGroup from './components/checkbox-group/QasCheckboxGroup'
 import QasCopy from './components/copy/QasCopy'
 import QasDateTimeInput from './components/date-time-input/QasDateTimeInput'
 import QasDebugger from './components/debugger/QasDebugger'
-import QasDecimalInput from './components/decimal-input/QasDecimalInput'
 import QasDelete from './components/delete/QasDelete'
 import QasDialog from './components/dialog/QasDialog'
 import QasDialogRouter from './components/dialog-router/QasDialogRouter'
@@ -26,10 +25,12 @@ import QasGallery from './components/gallery/QasGallery'
 import QasGridGenerator from './components/grid-generator/QasGridGenerator'
 import QasInput from './components/input/QasInput'
 import QasLabel from './components/label/QasLabel'
+import QasLayout from './components/layout/QasLayout'
 import QasListItems from './components/list-items/QasListItems'
 import QasListView from './components/list-view/QasListView'
 import QasMap from './components/map/QasMap'
 import QasNestedFields from './components/nested-fields/QasNestedFields'
+import QasNumericInput from './components/numeric-input/QasNumericInput'
 import QasPageHeader from './components/page-header/QasPageHeader'
 import QasPasswordInput from './components/password-input/QasPasswordInput'
 import QasPasswordStrengthChecker from './components/password-strength-checker/QasPasswordStrengthChecker'
@@ -87,7 +88,6 @@ export {
   QasCopy,
   QasDateTimeInput,
   QasDebugger,
-  QasDecimalInput,
   QasDelete,
   QasDialog,
   QasDialogRouter,
@@ -99,10 +99,12 @@ export {
   QasGridGenerator,
   QasInput,
   QasLabel,
+  QasLayout,
   QasListItems,
   QasListView,
   QasMap,
   QasNestedFields,
+  QasNumericInput,
   QasPageHeader,
   QasPasswordInput,
   QasPasswordStrengthChecker,
@@ -146,7 +148,6 @@ export default {
   QasCopy,
   QasDateTimeInput,
   QasDebugger,
-  QasDecimalInput,
   QasDelete,
   QasDialog,
   QasDialogRouter,
@@ -158,10 +159,12 @@ export default {
   QasGridGenerator,
   QasInput,
   QasLabel,
+  QasLayout,
   QasListItems,
   QasListView,
   QasMap,
   QasNestedFields,
+  QasNumericInput,
   QasPageHeader,
   QasPasswordInput,
   QasPasswordStrengthChecker,
@@ -204,7 +207,6 @@ export default {
     Vue.component('QasCopy', QasCopy)
     Vue.component('QasDateTimeInput', QasDateTimeInput)
     Vue.component('QasDebugger', QasDebugger)
-    Vue.component('QasDecimalInput', QasDecimalInput)
     Vue.component('QasDelete', QasDelete)
     Vue.component('QasDialog', QasDialog)
     Vue.component('QasDialogRouter', QasDialogRouter)
@@ -216,10 +218,12 @@ export default {
     Vue.component('QasGridGenerator', QasGridGenerator)
     Vue.component('QasInput', QasInput)
     Vue.component('QasLabel', QasLabel)
+    Vue.component('QasLayout', QasLayout)
     Vue.component('QasListItems', QasListItems)
     Vue.component('QasListView', QasListView)
     Vue.component('QasMap', QasMap)
     Vue.component('QasNestedFields', QasNestedFields)
+    Vue.component('QasNumericInput', QasNumericInput)
     Vue.component('QasPageHeader', QasPageHeader)
     Vue.component('QasPasswordInput', QasPasswordInput)
     Vue.component('QasPasswordStrengthChecker', QasPasswordStrengthChecker)

package/src/index.scss

@@ -9,7 +9,7 @@ $secondary-contrast: var(--q-color-secondary-contrast);
 
 // Asteroid variables
 :root {
-  --qas-background-color: #fcfcff;
+  --qas-background-color: #f5f5f5;
   --qas-generic-border-radius: 8px;
 }
 

package/src/components/decimal-input/QasDecimalInput.vue

@@ -1,90 +0,0 @@
-<template>
-  <q-input v-bind="$attrs" fill-mask="0" :mask="mask" reverse-fill-mask :value="inputValue" v-on="events" @input="input" />
-</template>
-
-<script>
-export default {
-  props: {
-    comma: {
-      default: false,
-      type: Boolean
-    },
-
-    places: {
-      default: 2,
-      type: Number
-    },
-
-    value: {
-      default: 0,
-      required: true,
-      type: Number
-    }
-  },
-
-  data () {
-    return {
-      inputValue: this.toMask(this.value),
-      inputedValue: 0
-    }
-  },
-
-  computed: {
-    events () {
-      const { input, ...events } = this.$listeners
-      return events
-    },
-
-    mask () {
-      return `#${this.separator}${'#'.repeat(this.places)}`
-    },
-
-    separator () {
-      return this.comma ? ',' : '.'
-    }
-  },
-
-  watch: {
-    value (current) {
-      this.inputValue = this.toMask(current)
-    }
-  },
-
-  mounted () {
-    this.$emit('mount', this)
-  },
-
-  methods: {
-    blur () {
-      this.$el.blur()
-    },
-
-    focus () {
-      this.$el.focus()
-    },
-
-    input (value) {
-      this.inputedValue = this.toDecimal(value)
-      this.$emit('input', this.inputedValue)
-    },
-
-    toDecimal (value) {
-      if (this.comma) {
-        value = value.replace(',', '.')
-      }
-
-      return parseFloat(value)
-    },
-
-    toMask (value) {
-      value = value.toFixed(this.places)
-
-      if (this.comma) {
-        value = value.replace('.', ',')
-      }
-
-      return value
-    }
-  }
-}
-</script>