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

package/package.json

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

package/src/components/alert/QasAlert.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="model" class="q-pa-lg qas-alert relative-position rounded-borders" :class="classes">
+  <div v-if="model" class="bg-white 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">
@@ -58,10 +58,7 @@ export default {
 
   computed: {
     classes () {
-      return {
-        [`text-${this.color}`]: true,
-        [`bg-${this.color}-contrast`]: ['primary', 'secondary'].includes(this.color)
-      }
+      return `text-${this.color}`
     }
   },
 

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

@@ -7,13 +7,13 @@
           <router-link class="block q-toolbar__title relative-position text-no-decoration" :to="rootRoute">
             <img v-if="brand" :alt="title" class="full-width" :src="brand">
             <span v-else class="ellipsis text-bold text-primary">{{ title }}</span>
-            <q-badge color="red" floating :label="developmentBadgeLabel" />
+            <q-badge v-if="hasDevelopmentBadge" color="red" floating :label="developmentBadgeLabel" />
           </router-link>
         </div>
 
         <!-- 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="avatarClass" 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" />
@@ -14,12 +14,14 @@ export default {
 
   props: {
     color: {
-      default: '',
-      type: String
+      type: String,
+      default: 'primary',
+      validator: value => ['primary', 'secondary-contrast'].includes(value)
     },
 
-    dark: {
-      type: Boolean
+    size: {
+      type: String,
+      default: ''
     },
 
     icon: {
@@ -32,11 +34,6 @@ export default {
       type: String
     },
 
-    textColor: {
-      default: 'primary',
-      type: String
-    },
-
     title: {
       default: '',
       type: String
@@ -50,24 +47,6 @@ export default {
   },
 
   computed: {
-    avatarClass () {
-      if (this.hasImage) {
-        return null
-      }
-
-      const contrastColor = this.color ? this.color : this.contrastColor
-
-      return [
-        this.dark
-          ? `bg-${this.textColor} text-${contrastColor}`
-          : `bg-${contrastColor} text-${this.textColor}`
-      ]
-    },
-
-    contrastColor () {
-      return `${this.textColor}-contrast`
-    },
-
     firstLetter () {
       return this.title[0].toUpperCase()
     },
@@ -81,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.

package/src/components/box/QasBox.vue

@@ -21,7 +21,7 @@ export default {
   computed: {
     boxClass () {
       return {
-        'border-primary-contrast': this.outlined,
+        'border-grey': this.outlined,
         'shadow-2': !this.unelevated
       }
     }

package/src/components/card/QasCard.vue

@@ -23,7 +23,7 @@
         </div>
       </q-card-section>
 
-      <div v-if="hasActionsSlot" class="border-primary-contrast border-top overflow-hidden row">
+      <div v-if="hasActionsSlot" class="border-grey border-top overflow-hidden row">
         <slot name="actions" />
       </div>
     </q-card>

package/src/components/transfer/QasTransfer.vue

@@ -177,7 +177,7 @@ export default {
       return this[isFirst
         ? 'firstQueue'
         : 'secondQueue'
-      ].some(item => item[this.valueKey] === object[this.valueKey]) && 'bg-secondary'
+      ].some(item => item[this.valueKey] === object[this.valueKey]) && 'bg-grey-4'
     },
 
     getItemLabel (item) {

package/src/css/utils/border.scss

@@ -17,6 +17,7 @@
 @include set-border-color(primary-contrast, $primary-contrast);
 @include set-border-color(secondary, $secondary);
 @include set-border-color(secondary-contrast, $secondary-contrast);
+@include set-border-color('grey', $border-grey);
 
 // Direction
 .border-top {

package/src/index.scss

@@ -10,12 +10,14 @@ $accent: var(--q-accent);
 // Asteroid variables
 :root {
   --qas-background-color: #fbfbfb;
+  --qas-border-grey: #{$grey-4};
   --qas-generic-border-radius: 8px;
   --qas-generic-transition: 300ms;
 }
 
 $background-color: var(--qas-background-color);
 $generic-border-radius: var(--qas-generic-border-radius);
+$border-grey: var(--qas-border-grey);
 
 // variables
 @import './css/variables/index';