@bildvitta/quasar-ui-asteroid 3.11.0-beta.9 → 3.12.0-beta.0

package/package.json

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

package/src/assets/icon-loading.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#90a4ae" height="48" viewBox="0 -960 960 960" width="48"><path d="M480-80q-84 0-157-31t-127-85q-54-54-85-127T80-480q0-84 31-157t85-127q54-54 127-85t157-31q12 0 21 9t9 21q0 12-9 21t-21 9q-141 0-240.5 99.5T140-480q0 141 99.5 240.5T480-140q141 0 240.5-99.5T820-480q0-12 9-21t21-9q12 0 21 9t9 21q0 84-31 157t-85 127q-54 54-127 85T480-80Z"/></svg>

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

@@ -1,6 +1,6 @@
 <template>
   <div v-if="hasActions" class="qas-actions-menu">
-    <component :is="component.is" v-bind="component.props" variant="tertiary">
+    <component :is="component.is" v-bind="component.props" variant="tertiary" @click.stop.prevent>
       <q-list v-if="isBtnDropdown">
         <slot v-for="(item, key) in actions" :item="item" :name="key">
           <q-item v-bind="item.props" :key="key" clickable @click="onClick(item)">

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

@@ -115,7 +115,7 @@ export default {
     },
 
     hasCompaniesSelect () {
-      return this.companiesOptions.length > 1
+      return !!this.companiesOptions.length
     }
   },
 

package/src/components/copy/QasCopy.vue

@@ -2,7 +2,7 @@
   <span>
     <slot>{{ text }}</slot>
 
-    <qas-btn class="q-ml-xs" color="primary" :icon="icon" :loading="isLoading" variant="tertiary" @click.stop="copy">
+    <qas-btn class="q-ml-xs" color="primary" :icon="icon" :loading="isLoading" variant="tertiary" @click.stop.prevent="copy">
       <q-tooltip>Copiar</q-tooltip>
     </qas-btn>
   </span>

package/src/components/date-time-input/QasDateTimeInput.vue

@@ -1,14 +1,14 @@
 <template>
-  <qas-input ref="input" v-bind="attributes" v-model="currentValue" :unmasked-value="false" @blur="validateDateTimeOnBlur" @focus="resetError" @update:model-value="updateModelValue">
+  <qas-input ref="input" v-bind="attributes" v-model="currentValue" inputmode="numeric" :unmasked-value="false" @blur="validateDateTimeOnBlur" @focus="resetError" @update:model-value="updateModelValue">
     <template #append>
       <qas-btn v-if="!useTimeOnly" color="grey-9" :disable="$attrs.readonly" icon="sym_r_event" variant="tertiary">
-        <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale">
+        <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale" v-bind="datePopupProxyProps">
           <qas-date v-model="currentValue" v-bind="defaultDateProps" :mask="maskDate" width="290px" @update:model-value="updateModelValue" />
         </q-popup-proxy>
       </qas-btn>
 
       <qas-btn v-if="!useDateOnly" class="q-ml-sm" color="grey-9" :disable="$attrs.readonly" icon="sym_r_access_time">
-        <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale">
+        <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale" v-bind="timePopupProxyProps">
           <q-time v-model="currentValue" v-bind="defaultTimeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
         </q-popup-proxy>
       </qas-btn>
@@ -36,6 +36,11 @@ export default {
       type: Object
     },
 
+    datePopupProxyProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     timeMask: {
       default: 'HH:mm',
       type: String
@@ -46,6 +51,11 @@ export default {
       type: Object
     },
 
+    timePopupProxyProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     useIso: {
       type: Boolean
     },

package/src/components/date-time-input/QasDateTimeInput.yml

@@ -17,6 +17,11 @@ props:
     default: {}
     type: Object
 
+  date-popup-proxy-props:
+    desc: Propriedades do QPopupProxy para o popup do QDate (https://quasar.dev/vue-components/popup-proxy#qpopupproxy-api).
+    default: {}
+    type: Object
+
   model-value:
     desc: Model do componente, usado para v-model.
     default: ''
@@ -33,6 +38,11 @@ props:
     default: {}
     type: Object
 
+  time-popup-proxy-props:
+    desc: Propriedades do QPopupProxy para o popup do QTime (https://quasar.dev/vue-components/popup-proxy#qpopupproxy-api).
+    default: {}
+    type: Object
+
   use-time-only:
     desc: Habilita o componente para usar somente hora.
     type: Boolean

package/src/components/delete/QasDelete.vue

@@ -1,5 +1,5 @@
 <template>
-  <component v-bind="attributes" :is="tag" @click.stop="onDelete">
+  <component v-bind="attributes" :is="tag" @click.stop.prevent="onDelete">
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>

package/src/components/dialog/QasDialog.vue

@@ -14,7 +14,7 @@
       <section class="text-body1 text-grey-8">
         <component :is="componentTag" ref="form">
           <slot name="description">
-            <div v-if="card.description">{{ card.description }}</div>
+            <component :is="descriptionComponentTag">{{ card.description }}</component>
           </slot>
         </component>
       </section>
@@ -186,6 +186,16 @@ export default {
         useEqualWidth: this.hasAllActions,
         ...this.actionsProps
       }
+    },
+
+    hasRenderFunction () {
+      const description = this.card.description
+
+      return typeof description === 'object' && description !== null && !Array.isArray(description)
+    },
+
+    descriptionComponentTag () {
+      return this.hasRenderFunction ? this.card.description : 'div'
     }
   },
 

package/src/components/field/QasField.vue

@@ -70,10 +70,12 @@ export default {
         name,
         options,
         readonly,
+        required,
         disable,
         filled = readonly,
         suffix,
         prefix,
+        places,
         type,
         mask,
         maxFiles,
@@ -95,6 +97,7 @@ export default {
         outlined: true,
         ...error,
         readonly,
+        required,
         disable,
         filled,
         maxlength,
@@ -104,7 +107,7 @@ export default {
         useIso
       }
 
-      const numericInput = { is: 'qas-numeric-input', ...input }
+      const numericInput = { is: 'qas-numeric-input', places, ...input }
       const datetimeInput = { is: 'qas-date-time-input', useIso, ...input }
 
       // It'll generate a list of acceptable files extensions.
@@ -151,8 +154,7 @@ export default {
 
       return {
         ...(profiles[type] || profiles.default),
-        ...this.$attrs,
-        label: this.formattedLabel
+        ...this.$attrs
       }
     },
 
@@ -160,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/form-generator/QasFormGenerator.vue

@@ -3,6 +3,7 @@
     <div v-for="(fieldsetItem, fieldsetItemKey) in normalizedFields" :key="fieldsetItemKey" class="full-width">
       <slot v-if="fieldsetItem.label" :name="`legend-${fieldsetItemKey}`">
         <qas-label :label="fieldsetItem.label" />
+        <div v-if="fieldsetItem.description" class="q-mb-md text-body1 text-grey-8">{{ fieldsetItem.description }}</div>
       </slot>
 
       <div>
@@ -123,6 +124,7 @@ const normalizedFields = computed(() => {
 
     fields[fieldsetKey] = {
       label: fieldsetItem.label,
+      description: fieldsetItem.description,
       fields: { hidden: {}, visible: {} }
     }
 

package/src/components/form-generator/QasFormGenerator.yml

@@ -36,7 +36,7 @@ props:
     desc: Lista para agrupar elementos por rótulo (label).
     default: {}
     type: Object
-    examples: ["{ personalInformation: { label: 'Informações pessoais', fields: [name, email] } }"]
+    examples: ["{ personalInformation: { label: 'Informações pessoais', description: 'Descrição dos campos', fields: ['name', 'email'] } }"]
 
   fieldset-gutter:
     desc: Espaçamento entre rótulos (label).

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

@@ -4,7 +4,7 @@
       <slot name="header" />
     </header>
 
-    <q-form ref="form" @submit="submitHandler">
+    <q-form ref="form" v-bind="defaultFormProps">
       <slot />
 
       <slot v-if="useActions" name="actions">
@@ -76,6 +76,11 @@ export default {
       type: Boolean
     },
 
+    formProps: {
+      type: Object,
+      default: () => ({})
+    },
+
     mode: {
       default: 'create',
       type: String
@@ -191,6 +196,17 @@ export default {
         error: 'Não conseguimos salvar as informações. Por favor, tente novamente em alguns minutos.',
         success: 'Informações salvas com sucesso.'
       }
+    },
+
+    defaultFormProps () {
+      return {
+        ...this.formProps,
+
+        onSubmit: event => {
+          this.submitHandler(event)
+          this.formProps?.onSubmit?.(event)
+        }
+      }
     }
   },
 

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

@@ -66,6 +66,12 @@ props:
     examples: [v-model:fields="fields"]
     model: true
 
+  form-props:
+    desc: Repassa todas as props/eventos para o `QForm`.
+    default: {}
+    type: Object
+    examples: ['{ onValidationError: ref => validationErrorHandler(ref) }']
+
   ignore-keys-in-unsaved-changes:
     desc: Vamos imaginar um cenário onde você precisa alterar valores do v-model por qualquer motivo que seja, mas quando o usuário sair da tela, não pode aparecer o modal perguntando se ele quer sair ou continuar editando, por que o usuário de fato não fez nenhuma alteração nos dados, esta prop serve para você dizer quais keys dentro do v-model você quer ignorar.
     default: []

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" :mask="mask" :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,16 @@
 </template>
 
 <script>
+import { getRequiredLabel } from '../../helpers'
+
+const Masks = {
+  CompanyDocument: 'company-document',
+  Document: 'document',
+  PersonalDocument: 'personal-document',
+  Phone: 'phone',
+  PostalCode: 'postal-code'
+}
+
 export default {
   name: 'QasInput',
 
@@ -22,6 +32,11 @@ export default {
       default: ''
     },
 
+    mask: {
+      type: String,
+      default: ''
+    },
+
     modelValue: {
       default: '',
       type: [String, Number]
@@ -32,6 +47,10 @@ export default {
       type: Boolean
     },
 
+    required: {
+      type: Boolean
+    },
+
     unmaskedValue: {
       default: true,
       type: Boolean
@@ -47,7 +66,8 @@ export default {
   data () {
     return {
       errorData: false,
-      mask: ''
+      currentMask: '',
+      inputReference: null
     }
   },
 
@@ -56,20 +76,33 @@ export default {
       return this.inputReference.hasError
     },
 
-    inputReference () {
-      return this.$refs.input
-    },
-
     masks () {
       return {
-        'company-document': () => '##.###.###/####-##',
-        document: () => this.toggleMask('###.###.###-###', '##.###.###/####-##'),
-        'personal-document': () => '###.###.###-##',
-        phone: () => this.toggleMask('(##) ####-#####', '(##) #####-####'),
-        'postal-code': () => '#####-###'
+        [Masks.CompanyDocument]: () => '##.###.###/####-##',
+        [Masks.Document]: () => this.toggleMask('###.###.###-###', '##.###.###/####-##'),
+        [Masks.PersonalDocument]: () => '###.###.###-##',
+        [Masks.Phone]: () => this.toggleMask('(##) ####-#####', '(##) #####-####'),
+        [Masks.PostalCode]: () => '#####-###'
       }
     },
 
+    defaultInputmode () {
+      const { inputmode, type } = this.$attrs
+
+      const defaults = {
+        [Masks.CompanyDocument]: 'numeric',
+        [Masks.Document]: 'numeric',
+        [Masks.PersonalDocument]: 'numeric',
+        [Masks.Phone]: 'tel',
+        [Masks.PostalCode]: 'numeric',
+
+        // types
+        email: 'email'
+      }
+
+      return inputmode || defaults[this.mask || type]
+    },
+
     model: {
       get () {
         return this.modelValue
@@ -80,11 +113,17 @@ export default {
 
         return this.$emit('update:modelValue', value)
       }
+    },
+
+    formattedLabel () {
+      const { label } = this.$attrs
+
+      return getRequiredLabel({ label, required: this.required })
     }
   },
 
   watch: {
-    mask (value) {
+    currentMask (value) {
       if (!value) return
 
       const input = this.getInput()
@@ -110,6 +149,10 @@ export default {
     }
   },
 
+  mounted () {
+    this.inputReference = this.$refs.input
+  },
+
   methods: {
     focus () {
       return this.inputReference.focus()
@@ -129,7 +172,7 @@ export default {
     },
 
     onPaste (event) {
-      if (!this.mask) return
+      if (!this.currentMask) return
 
       const value = event.clipboardData.getData('text')
       const input = this.getInput()
@@ -153,11 +196,10 @@ export default {
     handleMask () {
       if (!this.modelValue?.length) return
 
-      const { mask } = this.$attrs
-      const hasDefaultMask = Object.prototype.hasOwnProperty.call(this.masks, mask)
+      const hasDefaultMask = Object.prototype.hasOwnProperty.call(this.masks, this.mask)
 
       this.$nextTick(() => {
-        this.mask = hasDefaultMask ? this.masks[mask]() : mask
+        this.currentMask = hasDefaultMask ? this.masks[this.mask]() : this.mask
       })
     }
   }

package/src/components/input/QasInput.yml

@@ -15,6 +15,12 @@ props:
     desc: Controla cor da borda do input.
     type: Boolean
 
+  mask:
+    desc: Máscara do input, é possível passar um slug de mascara ou um pattern personalizado.
+    type: String
+    default: ''
+    examples: [document, personal-document, company-document, phone, postal-code, '##/##/####']
+
   model-value:
     desc: Model do componente.
     type: [String, Input]
@@ -26,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,16 @@ 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
+    type: String
+
 slots:
   default:
     desc: Slot para acessar elemento do texto.

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

@@ -1,13 +1,14 @@
 <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" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
+      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" inputmode="numeric" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
     </template>
   </q-field>
 </template>
 
 <script>
 import AutoNumeric from 'autonumeric'
+import { getRequiredLabel } from '../../helpers'
 
 const defaultModes = {
   decimal: 'commaDecimalCharDotSeparator',
@@ -25,11 +26,16 @@ export default {
       type: Object
     },
 
-    decimalPlaces: {
+    places: {
       default: 2,
       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 })
     }
   },
 
@@ -113,7 +127,7 @@ export default {
     }
 
     if (this.mode !== 'integer') {
-      options.decimalPlaces = this.decimalPlaces
+      options.decimalPlaces = this.places
     }
 
     if (this.mode === 'money') {

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

@@ -12,11 +12,16 @@ props:
     default: {}
     type: Object
 
-  decimal-places:
+  places:
     desc: Quantidade de casas decimais.
     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/search-input/QasSearchInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="qas-filter-input">
-    <qas-input ref="input" v-model="model" v-bind="$attrs" class="bg-white rounded-borders-sm" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" type="search">
+    <qas-input ref="input" v-model="model" v-bind="$attrs" class="bg-white rounded-borders-sm" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" inputmode="search" type="search">
       <template #prepend>
         <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
         <qas-btn v-else color="grey-9" icon="sym_r_search" variant="tertiary" @click="$emit('filter')" />