@bildvitta/quasar-ui-asteroid 3.0.0-beta.7 → 3.0.0

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

@@ -4,16 +4,17 @@
       <slot name="header" />
     </header>
 
-    <q-form ref="form" @submit="submit">
+    <q-form ref="form" @submit="submitHandler">
       <slot />
 
-      <slot v-if="!readOnly" name="actions">
+      <slot v-if="useActions" name="actions">
         <div class="justify-end q-col-gutter-md q-my-lg row">
           <div v-if="hasCancelButton" class="col-12 col-sm-2" :class="cancelButtonClass">
-            <qas-btn v-close-popup="dialog" class="full-width" :data-cy="`btnCancel-${entity}`" :disable="isCancelButtonDisabled" :label="cancelButton" outline type="button" @click="cancel" />
+            <qas-btn v-close-popup class="full-width" :data-cy="`btnCancel-${entity}`" :disable="isCancelButtonDisabled" :label="cancelButtonLabel" outline type="button" @click="cancel" />
           </div>
-          <div class="col-12 col-sm-2" :class="saveButtonClass">
-            <qas-btn class="full-width" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButton" :loading="isSubmitting" type="submit" />
+
+          <div v-if="useSubmitButton" class="col-12 col-sm-2" :class="submitButtonClass">
+            <qas-btn class="full-width" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButtonLabel" :loading="isSubmitting" type="submit" />
           </div>
         </div>
       </slot>
@@ -55,7 +56,7 @@ export default {
   mixins: [viewMixin],
 
   props: {
-    cancelButton: {
+    cancelButtonLabel: {
       default: 'Cancelar',
       type: String
     },
@@ -79,16 +80,12 @@ export default {
       type: String
     },
 
-    readOnly: {
-      type: Boolean
-    },
-
     route: {
       default: () => ({}),
       type: Object
     },
 
-    showDialogOnUnsavedChanges: {
+    useDialogOnUnsavedChanges: {
       default: true,
       type: Boolean
     },
@@ -98,7 +95,7 @@ export default {
       type: Array
     },
 
-    submitButton: {
+    submitButtonLabel: {
       default: 'Salvar',
       type: String
     },
@@ -110,6 +107,26 @@ export default {
 
     submitting: {
       type: Boolean
+    },
+
+    useActions: {
+      default: true,
+      type: Boolean
+    },
+
+    useCancelButton: {
+      default: true,
+      type: Boolean
+    },
+
+    useSubmitButton: {
+      default: true,
+      type: Boolean
+    },
+
+    beforeSubmit: {
+      default: null,
+      type: Function
     }
   },
 
@@ -126,7 +143,6 @@ export default {
   data () {
     return {
       cachedResult: {},
-      hasResult: false,
       isSubmitting: false,
       showDialog: false,
       ignoreRouterGuard: false,
@@ -154,7 +170,7 @@ export default {
     },
 
     hasCancelButton () {
-      return !(typeof this.cancelRoute === 'boolean' && !this.cancelRoute)
+      return !(typeof this.cancelRoute === 'boolean' && !this.cancelRoute) && this.useCancelButton
     },
 
     id () {
@@ -173,37 +189,27 @@ export default {
       return this.$route
     },
 
-    saveButtonClass () {
+    submitButtonClass () {
       return this.$qas.screen.isSmall && 'order-first'
     },
 
     isCancelButtonDisabled () {
       return this.disable || this.isSubmitting
-    },
-
-    fieldsNameWithDefaultValue () {
-      return Object.keys(this.fields).filter(field => 'default' in this.fields[field])
     }
   },
 
   watch: {
-    mx_fields (fields) {
-      const models = { ...this.getModelsByFields(fields), ...this.modelValue }
-
-      if (!this.hasResult && this.showDialogOnUnsavedChanges) {
-        this.cachedResult = extend(true, {}, models)
-      }
-    },
-
     isSubmitting (value) {
       this.$emit('update:submitting', value)
     }
   },
 
   created () {
-    onBeforeRouteLeave(this.beforeRouteLeave)
+    this.useDialogOnUnsavedChanges && onBeforeRouteLeave(this.beforeRouteLeave)
+
     window.addEventListener('delete-success', this.setIgnoreRouterGuard)
-    this.fetch()
+
+    this.mx_fetchHandler({ form: true, id: this.id, url: this.fetchURL }, this.fetchSingle)
   },
 
   onUnmounted () {
@@ -212,14 +218,32 @@ export default {
 
   methods: {
     beforeRouteLeave (to, from, next) {
+      const clonedModelValue = extend(true, {}, this.modelValue)
+      const clonedCachedResult = extend(true, {}, this.cachedResult)
+
+      /**
+       * Se a propriedade "useDialogOnUnsavedChanges" for false ou a variável
+       * "ignoreRouterGuard" for true, então **não** iremos checar se o usuário
+       * alterou algum campo antes de sair da pagina, senão iremos validar pela função isEqualWith
+       * e mostrar um dialog antes do usuário sair da página.
+      */
       if (
-        !this.showDialogOnUnsavedChanges ||
+        !this.useDialogOnUnsavedChanges ||
         this.ignoreRouterGuard ||
-        isEqualWith(this.modelValue, this.cachedResult, this.handleIgnoreKeysInUnsavedChanges)
+        isEqualWith(
+          clonedModelValue,
+          clonedCachedResult,
+          this.handleIgnoreKeysInUnsavedChanges
+        )
       ) {
         return next()
       }
 
+      this.$qas.logger.group(
+        'QasFormView - beforeRouteLeave -> dialog chamado, modelValue diferente do cachedResult',
+        [{ modelValue: clonedModelValue, cachedResult: clonedCachedResult }]
+      )
+
       this.handleDialog(() => {
         this.ignoreRouterGuard = true
         next()
@@ -227,41 +251,64 @@ export default {
     },
 
     cancel () {
-      if (!this.dialog) {
-        this.handleCancelRoute()
-      }
+      this.handleCancelRoute()
     },
 
-    async fetch (params) {
+    async fetchSingle (externalPayload = {}) {
       this.mx_isFetching = true
 
       try {
-        const response = await this.$store.dispatch(
-          `${this.entity}/fetchSingle`, { form: true, id: this.id, params, url: this.fetchURL }
+        const payload = {
+          form: true,
+          id: this.id,
+          url: this.fetchURL,
+          ...externalPayload
+        }
+
+        this.$qas.logger.group(
+          `QasFormView - fetchSingle -> payload do parâmetro do ${this.entity}/fetchSingle`, [payload]
         )
 
+        const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, payload)
+
         const { errors, fields, metadata, result } = response.data
 
+        const modelValue = { ...this.getModelsByFields(fields), ...this.modelValue }
+
         this.mx_setErrors(errors)
         this.mx_setFields(fields)
         this.mx_setMetadata(metadata)
 
         this.mx_updateModels({
-          errors: errors,
+          errors,
           fields: this.mx_fields,
           metadata
         })
 
-        if (result) {
-          this.hasResult = true
-          this.$emit('update:modelValue', { ...this.modelValue, ...result })
-          this.cachedResult = this.showDialogOnUnsavedChanges && extend(true, {}, result)
+        result && Object.assign(modelValue, result)
+
+        this.$qas.logger.group(
+          `QasFormView - fetchSingle -> resposta da action ${this.entity}/fetchSingle`, [response]
+        )
+
+        if (this.useDialogOnUnsavedChanges) {
+          this.cachedResult = extend(true, {}, result || modelValue)
+          this.$qas.logger.group('QasFormView - fetchSingle -> cachedResult', [this.cachedResult])
         }
 
+        this.$emit('update:modelValue', modelValue)
         this.$emit('fetch-success', response, this.modelValue)
+
+        this.$qas.logger.group('QasFormView - fetchSingle -> modelValue', [modelValue])
       } catch (error) {
         this.mx_fetchError(error)
         this.$emit('fetch-error', error)
+
+        this.$qas.logger.group(
+          `QasFormView - fetchSingle -> exceção da action ${this.entity}/fetchSingle`,
+          [error],
+          { error: true }
+        )
       } finally {
         this.mx_isFetching = false
       }
@@ -298,6 +345,7 @@ export default {
       const { addRoute } = useHistory()
 
       this.defaultDialogProps.ok.onClick = () => addRoute(this.$route)
+
       this.defaultDialogProps.cancel.onClick = next
     },
 
@@ -307,48 +355,76 @@ export default {
 
     // ignora chaves na hora de validar quando usuário está saindo da página
     handleIgnoreKeysInUnsavedChanges (firstValue, secondValue) {
-      const toIgnore = [
-        ...this.fieldsNameWithDefaultValue,
-        ...this.ignoreKeysInUnsavedChanges
-      ]
+      if (!this.ignoreKeysInUnsavedChanges.length) return
 
-      if (!toIgnore.length) return
+      this.ignoreKeysInUnsavedChanges.forEach(key => {
+        if (!firstValue) return
 
-      toIgnore.forEach(key => {
         delete firstValue[key]
         delete secondValue[key]
       })
     },
 
-    async submit (event) {
+    /**
+     * Se existe a propriedade com callback "beforeSubmit", então o controle de quando e como chamar o método "submit"
+     * está sendo controlado fora do QasFormView, se não existir a propriedade "beforeSubmit", então o controle do método
+     * submit é feito pelo próprio QasFormView, chamado pelo evento @submit.
+    */
+    submitHandler (event) {
       if (event) {
         event.preventDefault()
       }
 
-      if (this.disable || this.readyOnly) {
-        return null
+      const hasBeforeSubmit = typeof this.beforeSubmit === 'function'
+
+      if (hasBeforeSubmit) {
+        return this.beforeSubmit({
+          payload: { id: this.id, payload: this.modelValue, url: this.url },
+          resolve: payload => this.submit(payload)
+        })
       }
 
+      this.submit()
+    },
+
+    async submit (externalPayload = {}) {
+      if (this.disable) return null
+
       this.isSubmitting = true
 
       try {
-        const response = await this.$store.dispatch(
-          `${this.entity}/${this.mode}`,
-          { id: this.id, payload: this.modelValue, url: this.url }
+        const payload = {
+          id: this.id,
+          payload: this.modelValue,
+          url: this.url,
+          ...externalPayload
+        }
+
+        this.$qas.logger.group(
+          `QasFormView - submit -> payload do ${this.entity}/${this.mode}`, [payload]
         )
 
-        if (this.showDialogOnUnsavedChanges) {
+        const response = await this.$store.dispatch(`${this.entity}/${this.mode}`, payload)
+
+        if (this.useDialogOnUnsavedChanges) {
           this.cachedResult = extend(true, {}, this.modelValue)
         }
 
         this.mx_setErrors()
         NotifySuccess(response.data.status.text || 'Item salvo com sucesso!')
         this.$emit('submit-success', response, this.modelValue)
+
+        this.$qas.logger.group(
+          `QasFormView - submit -> resposta da action ${this.entity}/${this.mode}`, [response]
+        )
       } catch (error) {
         const errors = error?.response?.data?.errors
         const message = error?.response?.data?.status?.text
         const exceptionResponse = error?.response?.data?.exception
-        const exception = errors ? 'Existem erros de validação no formulário.' : exceptionResponse || error.message
+
+        const exception = errors
+          ? 'Existem erros de validação no formulário.'
+          : exceptionResponse || error.message
 
         this.mx_setErrors(errors)
         this.$emit('update:errors', this.mx_errors)
@@ -356,6 +432,12 @@ export default {
         NotifyError(message || 'Ops! Erro ao salvar item.', exception)
 
         this.$emit('submit-error', error)
+
+        this.$qas.logger.group(
+          `QasFormView - submit -> exceção da action ${this.entity}/${this.mode}`,
+          [error],
+          { error: true }
+        )
       } finally {
         this.isSubmitting = false
       }

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

@@ -4,7 +4,19 @@ meta:
   desc: Componente para C.R.U.D. responsável pela pela criação (Create) e edição (Update).
 
 props:
-  cancel-button:
+  before-fetch:
+    desc: Callback para controlar como funciona o comportamento do fetch.
+    default: null
+    type: Function
+    examples: ['beforeFetch({ payload, resolve })']
+
+  before-submit:
+    desc: Callback para controlar como funciona o comportamento do submit.
+    default: null
+    type: Function
+    examples: ['beforeSubmit({ payload, resolve })']
+
+  cancel-button-label:
     desc: Rótulo do botão "cancelar".
     default: Cancelar
     type: String
@@ -25,10 +37,6 @@ props:
     type: String
     examples: ['my-custom-id']
 
-  dialog:
-    desc: Este componente pode ser utilizado dentro de um dialog, neste caso o componente pai não pode ser um "QPage" e sim uma "div", esta prop cuida disto.
-    type: Boolean
-
   disable:
     desc: Desabilita o submit.
     type: Boolean
@@ -84,21 +92,12 @@ props:
     examples: [v-model="values"]
     model: true
 
-  read-only:
-    desc: Controla o slot de actions.
-    type: Boolean
-
   route:
     desc: Você pode passar uma configuração de rota customizada.
     default: {}
     type: Object
 
-  show-dialog-on-unsaved-changes:
-    desc: Vamos imaginar um cenário onde o usuário entra na nossa tela de editar/criar, faz tudo o que precisa e sem querer clica no menu para ir para outra tela, caso essa prop esteja "true", vai aparece um modal perguntando se ele quer continuar editando ou ir para a tela no qual foi inicialmente redirecionado.
-    default: true
-    type: Boolean
-
-  submit-button:
+  submit-button-label:
     desc: Rótulo do botão "salvar".
     default: Salvar
     type: String
@@ -113,6 +112,31 @@ props:
     desc: Envia como parâmetro para a action "fetchSingle" do modulo correspondente a "entity".
     type: String
 
+  use-actions:
+    desc: Controla se vai ter ou não o slot de actions.
+    default: true
+    type: Boolean
+
+  use-boundary:
+    desc: Controla o limite que o FormView terá, quando é "false", a tag pai deixa de ser um "QPage" para ser uma "div" e é removido as classes "container" e "spaced", comumente utilizando quando precisa usar o QasFormView dentro de um dialog.
+    default: true
+    type: Boolean
+
+  use-cancel-button:
+    desc: Controla se vai ter ou não botão de "cancelar".
+    default: true
+    type: Boolean
+
+  use-dialog-on-unsaved-changes:
+    desc: Vamos imaginar um cenário onde o usuário entra na nossa tela de editar/criar, faz tudo o que precisa e sem querer clica no menu para ir para outra tela, caso essa prop esteja "true", vai aparece um modal perguntando se ele quer continuar editando ou ir para a tela no qual foi inicialmente redirecionado.
+    default: true
+    type: Boolean
+
+  use-submit-button:
+    desc: Controla se vai ter ou não botão de submit.
+    default: true
+    type: Boolean
+
 slots:
   actions:
     desc: Slot para acessar a seção onde ficam os botões de ações (salvar e cancelar).

package/src/components/grid-generator/QasGridGenerator.vue

@@ -36,10 +36,6 @@ export default {
       type: [Array, Object, String]
     },
 
-    hideEmptyResult: {
-      type: Boolean
-    },
-
     emptyResultText: {
       default: '-',
       type: String
@@ -48,6 +44,11 @@ export default {
     result: {
       default: () => ({}),
       type: Object
+    },
+
+    useEmptyResult: {
+      default: true,
+      type: Boolean
     }
   },
 
@@ -59,7 +60,12 @@ export default {
 
   computed: {
     formattedFields () {
-      if (!this.hideEmptyResult) {
+      if (this.useEmptyResult) {
+        this.$qas.logger.group(
+          'QasGridGenerator - formattedFields -> this.useEmptyResult tem valor "true"',
+          [this.fields]
+        )
+
         return this.fields
       }
 
@@ -77,6 +83,8 @@ export default {
         }
       }
 
+      this.$qas.logger.group('QasGridGenerator - formattedFields', [fields])
+
       return fields
     },
 
@@ -92,11 +100,19 @@ export default {
 
       for (const key in result) {
         if (this.formattedFields[key]?.type) {
-          formattedResult[key] = humanize(this.formattedFields[key], result[key]) || this.emptyResultText
-          this.slotValue[key] = { ...this.formattedFields[key], formattedResult: formattedResult[key] }
+          formattedResult[key] = (
+            humanize(this.formattedFields[key], result[key]) || this.emptyResultText
+          )
+
+          this.slotValue[key] = {
+            ...this.formattedFields[key],
+            formattedResult: formattedResult[key]
+          }
         }
       }
 
+      this.$qas.logger.group('QasGridGenerator - getResultsByFields', [formattedResult])
+
       return formattedResult
     }
   }

package/src/components/grid-generator/QasGridGenerator.yml

@@ -37,16 +37,17 @@ props:
     default: 'text-bold'
     type: [Array, Object, String]
 
-  hide-empty-result:
-    desc: Se o resultado de algum campo for vazio, ele remove todo o campo.
-    type: Boolean
-
   result:
     desc: Resultado contendo todas informações para serem exibidas na tela.
     default: {}
     type: Object
     examples: ["{ 'joah@examples.com' }"]
 
+  use-empty-result:
+    desc: Se o resultado de algum campo for vazio e esta propriedade for "false", ele remove todo o campo.
+    default: true
+    type: Boolean
+
 slots:
   content:
     desc: Slot para o conteúdo (content).

package/src/components/input/QasInput.vue

@@ -1,11 +1,9 @@
 <template>
-  <div>
-    <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessageData" :mask="mask" :outlined="outlined" :unmasked-value="unmaskedValue">
-      <template v-for="(_, name) in $slots" #[name]="context">
-        <slot :name="name" v-bind="context || {}" />
-      </template>
-    </q-input>
-  </div>
+  <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessageData" :mask="mask" :outlined="outlined" :unmasked-value="unmaskedValue" @paste="onPaste">
+    <template v-for="(_, name) in $slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
+  </q-input>
 </template>
 
 <script>
@@ -15,32 +13,32 @@ export default {
   inheritAttrs: false,
 
   props: {
+    error: {
+      type: Boolean
+    },
+
+    errorMessage: {
+      type: String,
+      default: ''
+    },
+
     modelValue: {
       default: '',
       type: [String, Number]
     },
 
-    unmaskedValue: {
-      default: true,
-      type: Boolean
-    },
-
     outlined: {
       default: true,
       type: Boolean
     },
 
-    removeErrorOnType: {
+    unmaskedValue: {
+      default: true,
       type: Boolean
     },
 
-    error: {
+    useRemoveErrorOnType: {
       type: Boolean
-    },
-
-    errorMessage: {
-      type: String,
-      default: ''
     }
   },
 
@@ -85,7 +83,7 @@ export default {
       },
 
       set (value) {
-        if (this.removeErrorOnType && this.error) {
+        if (this.useRemoveErrorOnType && this.error) {
           this.errorData = false
           this.errorMessageData = ''
         }
@@ -97,7 +95,7 @@ export default {
 
   watch: {
     mask () {
-      const input = this.inputReference.$el?.querySelector('input')
+      const input = this.getInput()
 
       requestAnimationFrame(() => {
         input.selectionStart = input.value ? input.value.length : ''
@@ -131,12 +129,30 @@ export default {
     },
 
     toggleMask (first, second) {
+      if (!this.modelValue?.length) return
+
       const length = first.split('#').length - 2
       return this.modelValue?.length > length ? second : first
     },
 
     validate (value) {
       return this.inputReference.validate(value)
+    },
+
+    onPaste (event) {
+      if (!this.mask) return
+
+      const value = event.clipboardData.getData('text')
+      const input = this.getInput()
+
+      requestAnimationFrame(() => {
+        this.$emit('update:modelValue', value)
+        input.selectionStart = input.value ? input.value.length : ''
+      })
+    },
+
+    getInput () {
+      return this.inputReference.$el?.querySelector('input')
     }
   }
 }

package/src/components/input/QasInput.yml

@@ -26,7 +26,7 @@ props:
     default: true
     type: Boolean
 
-  remove-error-on-type:
+  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/layout/QasLayout.vue

@@ -71,6 +71,10 @@ export default {
     }
   },
 
+  mounted () {
+    this.menuDrawer = !this.$qas.screen.untilMedium
+  },
+
   methods: {
     toggleMenuDrawer () {
       this.menuDrawer = !this.menuDrawer