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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.5.0-beta.5",
+  "version": "3.5.0-beta.7",
   "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,7 +7,7 @@
           <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>
 

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" :class="avatarClasses" 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,11 +13,6 @@ export default {
   inheritAttrs: false,
 
   props: {
-    color: {
-      default: '',
-      type: String
-    },
-
     dark: {
       type: Boolean
     },
@@ -32,11 +27,6 @@ export default {
       type: String
     },
 
-    textColor: {
-      default: 'primary',
-      type: String
-    },
-
     title: {
       default: '',
       type: String
@@ -50,22 +40,12 @@ export default {
   },
 
   computed: {
-    avatarClass () {
+    avatarClasses () {
       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`
+      return 'bg-primary text-white'
     },
 
     firstLetter () {

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/field/QasField.vue

@@ -149,28 +149,38 @@ export default {
         select: { is: 'qas-select', entity, name, multiple, options, useLazyLoading, ...input }
       }
 
-      return { ...(profiles[type] || profiles.default), ...this.$attrs }
+      return {
+        ...(profiles[type] || profiles.default),
+        ...this.$attrs,
+        label: this.formattedLabel
+      }
     },
 
     errorMessage () {
       return Array.isArray(this.error) ? this.error.join(' ') : this.error
     },
 
+    formattedLabel () {
+      const nonRequiredFieldsLabel = ['boolean', 'checkbox', 'radio']
+
+      const label = this.$attrs.label || this.formattedField.label
+      const { required, type } = this.formattedField
+
+      if (required && label && !nonRequiredFieldsLabel.includes(type)) {
+        return `${label}*`
+      }
+
+      return label
+    },
+
     // This computed will change the key name when the server sends different key.
     formattedField () {
       const field = {}
-      const nonRequiredFieldsLabel = ['boolean', 'checkbox', 'radio']
 
       for (const key in this.field) {
         field[attributesProfile[key] || key] = this.field[key]
       }
 
-      const { label, required, type } = field
-
-      if (required && label && !nonRequiredFieldsLabel.includes(type)) {
-        field.label = `${label}*`
-      }
-
       return field
     },
 

package/src/components/form-view/QasFormView.vue

@@ -10,7 +10,7 @@
       <slot v-if="useActions" name="actions">
         <div class="justify-end q-col-gutter-md q-my-lg row">
           <div v-if="hasCancelButton" class="col-12 col-sm-2" :class="cancelButtonClass">
-            <qas-btn v-close-popup class="full-width" :data-cy="`btnCancel-${entity}`" :disable="isCancelButtonDisabled" :label="cancelButtonLabel" outline type="button" @click="cancel" />
+            <qas-btn v-close-popup class="full-width" :data-cy="`btnCancel-${entity}`" :disable="isSubmitting" :label="cancelButtonLabel" outline type="button" @click="cancel" />
           </div>
 
           <div v-if="useSubmitButton" class="col-12 col-sm-2" :class="submitButtonClass">
@@ -194,10 +194,6 @@ export default {
       return this.$qas.screen.isSmall && 'order-first'
     },
 
-    isCancelButtonDisabled () {
-      return this.disable || this.isSubmitting
-    },
-
     defaultNotifyMessages () {
       return {
         validationError: 'Existem campos no formulário que ainda não foram preenchidos. Complete todas as informações para avançar.',

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';