@bildvitta/quasar-ui-asteroid 2.19.0 → 2.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
-  "version": "2.19.0",
+  "version": "2.22.0",
   "description": "",
   "main": "./src/index.js",
   "scripts": {

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

@@ -48,6 +48,12 @@ export default {
     }
   },
 
+  computed: {
+    labelValue () {
+      return this.hideLabel ? '' : this.label
+    }
+  },
+
   methods: {
     onClick (item) {
       if (typeof item.handler === 'function') {
@@ -55,12 +61,6 @@ export default {
         item.handler(filtered)
       }
     }
-  },
-
-  computed: {
-    labelValue () {
-      return this.hideLabel ? '' : this.label
-    }
   }
 }
 </script>

package/src/components/input/QasInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-input ref="mask" v-model="model" v-bind="$attrs" bottom-slots :mask="mask" unmasked-value v-on="listeners">
+    <q-input ref="mask" v-model="model" v-bind="$attrs" bottom-slots :mask="mask" unmasked-value v-on="listeners" @paste="onPaste">
       <slot v-for="(slot, key) in $slots" :slot="key" :name="key" />
       <template v-for="(slot, key) in $scopedSlots" :slot="key" slot-scope="scope">
         <slot :name="key" v-bind="scope" />
@@ -65,7 +65,7 @@ export default {
 
   watch: {
     mask () {
-      const input = this.$refs.mask.$refs.input
+      const input = this.getInput()
 
       requestAnimationFrame(() => {
         input.selectionStart = input.value ? input.value.length : ''
@@ -75,6 +75,8 @@ export default {
 
   methods: {
     toggleMask (first, second) {
+      if (!this.value.length) return
+
       const length = first.split('#').length - 2
       return this.value?.length > length ? second : first
     },
@@ -89,6 +91,22 @@ export default {
 
     resetValidation () {
       return this.inputReference.resetValidation()
+    },
+
+    onPaste (event) {
+      if (!this.mask) return
+
+      const value = event.clipboardData.getData('text')
+      const input = this.getInput()
+
+      requestAnimationFrame(() => {
+        this.$emit('input', value)
+        input.selectionStart = input.value ? input.value.length : ''
+      })
+    },
+
+    getInput () {
+      return this.inputReference.$el?.querySelector('input')
     }
   }
 }

package/src/components/list-view/QasListView.vue

@@ -121,11 +121,17 @@ export default {
       this.$router.push({ query })
     },
 
-    async fetchList () {
+    async fetchList (externalPayload = {}) {
       this.isFetching = true
 
+      const payload = {
+        ...this.context,
+        url: this.url,
+        ...externalPayload
+      }
+
       try {
-        const response = await this.$store.dispatch(`${this.entity}/fetchList`, { ...this.context, url: this.url })
+        const response = await this.$store.dispatch(`${this.entity}/fetchList`, payload)
         const { errors, fields, metadata } = response.data
 
         this.setErrors(errors)

package/src/components/nested-fields/QasNestedFields.vue

@@ -68,7 +68,6 @@ import QasLabel from '../label/QasLabel'
 import { constructObject } from '../../helpers'
 
 import { extend } from 'quasar'
-import { camelize } from 'humps'
 
 export default {
   name: 'QasNestedFields',
@@ -213,13 +212,7 @@ export default {
     },
 
     children () {
-      const field = extend(true, {}, this.field)
-
-      for (const key in field?.children) {
-        field.children[key].name = camelize(field?.children[key].name)
-      }
-
-      return field?.children
+      return this.field?.children
     },
 
     showDestroyBtn () {

package/src/components/numeric-input/QasNumericInput.stories.js

@@ -44,13 +44,23 @@ export default {
 
     // Events
     input: {
-      description: 'Emitted when the component needs to change the model. Is also used by `v-model`.',
+      description: 'Emitted when the component needs to change the value.',
       table: {
         defaultValue: {
           detail: JSON.stringify({ value: 'number' }),
           summary: '{}'
         }
       }
+    },
+
+    'update-model': {
+      description: 'Emitted when the user inputs a new value in the component.',
+      table: {
+        defaultValue: {
+          detail: JSON.stringify({ value: 'object' }),
+          summary: '{}'
+        }
+      }
     }
   }
 }

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

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <q-field v-model="model" v-bind="$attrs">
-      <template #control="{ emitValue, floatingLabel, id, value: modelValue }">
-        <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :model-value="modelValue" @input="emitValue($event.target.value)">
+    <q-field :value="value" v-bind="$attrs">
+      <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)">
       </template>
     </q-field>
   </div>
@@ -66,15 +66,13 @@ export default {
   computed: {
     defaultMode () {
       return defaultModes[this.mode]
-    },
-
-    model: {
-      get () {
-        return this.value
-      },
+    }
+  },
 
-      set () {
-        this.$emit('input', this.autoNumeric.getNumber())
+  watch: {
+    value (value) {
+      if (this.autoNumeric) {
+        this.autoNumeric.set(value)
       }
     }
   },
@@ -110,13 +108,30 @@ export default {
     Object.assign(options, this.autonumericProps)
 
     this.$nextTick(() => {
-      this.$refs.input.value = this.value
       this.autoNumeric = new AutoNumeric(this.$refs.input, options)
+      this.autoNumeric.set(this.value)
     })
   },
 
   beforeDestroy () {
     this.autoNumeric.remove()
+  },
+
+  methods: {
+    setSelect () {
+      this.$refs?.input?.select()
+    },
+
+    emitValue () {
+      this.$emit('input', this.autoNumeric.getNumber())
+    },
+
+    emitUpdateModel (value) {
+      this.$emit('update-model', {
+        value,
+        raw: this.autoNumeric.getNumber()
+      })
+    }
   }
 }
 </script>

package/src/components/signature-uploader/QasSignatureUploader.vue

@@ -15,7 +15,7 @@
       </template>
     </qas-uploader>
 
-    <qas-dialog v-model="isOpenedDialog" v-bind="defaultDialogProps" >
+    <qas-dialog v-model="isOpenedDialog" v-bind="defaultDialogProps">
       <template #header>
         <div class="text-bold text-center">Insira sua assinatura digital no campo abaixo</div>
       </template>
@@ -43,14 +43,14 @@ import { base64ToBlob } from '../../helpers'
 import { NotifyError } from '../../plugins'
 
 export default {
-  mixins: [screenMixin],
-
   components: {
     QasDialog,
     QasUploader,
     QasSignaturePad
   },
 
+  mixins: [screenMixin],
+
   props: {
     dialogProps: {
       type: Object,

package/src/components/single-view/QasSingleView.vue

@@ -70,11 +70,17 @@ export default {
   },
 
   methods: {
-    async fetchSingle () {
+    async fetchSingle (externalPayload = {}) {
       this.isFetching = true
 
+      const payload = {
+        id: this.id,
+        url: this.url,
+        ...externalPayload
+      }
+
       try {
-        const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, { id: this.id, url: this.url })
+        const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, payload)
         const { errors, fields, metadata } = response.data
 
         this.setErrors(errors)

package/src/helpers/camelize-fields-name.js

@@ -0,0 +1,15 @@
+import { camelize } from 'humps'
+
+export default function camelizeFieldsName (fields) {
+  for (const field in fields) {
+    const currentField = fields[field]
+
+    currentField.name = camelize(currentField.name)
+
+    if (Object.keys(currentField.children || {}).length) {
+      camelizeFieldsName(currentField.children)
+    }
+  }
+
+  return fields
+}

package/src/helpers/index.js

@@ -1,4 +1,5 @@
 import base64ToBlob from './base64ToBlob.js'
+import camelizeFieldsName from './camelize-fields-name.js'
 import constructObject from './constructObject.js'
 import filterObject from './filter-object.js'
 import greatestCommonDivisor from './greatestCommonDivisor.js'
@@ -31,6 +32,7 @@ export {
   // filters
   asset,
   booleanLabel,
+  camelizeFieldsName,
   constructObject,
   date,
   dateTime,

package/src/mixins/view.js

@@ -1,5 +1,6 @@
 import { camelize } from 'humps'
 import { get } from 'lodash'
+import { camelizeFieldsName } from '../helpers'
 
 import { NotifyError } from '../plugins'
 
@@ -64,11 +65,7 @@ export default {
     },
 
     setFields (fields = {}) {
-      for (const field in fields) {
-        fields[field].name = camelize(fields[field].name)
-      }
-
-      this.fields = fields
+      this.fields = camelizeFieldsName(fields)
     },
 
     setMetadata (metadata = {}) {