@bildvitta/quasar-ui-asteroid 3.11.0-beta.15 → 3.11.0-beta.17

package/package.json

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

package/src/components/field/QasField.vue

@@ -70,6 +70,7 @@ export default {
         name,
         options,
         readonly,
+        required,
         disable,
         filled = readonly,
         suffix,
@@ -96,6 +97,7 @@ export default {
         outlined: true,
         ...error,
         readonly,
+        required,
         disable,
         filled,
         maxlength,
@@ -152,8 +154,7 @@ export default {
 
       return {
         ...(profiles[type] || profiles.default),
-        ...this.$attrs,
-        label: this.formattedLabel
+        ...this.$attrs
       }
     },
 
@@ -161,19 +162,6 @@ export default {
       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 = {}

package/src/components/input/QasInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessage" :inputmode="defaultInputmode" :mask="currentMask" :outlined="outlined" :unmasked-value="unmaskedValue" @paste="onPaste">
+  <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessage" :inputmode="defaultInputmode" :label="formattedLabel" :mask="currentMask" :outlined="outlined" :unmasked-value="unmaskedValue" @paste="onPaste">
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
@@ -7,6 +7,8 @@
 </template>
 
 <script>
+import { getRequiredLabel } from '../../helpers'
+
 const Masks = {
   CompanyDocument: 'company-document',
   Document: 'document',
@@ -45,6 +47,10 @@ export default {
       type: Boolean
     },
 
+    required: {
+      type: Boolean
+    },
+
     unmaskedValue: {
       default: true,
       type: Boolean
@@ -107,6 +113,12 @@ export default {
 
         return this.$emit('update:modelValue', value)
       }
+    },
+
+    formattedLabel () {
+      const { label } = this.$attrs
+
+      return getRequiredLabel({ label, required: this.required })
     }
   },
 

package/src/components/input/QasInput.yml

@@ -32,6 +32,11 @@ props:
     default: true
     type: Boolean
 
+  required:
+    desc: Controla label do campo, se for "true" adiciona sufixo "*".
+    default: false
+    type: Boolean
+
   use-remove-error-on-type:
     desc: Limpa os erros do campo caso os mesmos existam toda vez que o model atualiza.
     type: Boolean

package/src/components/label/QasLabel.vue

@@ -1,17 +1,22 @@
 <template>
   <div class="text-h4" :class="classes">
-    <slot :label-with-suffix="labelWithSuffix">{{ labelWithSuffix }}</slot>
+    <slot :label-with-suffix="formattedLabel">{{ formattedLabel }}</slot>
   </div>
 </template>
 
 <script>
-import { addCounterSuffix } from '../../helpers'
+import { addCounterSuffix, getRequiredLabel } from '../../helpers'
 import { Spacing } from '../../enums/Spacing'
 
 export default {
   name: 'QasLabel',
 
   props: {
+    color: {
+      type: String,
+      default: 'grey-9'
+    },
+
     count: {
       default: 0,
       type: [Number, String]
@@ -32,9 +37,8 @@ export default {
       }
     },
 
-    color: {
-      type: String,
-      default: 'grey-9'
+    required: {
+      type: Boolean
     }
   },
 
@@ -43,6 +47,10 @@ export default {
       return addCounterSuffix(this.label, parseFloat(this.count))
     },
 
+    formattedLabel () {
+      return getRequiredLabel({ label: this.labelWithSuffix, required: this.required })
+    },
+
     classes () {
       return [
         `q-mb-${this.margin}`,

package/src/components/label/QasLabel.yml

@@ -19,6 +19,11 @@ props:
     type: String
     examples: [xs, sm, md, lg, xl]
 
+  required:
+    desc: Controla label do campo, se for "true" adiciona sufixo "*".
+    default: false
+    type: Boolean
+
   color:
     desc: Cor da label.
     default: grey-9

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

@@ -1,5 +1,5 @@
 <template>
-  <q-field :model-value="modelValue" outlined>
+  <q-field :label="formattedLabel" :model-value="modelValue" outlined>
     <template #control="{ floatingLabel, id }">
       <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" inputmode="numeric" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
     </template>
@@ -8,6 +8,7 @@
 
 <script>
 import AutoNumeric from 'autonumeric'
+import { getRequiredLabel } from '../../helpers'
 
 const defaultModes = {
   decimal: 'commaDecimalCharDotSeparator',
@@ -30,6 +31,11 @@ export default {
       type: Number
     },
 
+    label: {
+      type: String,
+      default: ''
+    },
+
     mode: {
       default: 'integer',
       type: String,
@@ -54,6 +60,10 @@ export default {
       type: [Boolean, String]
     },
 
+    required: {
+      type: Boolean
+    },
+
     useNegative: {
       type: Boolean
     },
@@ -78,6 +88,10 @@ export default {
   computed: {
     defaultMode () {
       return defaultModes[this.mode]
+    },
+
+    formattedLabel () {
+      return getRequiredLabel({ label: this.label, required: this.required })
     }
   },
 

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

@@ -17,6 +17,11 @@ props:
     default: 2
     type: Number
 
+  label:
+    desc: Label do componente.
+    type: String
+    default: ''
+
   mode:
     desc: Modo do componente.
     default: integer
@@ -33,6 +38,11 @@ props:
     desc: Propriedade preset serve para usar configuração de predefinição/nacionalidade da moeda pré setada pelo autonumeric (Brasil é o padrão).
     type: [Boolean, String]
 
+  required:
+    desc: Controla label do campo, se for "true" adiciona sufixo "*".
+    default: false
+    type: Boolean
+
   use-negative:
     desc: Controla se pode ou não números negativos.
     default: false

package/src/components/page-header/QasPageHeader.vue

@@ -9,7 +9,7 @@
         <q-breadcrumbs v-if="useBreadcrumbs" class="text-caption" gutter="xs" separator-color="grey-8">
           <q-breadcrumbs-el v-if="useHomeIcon" class="qas-page-header__breadcrumbs-el text-grey-8" icon="sym_r_home" :to="homeRoute" />
 
-          <q-breadcrumbs-el v-for="(item, index) in normalizedBreadcrumbs" :key="index" class="qas-page-header__breadcrumbs-el" :label="item.label" :to="item.route" />
+          <q-breadcrumbs-el v-for="(item, index) in normalizedBreadcrumbs" :key="index" class="ellipsis inline-block qas-page-header__breadcrumbs-el" :label="item.label" :to="item.route" />
         </q-breadcrumbs>
       </div>
 
@@ -142,6 +142,7 @@ export default {
 <style lang="scss">
 .qas-page-header {
   &__breadcrumbs-el {
+    max-width: 180px;
     transition: color var(--qas-generic-transition);
 
     &.q-breadcrumbs__el:not(.q-router-link--exact-active):hover {

package/src/components/select/QasSelect.vue

@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import { getRequiredLabel } from '../../helpers'
 import { uid } from 'quasar'
 import { searchFilterMixin } from '../../mixins'
 import Fuse from 'fuse.js'
@@ -45,6 +46,11 @@ export default {
       type: Object
     },
 
+    label: {
+      type: String,
+      default: ''
+    },
+
     modelValue: {
       default: () => [],
       type: [Array, Object, String, Number, Boolean]
@@ -60,6 +66,10 @@ export default {
       type: Array
     },
 
+    required: {
+      type: Boolean
+    },
+
     useFetchOptionsOnCreate: {
       default: true,
       type: Boolean
@@ -92,6 +102,7 @@ export default {
 
         ...this.$attrs,
 
+        label: this.formattedLabel,
         error: this.hasError,
         inputDebounce: this.useLazyLoading ? 1200 : 0,
         loading: this.hasLoading,
@@ -155,6 +166,10 @@ export default {
 
     popupContentClass () {
       return `qas-select__popup-content-${uid()}`
+    },
+
+    formattedLabel () {
+      return getRequiredLabel({ label: this.label, required: this.required })
     }
   },
 

package/src/components/select/QasSelect.yml

@@ -29,6 +29,11 @@ props:
       keys: [label, value]
       threshold: 0.4
 
+  label:
+    desc: Label do componente.
+    type: String
+    default: ''
+
   label-key:
     desc: O componente internamente espera receber na propriedade "options" um array de objeto contendo "label" e "value", caso o seu objeto não tenha "label" mas um "name" por exemplo, você pode definir esta prop "label-key" como "name".
     type: String
@@ -66,6 +71,11 @@ props:
     default: []
     type: Array
 
+  required:
+    desc: Controla label do campo, se for "true" adiciona sufixo "*".
+    default: false
+    type: Boolean
+
   value-key:
     desc: O componente internamente espera receber na propriedade "options" um array de objeto contendo "label" e "value", caso o seu objeto não tenha "value" mas um "uuid" por exemplo, você pode definir esta prop "label-value" como "uuid".
     type: String

package/src/components/welcome/QasWelcome.vue

@@ -1,13 +1,21 @@
 <template>
   <div class="q-mb-xl qas-welcome text-left">
-    <h3 class="text-grey-9 text-h3">
-      {{ welcomeMessage }}<span v-if="firstName">, {{ firstName }}</span>
-    </h3>
+    <div class="items-center justify-between row">
+      <div>
+        <h3 class="text-grey-9 text-h3">
+          {{ welcomeMessage }}<span v-if="firstName">, {{ firstName }}</span>
+        </h3>
 
-    <div class="text-caption text-grey-8">{{ currentDay }}</div>
+        <div class="text-caption text-grey-8">{{ currentDay }}</div>
+      </div>
+
+      <slot name="actions">
+        <qas-actions-menu v-if="hasActionsMenuProps" v-bind="actionsMenuProps" />
+      </slot>
+    </div>
 
     <div v-if="hasShortcuts">
-      <div class="q-mb-md q-mt-md text-grey-9 text-subtitle2">Atalhos</div>
+      <qas-label class="q-mt-lg" label="Atalhos" />
 
       <div class="qas-welcome__container">
         <div ref="scrollArea" class="row" :class="contentClasses">
@@ -34,6 +42,11 @@ export default {
   },
 
   props: {
+    actionsMenuProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     name: {
       default: '',
       type: String
@@ -68,6 +81,10 @@ export default {
       return this.name.split(' ')?.[0]
     },
 
+    hasActionsMenuProps () {
+      return !!Object.keys(this.actionsMenuProps).length
+    },
+
     hasShortcuts () {
       return !!this.shortcuts.length
     },

package/src/components/welcome/QasWelcome.yml

@@ -4,6 +4,11 @@ meta:
   desc: Componente de boas-vindas para ser usado na Home dos sistemas.
 
 props:
+  actions-menu-props:
+    desc: Propriedades repassadas para o QasActionsMenu.
+    default: {}
+    type: Object
+
   name:
     desc: Nome do usuário a ser mostrado na tela.
     type: String
@@ -12,3 +17,7 @@ props:
     desc: Lista de cards de atalhos.
     default: []
     type: Array
+
+slots:
+  actions:
+    desc: Slot para substituir o QasActionsMenu.

package/src/helpers/get-required-label.js

@@ -0,0 +1,3 @@
+export default function getRequiredLabel ({ label, required }) {
+  return required ? `${label}*` : label
+}

package/src/helpers/index.js

@@ -11,6 +11,7 @@ export { default as filterObjectToArray } from './filter-object-to-array.js'
 export { default as findChildrenByKey } from './find-children-by-key.js'
 export { default as getGreatestCommonDivisor } from './get-greatest-common-divisor.js'
 export { default as getNormalizedOptions } from './get-normalized-options.js'
+export { default as getRequiredLabel } from './get-required-label.js'
 export { default as getSlotChildrenText } from './get-slot-children-text.js'
 export { default as handleProcess } from './handle-process.js'
 export { default as isEmpty } from './is-empty.js'