@bildvitta/quasar-ui-asteroid 3.0.0-beta.2 → 3.0.0-beta.20

package/src/components/gallery/QasGallery.vue

@@ -17,9 +17,9 @@
           </div>
         </template>
         <template #description>
-          <q-carousel v-model="imageIndex" animated :arrows="!mx_isSmall" control-text-color="primary" :fullscreen="mx_isSmall" :height="carouselImageHeight" :next-icon="carouselNextIcon" :prev-icon="carouselPreviousIcon" swipeable :thumbnails="showThumbnails">
+          <q-carousel v-model="imageIndex" animated :arrows="!$qas.screen.isSmall" control-text-color="primary" :fullscreen="$qas.screen.isSmall" :height="carouselImageHeight" :next-icon="carouselNextIcon" :prev-icon="carouselPreviousIcon" swipeable :thumbnails="showThumbnails">
             <q-carousel-slide v-for="(image, index) in clonedImages" :key="index" class="bg-no-repeat bg-size-contain" :img-src="image" :name="index">
-              <div v-if="mx_isSmall" class="full-width justify-end row">
+              <div v-if="$qas.screen.isSmall" class="full-width justify-end row">
                 <qas-btn dense flat icon="o_close" @click="toggleCarouselDialog" />
               </div>
             </q-carousel-slide>
@@ -31,13 +31,9 @@
 </template>
 
 <script>
-import screenMixin from '../../mixins/screen'
-
 export default {
   name: 'QasGallery',
 
-  mixins: [screenMixin],
-
   props: {
     carouselNextIcon: {
       type: String,
@@ -94,13 +90,13 @@ export default {
         return this.height || 'auto'
       }
 
-      return this.mx_isSmall ? '90px' : '120px'
+      return this.$qas.screen.isSmall ? '90px' : '120px'
     },
 
     galleryColumnsClasses () {
       if (this.isSingleImage) return 'col-12'
 
-      return this.mx_isSmall ? 'col-6' : 'col-2'
+      return this.$qas.screen.isSmall ? 'col-6' : 'col-2'
     },
 
     hideShowMore () {

package/src/components/gallery/QasGallery.yml

@@ -22,13 +22,13 @@ props:
     desc: Altura da imagem (fora do dialog).
     type: String
 
-  initial-size:
-    desc: Quantidade de imagens iniciais.
+  images:
+    desc: Imagens a serem exibidas.
     default: 6
     type: Number
 
-  images:
-    desc: Imagens a serem exibidas.
+  initial-size:
+    desc: Quantidade de imagens iniciais.
     default: 6
     type: Number
 

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

@@ -4,70 +4,72 @@ meta:
   desc: Componente para criação de textos dinâmicos.
 
 props:
+  columns:
+    desc: Colunas do grid de cada campo.
+    default: col-6
+    type: [Array, String, Object]
+    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]"]
+
   content-class:
     desc: Classe de cada "div" pai referente ao resultado.
     default: ''
     type: [Array, Object, String]
 
-  header-class:
-    desc: Classe de cada "header" pai referente ao "label".
-    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
-
   empty-result-text:
     desc: Se o resultado de algum campo for vazio, esta prop define qual será o valor padrão.
     default: '-'
     type: String
 
-  result:
-    desc: Resultado contendo todas informações para serem exibidas na tela.
-    default: {}
-    type: Object
-    examples: ["{ 'joah@examples.com' }"]
-
   fields:
     desc: Lista de field contendo informações necessárias para a criação do campo correspondente.
     default: {}
     type: Object
     examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
 
-  columns:
-    desc: Colunas do grid de cada campo.
-    default: col-6
-    type: [Array, String, Object]
-    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]"]
-
   gutter:
     desc: Espaçamento entre colunas.
     default: md
     type: String
     examples: [xs, sm, md, lg, xl]
 
+  header-class:
+    desc: Classe de cada "header" pai referente ao "label".
+    default: 'text-bold'
+    type: [Array, Object, String]
+
+  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:
-  'field-[nome-da-chave]':
-    desc: Slot para todo o conteúdo dentro de cada grid (header e content).
+  content:
+    desc: Slot para o conteúdo (content).
     scope:
       field:
         desc: Conteúdo do field atual mais o resultado formatado.
         default: {}
         type: Object
 
-  header:
-    desc: Slot para o header.
+  'field-[nome-da-chave]':
+    desc: Slot para todo o conteúdo dentro de cada grid (header e content).
     scope:
       field:
         desc: Conteúdo do field atual mais o resultado formatado.
         default: {}
         type: Object
 
-  content:
-    desc: Slot para o conteúdo (content).
+  header:
+    desc: Slot para o header.
     scope:
       field:
         desc: Conteúdo do field atual mais o resultado formatado.
         default: {}
         type: Object
+

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

@@ -7,32 +7,32 @@ meta:
   desc: Componente para input que implementa o "QInput" repassando propriedades, slots e eventos.
 
 props:
+  error-message:
+    desc: Controla mensagem de erro (apenas quando "error" for "true").
+    type: String
+
+  error:
+    desc: Controla cor da borda do input.
+    type: Boolean
+
   model-value:
     desc: Model do componente.
     type: [String, Input]
     examples: [v-model="value"]
     model: true
 
-  unmasked-value:
-    desc: Remove a mascara do v-model.
-    default: true
-    type: Boolean
-
   outlined:
     desc: Controla borda do input.
     default: true
     type: Boolean
 
-  error:
-    desc: Controla cor da borda do input.
+  use-remove-error-on-type:
+    desc: Limpa os erros do campo caso os mesmos existam toda vez que o model atualiza.
     type: Boolean
 
-  error-message:
-    desc: Controla mensagem de erro (apenas quando "error" for "true").
-    type: String
-
-  remove-error-on-type:
-    desc: Limpa os erros do campo caso os mesmos existam toda vez que o model atualiza.
+  unmasked-value:
+    desc: Remove a mascara do v-model.
+    default: true
     type: Boolean
 
 events:

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-primary">
+  <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,15 +10,15 @@
       </slot>
 
       <main class="relative-position">
-        <div v-if="hasResults">
+        <div v-if="showResults">
           <slot />
         </div>
 
         <div v-else-if="!mx_isFetching">
           <slot name="empty-results">
             <div class="q-my-xl text-center">
-              <q-icon class="q-mb-sm text-center" color="grey-6" name="o_search" size="38px" />
-              <div class="text-grey-6">Nenhum item encontrado.</div>
+              <q-icon class="q-mb-sm text-center" color="grey-7" name="o_search" size="38px" />
+              <div class="text-grey-7">Nenhum item encontrado.</div>
             </div>
           </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()
       }
     },
@@ -121,12 +130,14 @@ export default {
       handler (value) {
         this.$emit('update:results', extend([], true, value))
       },
+      deep: true,
       immediate: true
     }
   },
 
   created () {
-    this.fetchList()
+    this.mx_fetchHandler({ ...this.mx_context, url: this.url }, this.fetchList)
+
     this.setCurrentPage()
   },
 
@@ -136,15 +147,22 @@ export default {
       this.$router.push({ query })
     },
 
-    async fetchList (filters = {}) {
+    async fetchList (externalPayload = {}) {
       this.mx_isFetching = true
 
       try {
-        const response = await this.$store.dispatch(
-          `${this.entity}/fetchList`,
-          { ...this.mx_context, url: this.url, 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)
@@ -158,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()