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

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

@@ -4,13 +4,13 @@
       <slot name="header" />
     </header>
 
-    <q-form ref="form" @submit="submit">
+    <q-form ref="form" @submit="submitHandler">
       <slot />
 
       <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="cancelButtonLabel" 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 v-if="useSubmitButton" class="col-12 col-sm-2" :class="submitButtonClass">
@@ -85,7 +85,7 @@ export default {
       type: Object
     },
 
-    showDialogOnUnsavedChanges: {
+    useDialogOnUnsavedChanges: {
       default: true,
       type: Boolean
     },
@@ -122,6 +122,11 @@ export default {
     useSubmitButton: {
       default: true,
       type: Boolean
+    },
+
+    beforeSubmit: {
+      default: null,
+      type: Function
     }
   },
 
@@ -138,7 +143,6 @@ export default {
   data () {
     return {
       cachedResult: {},
-      hasResult: false,
       isSubmitting: false,
       showDialog: false,
       ignoreRouterGuard: false,
@@ -195,25 +199,17 @@ export default {
   },
 
   watch: {
-    mx_fields (fields) {
-      const models = { ...this.getModelsByFields(fields), ...this.modelValue }
-
-      this.$emit('update:modelValue', models)
-
-      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 () {
@@ -226,13 +222,13 @@ export default {
       const clonedCachedResult = extend(true, {}, this.cachedResult)
 
       /**
-       * Se a propriedade "showDialogOnUnsavedChanges" for false ou a variável
+       * 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(
           clonedModelValue,
@@ -243,6 +239,11 @@ export default {
         return next()
       }
 
+      this.$qas.logger.group(
+        'QasFormView - beforeRouteLeave -> dialog chamado, modelValue diferente do cachedResult',
+        [{ modelValue: clonedModelValue, cachedResult: clonedCachedResult }]
+      )
+
       this.handleDialog(() => {
         this.ignoreRouterGuard = true
         next()
@@ -250,45 +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
+        result && Object.assign(modelValue, result)
 
-          this.$nextTick(() => {
-            this.$emit('update:modelValue', { ...this.modelValue, ...result })
-          })
+        this.$qas.logger.group(
+          `QasFormView - fetchSingle -> resposta da action ${this.entity}/fetchSingle`, [response]
+        )
 
-          this.cachedResult = this.showDialogOnUnsavedChanges && extend(true, {}, result)
+        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
       }
@@ -325,6 +345,7 @@ export default {
       const { addRoute } = useHistory()
 
       this.defaultDialogProps.ok.onClick = () => addRoute(this.$route)
+
       this.defaultDialogProps.cancel.onClick = next
     },
 
@@ -344,33 +365,66 @@ export default {
       })
     },
 
-    async submit (event) {
-      if (this.disable) return null
-
+    /**
+     * 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()
       }
 
+      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)
@@ -378,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,6 +4,18 @@ meta:
   desc: Componente para C.R.U.D. responsável pela pela criação (Create) e edição (Update).
 
 props:
+  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
@@ -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
@@ -89,11 +97,6 @@ props:
     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-label:
     desc: Rótulo do botão "salvar".
     default: Salvar
@@ -114,11 +117,21 @@ props:
     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

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

package/src/components/list-items/QasListItems.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="qas-list-items shadow-14">
     <q-list bordered class="rounded-borders" separator>
-      <q-item v-for="(item, index) in list" :key="index" v-ripple :clickable="!redirectOnIcon" :to="redirect(item)">
+      <q-item v-for="(item, index) in list" :key="index" v-ripple :clickable="useClickableItem" @click="onClick({ item, index }, true)">
         <slot :index="index" :item="item" name="item">
           <q-item-section>
-            <slot :index="index" :item="item" name="item-section-left" />
+            <slot :index="index" :item="item" name="item-section" />
           </q-item-section>
 
           <q-item-section v-if="useSectionActions" side>
             <slot :index="index" :item="item" name="item-section-side">
-              <qas-btn flat round :to="getRedirectPayload(item)">
+              <qas-btn flat round @click="onClick({ item, index })">
                 <q-icon v-bind="iconProps" />
               </qas-btn>
             </slot>
@@ -41,37 +41,29 @@ export default {
       type: Array
     },
 
-    redirectKey: {
-      default: 'uuid',
-      type: String
-    },
-
-    redirectOnIcon: {
-      default: true,
+    useClickableItem: {
       type: Boolean
     },
 
-    to: {
-      default: () => ({}),
-      type: Object
-    },
-
     useSectionActions: {
       default: true,
       type: Boolean
     }
   },
 
+  emits: ['click-item'],
+
   methods: {
-    getRedirectPayload (item) {
-      return {
-        params: { [this.redirectKey]: item[this.redirectKey] },
-        ...this.to
-      }
-    },
+    onClick ({ item, index }, fromItem) {
+      /**
+       * se o click veio do q-item e "useClickableItem" for "false", ou
+       * se o click não veio do q-item e "useClickableItem" for "true", então retorna sem emitir.
+       */
+      if (
+        (fromItem && !this.useClickableItem) || (!fromItem && this.useClickableItem)
+      ) return
 
-    redirect (item) {
-      return this.redirectOnIcon ? undefined : this.getRedirectPayload(item)
+      this.$emit('click-item', { item, index })
     }
   }
 }

package/src/components/list-items/QasListItems.yml

@@ -14,29 +14,17 @@ props:
     default: []
     type: Array
 
-  redirect-key:
-    desc: Você pode enviar qualquer chave/valor dentro do array de objeto da prop "list", esta prop serve para você identificar qual vai ser a chave que vai redirecionar ao clicar no botão.
-    default: uuid
-    type: String
-
-  redirect-on-icon:
-    desc: Controla se o redirecionamento vai acontecer quando clicar no item inteiro ou somente no icon.
-    default: true
+  use-clickable-item:
+    desc: Controla se o item inteiro é clicável ou somente o button dentro do item.
     type: Boolean
 
-  to:
-    desc: Configuração passada para o vue-router.
-    default: {}
-    type: Object
-    examples: ["{ name: 'Root' }"]
-
   use-section-actions:
     desc: Controla se exibe ou não seção de actions, onde fica o Ícone de redirecionamento.
     default: true
     type: Boolean
 
 slots:
-  item-section-left:
+  item-section:
     desc: Slot para acessar seção da esquerda.
     scope:
       item:
@@ -55,3 +43,14 @@ slots:
       index:
         desc: Posição do item na lista.
         type: Number
+
+events:
+  '@click-item -> function ({ item, index })':
+    desc: Dispara toda vez que o item ou button (dependendo da prop "use-section-actions") é clicado.
+    params:
+      item:
+        desc: Item clicado
+        type: Object
+      index:
+        desc: Posição do item
+        type: Number