@bildvitta/quasar-ui-asteroid 3.5.0-beta.7 → 3.5.0-beta.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.5.0-beta.7",
+  "version": "3.5.0-beta.8",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

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

@@ -13,7 +13,7 @@
 
         <!-- Module -->
         <div v-if="displayModuleSection" class="q-mt-xl q-px-lg qas-app-menu__module">
-          <qas-select v-model="module" borderless class="q-py-xs rounded-borders shadow-2" dense input-class="q-px-md" :options="defaultModules" :outlined="false" :use-search="false" @update:model-value="redirectHandler(currentModelOption)" />
+          <qas-select v-model="module" borderless class="q-py-xs qas-app-menu__select shadow-2" dense input-class="q-px-md" :options="defaultModules" :outlined="false" :use-search="false" @update:model-value="redirectHandler(currentModelOption)" />
         </div>
 
         <!-- Menu -->
@@ -259,6 +259,10 @@ export default {
     padding-left: var(--qas-spacing-lg);
   }
 
+  &__select {
+    border-radius: 4px;
+  }
+
   // User
   .qas-app-user__data {
     line-height: 1.25;

package/src/components/app-user/QasAppUser.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="cursor-pointer items-center no-wrap q-gutter-sm qas-app-user row">
     <div class="relative-position">
-      <qas-avatar color="white" dark :image="user.photo" rounded :size="avatarSize" text-color="primary" :title="userName" />
+      <qas-avatar :image="user.photo" :size="avatarSize" :title="userName" />
       <q-badge v-if="hasNotifications" color="red" floating>{{ notifications.count }}</q-badge>
     </div>
 

package/src/components/avatar/QasAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-avatar class="text-bold" :class="avatarClasses" v-bind="attributes">
+  <q-avatar class="text-bold" v-bind="attributes">
     <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" />
@@ -13,8 +13,15 @@ export default {
   inheritAttrs: false,
 
   props: {
-    dark: {
-      type: Boolean
+    color: {
+      type: String,
+      default: 'primary',
+      validator: value => ['primary', 'secondary-contrast'].includes(value)
+    },
+
+    size: {
+      type: String,
+      default: ''
     },
 
     icon: {
@@ -40,14 +47,6 @@ export default {
   },
 
   computed: {
-    avatarClasses () {
-      if (this.hasImage) {
-        return null
-      }
-
-      return 'bg-primary text-white'
-    },
-
     firstLetter () {
       return this.title[0].toUpperCase()
     },
@@ -61,9 +60,16 @@ export default {
     },
 
     attributes () {
-      const { square, rounded, ...attributes } = this.$attrs
+      const colors = {
+        primary: 'white',
+        'secondary-contrast': 'primary'
+      }
 
-      return attributes
+      return {
+        size: this.size,
+        color: this.color,
+        textColor: colors[this.color]
+      }
     }
   },
 

package/src/components/avatar/QasAvatar.yml

@@ -10,11 +10,11 @@ props:
   color:
     desc: Cor de fundo (background-color).
     type: String
-    examples: ['primary', 'positive']
+    examples: ['primary', 'secondary-contrast']
 
-  dark:
-    desc: Habilita o modo escuro.
-    type: Boolean
+  size:
+    desc: Tamanho do avatar.
+    type: String
 
   icon:
     desc: Ícone de fundo do avatar que vai aparecer caso não tenha imagem nem título.