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

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

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

@@ -1,6 +1,6 @@
 <template>
   <component :is="mx_componentTag" :class="mx_componentClass">
-    <q-pull-to-refresh :disable="disableRefresh" @refresh="refresh">
+    <q-pull-to-refresh :disable="!useRefresh" @refresh="refresh">
       <header v-if="hasHeaderSlot">
         <slot name="header" />
       </header>
@@ -10,7 +10,7 @@
       </slot>
 
       <main class="relative-position">
-        <div v-if="hasResults">
+        <div v-if="showResults">
           <slot />
         </div>
 
@@ -54,15 +54,6 @@ export default {
   mixins: [contextMixin, viewMixin],
 
   props: {
-    disableRefresh: {
-      type: Boolean
-    },
-
-    useFilter: {
-      default: true,
-      type: Boolean
-    },
-
     filtersProps: {
       default: () => ({}),
       type: Object
@@ -71,6 +62,20 @@ export default {
     results: {
       default: () => [],
       type: Array
+    },
+
+    useRefresh: {
+      default: true,
+      type: Boolean
+    },
+
+    useFilter: {
+      default: true,
+      type: Boolean
+    },
+
+    useResultsAreaOnly: {
+      type: Boolean
     }
   },
 
@@ -106,13 +111,17 @@ export default {
 
     totalPages () {
       return this.$store.getters[`${this.entity}/totalPages`]
+    },
+
+    showResults () {
+      return this.hasResults || this.useResultsAreaOnly
     }
   },
 
   watch: {
     $route (to, from) {
       if (to.name === from.name) {
-        this.fetchList()
+        this.mx_fetchHandler({ ...this.mx_context, url: this.url }, this.fetchList)
         this.setCurrentPage()
       }
     },
@@ -127,7 +136,8 @@ export default {
   },
 
   created () {
-    this.fetchList()
+    this.mx_fetchHandler({ ...this.mx_context, url: this.url }, this.fetchList)
+
     this.setCurrentPage()
   },
 
@@ -137,21 +147,22 @@ export default {
       this.$router.push({ query })
     },
 
-    async fetchList (filters = {}) {
+    async fetchList (externalPayload = {}) {
       this.mx_isFetching = true
 
-      const hasFilters = !!Object.keys(filters).length
-
       try {
-        const response = await this.$store.dispatch(
-          `${this.entity}/fetchList`,
-          {
-            ...this.mx_context,
-            url: this.url,
-            ...(hasFilters && { filters })
-          }
+        const payload = {
+          ...this.mx_context,
+          url: this.url,
+          ...externalPayload
+        }
+
+        this.$qas.logger.group(
+          `QasListView - fetchList -> Payload do parâmetro do ${this.entity}/fetchList`, [payload]
         )
 
+        const response = await this.$store.dispatch(`${this.entity}/fetchList`, payload)
+
         const { errors, fields, metadata } = response.data
 
         this.mx_setErrors(errors)
@@ -165,17 +176,27 @@ export default {
         })
 
         this.$emit('fetch-success', response)
+
+        this.$qas.logger.group(
+          `QasListView - fetchList -> resposta da action ${this.entity}/fetchList`, [response]
+        )
       } catch (error) {
         this.mx_fetchError(error)
         this.$emit('update:errors', error)
         this.$emit('fetch-error', error)
+
+        this.$qas.logger.group(
+          `QasListView - fetchSingle -> exceção da action ${this.entity}/fetchList`,
+          [error],
+          { error: true }
+        )
       } finally {
         this.mx_isFetching = false
       }
     },
 
     async refresh (done) {
-      await this.fetchList()
+      await this.mx_fetchHandler({ ...this.mx_context, url: this.url }, this.fetchList)
 
       if (typeof done === 'function') {
         done()

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

@@ -4,13 +4,11 @@ meta:
   desc: Componente para C.R.U.D. responsável pela parte de listagem (Read).
 
 props:
-  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-refresh:
-    desc: Desabilita o [pull-to-refresh](https://quasar.dev/vue-components/pull-to-refresh#basic).
-    type: Boolean
+  before-fetch:
+    desc: Callback para controlar como funciona o comportamento do fetchList.
+    default: null
+    type: Function
+    examples: ['beforeFetch({ payload, resolve, done })']
 
   entity:
     desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
@@ -60,11 +58,25 @@ props:
     desc: Envia como parâmetro para a action "fetchList" do modulo correspondente a "entity".
     type: String
 
+  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-filter:
     desc: Controla se o componente vai usar ou não o componente "QasFilters".
     default: true
     type: Boolean
 
+  use-refresh:
+    desc: Controla o [pull-to-refresh](https://quasar.dev/vue-components/pull-to-refresh#basic).
+    default: true
+    type: Boolean
+
+  use-results-area-only:
+    desc: Controla se irá sempre ser exibido os resultados independente se não há nenhum resultado a ser exibido.
+    type: Boolean
+
 slots:
   default:
     desc: 'Slot para ter o conteúdo principal (dentro do main).'

package/src/components/map/QasMap.vue

@@ -26,13 +26,13 @@ export default {
       default: () => []
     },
 
-    usePopup: {
-      type: Boolean
-    },
-
     zoom: {
       type: Number,
       default: 17
+    },
+
+    usePopup: {
+      type: Boolean
     }
   },
 
@@ -70,7 +70,7 @@ export default {
 <style lang="scss">
 .qas-map {
   &__draw {
-    height: 300px;
+    height: 300px !important;
     width: 100%;
   }
 }

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

@@ -10,11 +10,11 @@
           <div v-if="!row[destroyKey]" :key="index" class="col-12 q-mt-md">
             <div>
               <div class="flex items-center justify-between q-py-xs">
-                <qas-label v-if="!useSingleLabel" :label="setRowLabel(index)" />
+                <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" />
 
                 <div v-if="!useInlineActions" class="q-gutter-x-sm">
-                  <qas-btn v-if="useDuplicate" v-bind="btnDuplicateProps" @click="add(row)" />
-                  <qas-btn v-if="showDestroyBtn" v-bind="btnDestroyProps" @click="destroy(index, row)" />
+                  <qas-btn v-if="useDuplicate" v-bind="buttonDuplicateProps" @click="add(row)" />
+                  <qas-btn v-if="showDestroyBtn" v-bind="buttonDestroyProps" @click="destroy(index, row)" />
                 </div>
               </div>
 
@@ -75,7 +75,6 @@ import { TransitionGroup } from 'vue'
 
 import { constructObject } from '../../helpers'
 import { extend } from 'quasar'
-import { camelize } from 'humps'
 
 export default {
   name: 'QasNestedFields',
@@ -96,7 +95,7 @@ export default {
       default: 'Inserir novo campo'
     },
 
-    btnDestroyProps: {
+    buttonDestroyProps: {
       type: Object,
       default: () => {
         return {
@@ -108,14 +107,14 @@ export default {
       }
     },
 
-    btnDuplicateProps: {
+    buttonDuplicateProps: {
       type: Object,
       default: () => {
         return {
           label: 'Duplicar',
           icon: 'o_content_copy',
           flat: true,
-          hideMobileLabel: true,
+          useLabelOnSmallScreen: false,
           dense: true
         }
       }
@@ -160,6 +159,11 @@ export default {
       }
     },
 
+    identifierItemKey: {
+      type: String,
+      default: 'uuid'
+    },
+
     rowLabel: {
       type: String,
       default: ''
@@ -225,13 +229,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 () {
@@ -258,8 +256,7 @@ export default {
 
       return {
         tag: 'div',
-        enterActiveClass: 'animated slideInDown',
-        leaveActiveClass: 'animated slideOutUp'
+        enterActiveClass: 'animated slideInDown'
       }
     }
   },
@@ -272,9 +269,9 @@ export default {
       immediate: true
     },
 
-    field: {
+    rowObject: {
       handler () {
-        !this.modelValue.length && this.setDefaultNestedValue()
+        if (!this.nested.length) return this.setDefaultNestedValue()
       },
       immediate: true
     }
@@ -282,13 +279,22 @@ export default {
 
   methods: {
     add (row = {}) {
-      this.nested.push({ ...this.rowObject, ...row })
+      const payload = { ...this.rowObject, ...row }
+      const hasIdentifierKey = payload[this.identifierItemKey]
+
+      if (hasIdentifierKey) {
+        delete payload[this.identifierItemKey]
+      }
+
+      this.nested.push(payload)
 
       this.$nextTick(() => {
         this.useAnimation && this.setScroll()
         this.setFocus()
       })
 
+      this.$qas.logger.group('QasNestedFields - add', [payload])
+
       return this.updateModelValue()
     },
 
@@ -304,10 +310,12 @@ export default {
     },
 
     destroy (index, row) {
-      this.useRemoveOnDestroy
+      !row[this.identifierItemKey] && this.useRemoveOnDestroy
         ? this.nested.splice(index, 1)
         : this.nested.splice(index, 1, { [this.destroyKey]: true, ...row })
 
+      this.$qas.logger.group('QasNestedFields - destroy', [{ index, row }])
+
       return this.updateModelValue()
     },
 
@@ -333,7 +341,7 @@ export default {
       })
     },
 
-    setRowLabel (rowKey) {
+    getRowLabel (rowKey) {
       if (this.rowLabel) {
         return this.useIndexLabel ? `${this.rowLabel} ${rowKey + 1}` : this.rowLabel
       }

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

@@ -9,15 +9,15 @@ props:
     default: Inserir novo campo
     type: Boolean
 
-  btn-destroy-props:
+  button-destroy-props:
     desc: Props do botão de excluir linha contendo os campos.
     default: "{ label: 'Remover', o_cancel, flat: true, dense: true }"
     debugger: true
     type: Object
 
-  btn-duplicate-props:
+  button-duplicate-props:
     desc: Props do botão de duplicar linha contendo os campos.
-    default: "{ label: 'Duplicar', o_content_copy, flat: true, dense: true, hideMobileLabel: true }"
+    default: "{ label: 'Duplicar', o_content_copy, flat: true, dense: true, useLabelOnSmallScreen: false }"
     debugger: true
     type: Object
 
@@ -56,6 +56,12 @@ props:
     type: String
     examples: [xs, sm, md, lg, xl]
 
+  identifier-item-key:
+    desc: Define um identificador para o item. O identificador será utilizado para validar exclusão do item, por exemplo.
+    default: uuid
+    type: String
+    examples: [id, uuid, slug]
+
   model-value:
     desc: Model do componente
     default: []

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

@@ -20,17 +20,7 @@ export default {
   name: 'QasNumericInput',
 
   props: {
-    allowNegative: {
-      default: true,
-      type: Boolean
-    },
-
-    allowPositive: {
-      default: true,
-      type: Boolean
-    },
-
-    autonumericProps: {
+    autonumericOptions: {
       default: () => ({}),
       type: Object
     },
@@ -62,6 +52,16 @@ export default {
     preset: {
       default: false,
       type: [Boolean, String]
+    },
+
+    useNegative: {
+      default: true,
+      type: Boolean
+    },
+
+    usePositive: {
+      default: true,
+      type: Boolean
     }
   },
 
@@ -105,11 +105,11 @@ export default {
       Object.assign(options, autoNumericPredefinedOptions[value])
     }
 
-    if (!this.allowNegative) {
+    if (!this.useNegative) {
       options.minimumValue = 0
     }
 
-    if (!this.allowPositive) {
+    if (!this.usePositive) {
       options.maximumValue = 0
     }
 
@@ -117,7 +117,7 @@ export default {
       options.decimalPlaces = this.decimalPlaces
     }
 
-    Object.assign(options, this.autonumericProps)
+    Object.assign(options, this.autonumericOptions)
 
     this.$nextTick(() => {
       this.autoNumeric = new AutoNumeric(this.$refs.input, options)

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

@@ -7,16 +7,6 @@ meta:
   desc: Componente de input para decimal, inteiro, dinheiro e porcentagem.
 
 props:
-  allow-negative:
-    desc: Controla se pode ou não números negativos.
-    default: true
-    type: Boolean
-
-  allow-positive:
-    desc: Controla se pode ou não números positivos.
-    default: true
-    type: Boolean
-
   autonumeric-props:
     desc: Opções do autonumeric (http://autonumeric.org/guide).
     default: {}
@@ -43,6 +33,16 @@ 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]
 
+  use-negative:
+    desc: Controla se pode ou não números negativos.
+    default: true
+    type: Boolean
+
+  use-positive:
+    desc: Controla se pode ou não números positivos.
+    default: true
+    type: Boolean
+
 events:
   '@update:model-value -> function (value)':
     desc: Dispara toda vez que o model é atualizado (após o blur do input), também utilizado para v-model.

package/src/components/page-header/QasPageHeader.vue

@@ -17,23 +17,27 @@
 <script>
 import { castArray } from 'lodash-es'
 import { useHistory } from '../../composables'
+import { createMetaMixin } from 'quasar'
 
 const { hasPreviousRoute, history, getPreviousRoute } = useHistory()
 
 export default {
   name: 'QasPageHeader',
 
+  mixins: [
+    createMetaMixin(function () {
+      return {
+        title: this.title
+      }
+    })
+  ],
+
   props: {
     breadcrumbs: {
       default: '',
       type: [Array, String]
     },
 
-    useBreadcrumbs: {
-      default: true,
-      type: Boolean
-    },
-
     root: {
       default: '',
       type: [Object, String]
@@ -42,6 +46,11 @@ export default {
     title: {
       default: '',
       type: String
+    },
+
+    useBreadcrumbs: {
+      default: true,
+      type: Boolean
     }
   },
 
@@ -85,12 +94,6 @@ export default {
 
       return lastIndex === index ? 'text-grey-7' : 'text-primary'
     }
-  },
-
-  meta () {
-    return {
-      title: this.title
-    }
   }
 }
 </script>