@bildvitta/quasar-ui-asteroid 2.14.0 → 3.0.0-alpha.1

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
-  "version": "2.14.0",
-  "description": "",
-  "main": "./src/index.js",
+  "description": "Asteroid",
+  "version": "3.0.0-alpha.1",
+  "author": "Bild & Vitta <systemteam@bild.com.br>",
+  "license": "MIT",
+  "main": "dist/asteroid.cjs.min.js",
+  "unpkg": "dist/asteroid.umd.min.js",
+  "jsdelivr": "dist/asteroid.umd.min.js",
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
-    "test": "npx jest",
-    "test:watch": "jest --watch",
-    "lint": "eslint ./src",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
-    "install-peer": "npm i vue@^2.6.14 --no-save"
+    "build": "npx rollup -c",
+    "dev": "cd dev && npm i && npm run dev && cd .."
   },
   "publishConfig": {
     "access": "public",
@@ -23,59 +27,40 @@
     "helpers",
     "components"
   ],
-  "author": "Inovação Bild & Vitta <inova@bild.com.br>",
-  "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/eslint-parser": "^7.12.1",
-    "@babel/preset-env": "^7.12.11",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-console": "^1.2.3",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/vue": "^6.2.9",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@vue/test-utils": "^1.1.2",
-    "autoprefixer": "^10.2.6",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^27.0.1",
-    "babel-loader": "^8.2.2",
-    "core-js": "^3.8.3",
-    "eslint": "^7.18.0",
-    "eslint-plugin-jest": "^24.1.3",
-    "eslint-plugin-vue": "^7.5.0",
-    "eslint-webpack-plugin": "^2.4.3",
-    "jest": "^27.0.3",
-    "postcss": "^8.3.5",
-    "react-is": "^17.0.1",
-    "sass": "^1.32.5",
-    "sass-loader": "^10.1.1",
-    "standard": "^16.0.3",
-    "vue-jest": "^3.0.7",
-    "vue-loader": "^15.9.6",
-    "vue-template-compiler": "^2.6.14"
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-replace": "^3.0.1",
+    "@rollup/plugin-url": "^6.1.0",
+    "@vue/compiler-sfc": "^3.2.31",
+    "autoprefixer": "^10.4.2",
+    "core-js": "^3.20.2",
+    "postcss": "^8.4.5",
+    "quasar": "^2.0.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.66.0",
+    "rollup-plugin-local-resolve": "^1.0.7",
+    "rollup-plugin-scss": "^3.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^6.0.0",
+    "sass": "^1.49.0"
   },
   "dependencies": {
-    "@quasar/extras": "^1.9.14",
+    "@fawmi/vue-google-maps": "^0.9.4",
     "autonumeric": "^4.6.0",
     "axios": "^0.21.1",
-    "date-fns": "^2.16.1",
-    "fuse.js": "^3.4.6",
+    "date-fns": "^2.28.0",
+    "fuse.js": "^6.5.3",
     "humps": "^2.0.1",
-    "lodash": "^4.17.21",
-    "pica": "^7.1.0",
-    "quasar": "^1.15.0",
-    "signature_pad": "^3.0.0-beta.4",
-    "sortablejs": "^1.12.0",
-    "vue-router": "^3.4.9",
-    "vuex": "^3.6.0"
-  },
-  "peerDependencies": {
-    "vue": "^2.6.14"
+    "lodash-es": "^4.17.21",
+    "pica": "^9.0.1",
+    "signature_pad": "^4.0.1",
+    "sortablejs": "^1.14.0"
   },
-  "engines": {
-    "node": ">= 12 < 15",
-    "npm": ">= 6 < 7"
+  "browserslist": [
+    "defaults"
+  ],
+  "vetur": {
+    "tags": "dist/vetur/asteroid-tags.json",
+    "attributes": "dist/vetur/asteroid-attributes.json"
   }
 }

package/src/assets/logo-modular.svg

@@ -1 +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>
+<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/asteroid.js

@@ -1,2 +1,3 @@
 export * from './helpers'
 export * from './mixins'
+export * from './vue-plugin'

package/src/components/actions/QasActions.vue

@@ -0,0 +1,45 @@
+<template>
+  <div :class="classes">
+    <div class="col-12 col-sm-auto">
+      <slot name="secondary" />
+    </div>
+
+    <div class="col-12 col-sm-auto">
+      <slot name="primary" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { screenMixin } from '../../mixins'
+
+export default {
+  name: 'QasActions',
+
+  mixins: [screenMixin],
+
+  props: {
+    align: {
+      default: 'end',
+      type: String,
+      validator: value => ['start', 'around', 'between', 'center', 'end'].includes(value)
+    },
+
+    gutter: {
+      default: 'md',
+      type: String,
+      validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+    }
+  },
+
+  computed: {
+    classes () {
+      return [
+        `justify-${this.align}`,
+        `q-col-gutter-${this.gutter}`,
+        this.mx_isSmall ? 'column reverse' : 'row'
+      ]
+    }
+  }
+}
+</script>

package/src/components/actions-menu/QasActionsMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <qas-btn class="qas-actions-menu" color="primary" v-bind="$attrs" hide-mobile-label :icon="icon" :label="labelValue" outline v-on="$listeners">
+  <qas-btn class="qas-actions-menu" color="primary" hide-label-on-small-screen :icon="icon" :label="label" outline>
     <q-menu class="qas-actions-menu__menu">
       <q-list class="qas-actions-menu__list" separator>
         <slot v-for="(item, key) in list" :item="item" :name="key">
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import QasBtn from '../btn/QasBtn'
+import QasBtn from '../btn/QasBtn.vue'
 
 export default {
   name: 'QasActionsMenu',
@@ -28,23 +28,19 @@ export default {
   },
 
   props: {
+    icon: {
+      default: 'o_settings',
+      type: String
+    },
+
     label: {
-      default: 'Settings',
+      default: 'Configurações',
       type: String
     },
 
     list: {
       default: () => ({}),
       type: Object
-    },
-
-    hideLabel: {
-      type: Boolean
-    },
-
-    icon: {
-      default: 'o_settings',
-      type: String
     }
   },
 
@@ -55,12 +51,6 @@ export default {
         item.handler(filtered)
       }
     }
-  },
-
-  computed: {
-    labelValue () {
-      return this.hideLabel ? '' : this.label
-    }
   }
 }
 </script>
@@ -70,7 +60,6 @@ export default {
   &__list {
     width: 265px;
     z-index: 1;
-
   }
 }
 </style>

package/src/components/alert/QasAlert.vue

@@ -0,0 +1,90 @@
+<template>
+  <div v-if="model" class="q-pa-lg qas-alert relative-position rounded-borders" :class="classes">
+    <qas-btn class="absolute-top-right q-mr-md q-mt-sm" :color="color" dense flat icon="o_close" rounded @click="close" />
+
+    <div class="q-gutter-md q-mr-lg">
+      <slot name="header">
+        <h5 v-if="title" class="text-bold text-h5">{{ title }}</h5>
+      </slot>
+
+      <slot>
+        <qas-breakline tag="p" :text="text" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import QasBreakline from '../breakline/QasBreakline.vue'
+import QasBtn from '../btn/QasBtn.vue'
+
+export default {
+  name: 'QasAlert',
+
+  components: {
+    QasBreakline,
+    QasBtn
+  },
+
+  props: {
+    color: {
+      default: 'primary',
+      type: String
+    },
+
+    modelValue: {
+      default: true,
+      type: Boolean
+    },
+
+    text: {
+      default: '',
+      type: String
+    },
+
+    title: {
+      default: '',
+      type: String
+    }
+  },
+
+  emits: ['update:modelValue'],
+
+  data () {
+    return {
+      model: true
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        [`text-${this.color}`]: true,
+        [`bg-${this.color}-contrast`]: ['primary', 'secondary'].includes(this.color)
+      }
+    }
+  },
+
+  watch: {
+    modelValue: {
+      handler (value) {
+        this.model = value
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    close () {
+      this.$emit('update:modelValue', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.qas-alert {
+  border-style: solid;
+  border-width: 0 10px;
+}
+</style>

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

@@ -1,19 +1,18 @@
 <template>
-  <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-header class="bg-white qas-app-bar shadow-primary" height-hint="70">
+    <q-toolbar class="qas-app-bar__toolbar" color="bg-white">
       <q-ajax-bar color="white" position="top" size="2px" />
 
       <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">
+          <img v-if="brand" :alt="title" class="q-mr-sm qas-app-bar__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>
@@ -23,16 +22,16 @@
       <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">
+        <div v-if="isAuth" class="cursor-pointer items-center q-mr-sm qas-app-bar__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 class="q-px-sm qas-toolbar__user-data qs-lh-lg text-caption">
+          <div class="q-px-sm qas-app-bar__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">
+          <q-menu anchor="bottom end" class="shadow-primary" max-height="400px" :offset="[0, 5]" self="top end">
+            <div class="qas-app-bar__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" />
@@ -60,8 +59,8 @@
 </template>
 
 <script>
-import QasAvatar from '../avatar/QasAvatar'
-import QasBtn from '../btn/QasBtn'
+import QasAvatar from '../avatar/QasAvatar.vue'
+import QasBtn from '../btn/QasBtn.vue'
 
 export default {
   name: 'QasAppBar',
@@ -98,6 +97,8 @@ export default {
     }
   },
 
+  emits: ['sign-out', 'toggle-menu'],
+
   data () {
     return {
       menuDrawer: true
@@ -157,12 +158,14 @@ export default {
 </script>
 
 <style lang="scss">
-.qas-toolbar {
-  height: 70px;
+.qas-app-bar {
+  &__toolbar {
+    height: 70px;
+  }
 
   &__brand {
     height: 24px;
-    margin-right: map-get($space-sm, x);
+    margin-right: 8px;
     position: relative;
     top: 4px;
   }

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

@@ -1,5 +1,5 @@
 <template>
-  <q-drawer v-model="model" class="qas-app-menu" :mini="miniMode" :width="230" v-on="$listeners" @before-hide="beforeHide" @mini-state="setMiniState">
+  <q-drawer v-model="model" class="qas-app-menu" :mini="miniMode" :width="230" @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">
@@ -7,7 +7,7 @@
             Você está no modulo:
           </div>
 
-          <qas-select v-model="module" :options="defaultModules" @input="redirectHandler(currentModelOption)" />
+          <qas-select v-model="module" :options="defaultModules" @update:model-value="redirectHandler(currentModelOption)" />
         </div>
 
         <q-list class="text-grey-9 text-weight-medium">
@@ -36,7 +36,8 @@
       </div>
 
       <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">
+        <!-- TODO: O Modular não é o Asteroid, então não podemos manter esse logo aqui. -->
+        <img v-if="!isMini" alt="Modular" class="block q-mb-md q-mx-auto" src="../../assets/logo-modular.svg">
       </div>
     </div>
   </q-drawer>
@@ -62,7 +63,7 @@ export default {
       type: Array
     },
 
-    value: {
+    modelValue: {
       default: true,
       type: Boolean
     },
@@ -78,6 +79,8 @@ export default {
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       miniMode: false,
@@ -113,11 +116,11 @@ export default {
 
     model: {
       get () {
-        return this.value
+        return this.modelValue
       },
 
       set (value) {
-        return this.$emit('input', value)
+        return this.$emit('update:modelValue', value)
       }
     },
 
@@ -155,7 +158,7 @@ export default {
     },
 
     beforeHide () {
-      if (this.$_isLarge) {
+      if (this.mx_isLarge) {
         this.model = true
         this.miniMode = !this.miniMode
       }

package/src/components/avatar/QasAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-avatar class="text-bold" :class="classes" rounded v-bind="$attrs" v-on="$listeners">
+  <q-avatar class="text-bold" :class="avatarClass" rounded>
     <q-img v-if="hasImage" :alt="title" :ratio="1" spinner-color="primary" spinner-size="16px" :src="image" @error="onImageLoadedError" />
     <template v-else-if="hasTitle">{{ firstLetter }}</template>
     <q-icon v-else :name="icon" />
@@ -8,6 +8,8 @@
 
 <script>
 export default {
+  name: 'QasAvatar',
+
   props: {
     color: {
       default: 'primary',
@@ -46,8 +48,10 @@ export default {
   },
 
   computed: {
-    classes () {
-      if (this.hasImage) return
+    avatarClass () {
+      if (this.hasImage) {
+        return null
+      }
 
       const contrastColor = this.textColor ? this.textColor : this.contrastColor
 

package/src/components/box/QasBox.vue

@@ -1,21 +1,29 @@
 <template>
-  <div v-bind="$attrs" class="bg-white q-px-md q-py-lg rounded-borders" :class="boxClass" v-on="$listeners">
+  <div class="bg-white q-px-md q-py-lg rounded-borders" :class="boxClass">
     <slot />
   </div>
 </template>
 
 <script>
 export default {
+  name: 'QasBox',
+
   props: {
-    // TODO: Alterar para o outlined e unelevated.
-    formMode: {
+    outlined: {
+      type: Boolean
+    },
+
+    unelevated: {
       type: Boolean
     }
   },
 
   computed: {
     boxClass () {
-      return this.formMode ? 'border-primary-contrast' : 'shadow-primary'
+      return {
+        'border-primary-contrast': this.outlined,
+        'shadow-primary': !this.unelevated
+      }
     }
   }
 }

package/src/components/box/QasBox.yml

@@ -0,0 +1,13 @@
+type: component
+
+meta:
+  desc: Um simples componente com fundo branco e bordas arredondadas para encapsular o seu conteúdo.
+
+props:
+  outlined:
+    desc: Insere uma borda sólida em volta do componente.
+    type: Boolean
+
+  unelevated:
+    desc: Remove a sombra do componente.
+    type: Boolean

package/src/components/breakline/QasBreakline.vue

@@ -0,0 +1,37 @@
+<template>
+  <component :is="tag" v-for="(line, index) in lines" :key="index" v-bind="$attrs">
+    {{ line }}
+  </component>
+</template>
+
+<script>
+import { getSlotChildrenText } from '../../helpers'
+
+export default {
+  name: 'QasBreakline',
+
+  props: {
+    split: {
+      default: '\n',
+      type: String
+    },
+
+    tag: {
+      default: 'div',
+      type: String
+    },
+
+    text: {
+      default: '',
+      type: String
+    }
+  },
+
+  computed: {
+    lines () {
+      const text = this.text || getSlotChildrenText(this.$slots.default())
+      return text.split(this.split)
+    }
+  }
+}
+</script>

package/src/components/breakline/QasBreakline.yml

@@ -0,0 +1,25 @@
+type: component
+
+meta:
+  desc: Permite encapsular quebra de linhas (\n) de um texto em uma tag HTML ou componente Vue.
+
+props:
+  split:
+    default: '\n'
+    desc: Caracter ou conjunto de caracteres que serão utilizados para dividir o texto.
+    type: String
+
+  tag:
+    default: div
+    desc: Tag HTML que será utilizada para encapsular o texto dividido.
+    examples: [p, span]
+    type: String
+
+  text:
+    default: ''
+    desc: Texto que será dividido.
+    type: String
+
+slots:
+  default:
+    desc: Texto que será dividido.