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

package/package.json

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

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/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/dialog/QasDialog.vue

@@ -189,7 +189,9 @@ export default {
     },
 
     hasRenderFunction () {
-      return typeof this.card.description?.render === 'function'
+      const description = this.card.description
+
+      return typeof description === 'object' && description !== null && !Array.isArray(description)
     },
 
     descriptionComponentTag () {

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" :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,14 @@
 </template>
 
 <script>
+const Masks = {
+  CompanyDocument: 'company-document',
+  Document: 'document',
+  PersonalDocument: 'personal-document',
+  Phone: 'phone',
+  PostalCode: 'postal-code'
+}
+
 export default {
   name: 'QasInput',
 
@@ -22,6 +30,11 @@ export default {
       default: ''
     },
 
+    mask: {
+      type: String,
+      default: ''
+    },
+
     modelValue: {
       default: '',
       type: [String, Number]
@@ -47,7 +60,8 @@ export default {
   data () {
     return {
       errorData: false,
-      mask: ''
+      currentMask: '',
+      inputReference: null
     }
   },
 
@@ -56,20 +70,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
@@ -84,7 +111,7 @@ export default {
   },
 
   watch: {
-    mask (value) {
+    currentMask (value) {
       if (!value) return
 
       const input = this.getInput()
@@ -110,6 +137,10 @@ export default {
     }
   },
 
+  mounted () {
+    this.inputReference = this.$refs.input
+  },
+
   methods: {
     focus () {
       return this.inputReference.focus()
@@ -129,7 +160,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 +184,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]

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

@@ -1,7 +1,7 @@
 <template>
   <q-field :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>

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