@bildvitta/quasar-ui-asteroid 3.11.0-beta.14 → 3.11.0-beta.16

package/package.json

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

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

@@ -2,13 +2,13 @@
   <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/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
@@ -60,7 +66,8 @@ export default {
   data () {
     return {
       errorData: false,
-      currentMask: ''
+      currentMask: '',
+      inputReference: null
     }
   },
 
@@ -69,10 +76,6 @@ export default {
       return this.inputReference.hasError
     },
 
-    inputReference () {
-      return this.$refs.input
-    },
-
     masks () {
       return {
         [Masks.CompanyDocument]: () => '##.###.###/####-##',
@@ -110,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()
@@ -140,6 +149,10 @@ export default {
     }
   },
 
+  mounted () {
+    this.inputReference = this.$refs.input
+  },
+
   methods: {
     focus () {
       return this.inputReference.focus()

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