@bildvitta/quasar-ui-asteroid 3.5.0-beta.0 → 3.5.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.5.0-beta.0",
+  "version": "3.5.0-beta.1",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",
@@ -64,4 +64,4 @@
     "tags": "dist/vetur/asteroid-tags.json",
     "attributes": "dist/vetur/asteroid-attributes.json"
   }
-}
+}

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

@@ -1,49 +1,45 @@
 <template>
-  <qas-btn class="qas-actions-menu" color="primary" :icon="icon" :label="label" outline padding="md" :use-label-on-small-screen="false">
-    <q-menu class="qas-actions-menu__menu">
-      <q-list class="qas-actions-menu__list" separator>
-        <slot v-for="(item, key) in list" :item="item" :name="key">
-          <q-item :key="key" class="text-primary" clickable v-bind="item.props" @click="onClick(item)">
-            <q-item-section>
-              <div class="flex items-center justify-center q-gutter-x-md">
-                <q-icon :name="item.icon" size="sm" />
+  <div v-if="hasActions">
+    <component :is="component.is" flat v-bind="component.props" :use-label-on-small-screen="useLabelOnSmallScreen" @click="onClick()">
+      <q-menu v-if="hasMoreThanOneAction" auto-close class="q-py-xs">
+        <q-list>
+          <slot v-for="(item, key) in actions" :item="item" :name="key">
+            <component :is="getComponent(key)" v-bind="item.props" :key="key" clickable @click="onClick(item)">
+              <q-item-section avatar>
+                <q-icon :name="item.icon" />
+              </q-item-section>
+
+              <q-item-section>
                 <div>{{ item.label }}</div>
-              </div>
-            </q-item-section>
-          </q-item>
-        </slot>
-
-        <qas-delete v-if="hasDelete" v-bind="deleteProps" class="text-negative" clickable tag="q-item">
-          <q-item-section>
-            <div class="flex items-center justify-center q-gutter-x-sm">
-              <q-icon :name="deleteIcon" size="sm" />
-              <div>{{ deleteLabel }}</div>
-            </div>
-          </q-item-section>
-        </qas-delete>
-      </q-list>
-    </q-menu>
-  </qas-btn>
+              </q-item-section>
+            </component>
+          </slot>
+        </q-list>
+      </q-menu>
+    </component>
+  </div>
 </template>
 
 <script>
 import QasBtn from '../btn/QasBtn.vue'
+import QasDelete from '../delete/QasDelete.vue'
 
 export default {
   name: 'QasActionsMenu',
 
   components: {
-    QasBtn
+    QasBtn,
+    QasDelete
   },
 
   props: {
     icon: {
-      default: 'o_settings',
+      default: 'o_more_vert',
       type: String
     },
 
     label: {
-      default: 'Configurações',
+      default: 'Opções',
       type: String
     },
 
@@ -65,17 +61,79 @@ export default {
     deleteProps: {
       default: () => ({}),
       type: Object
+    },
+
+    useLabelOnSmallScreen: {
+      default: true,
+      type: Boolean
     }
   },
 
   computed: {
+    actions () {
+      return {
+        ...this.list,
+        ...(this.hasDelete && {
+          delete: {
+            icon: this.deleteIcon,
+            label: this.deleteLabel,
+            props: {
+              ...this.deleteProps,
+              tag: this.hasMoreThanOneAction ? 'q-item' : 'qas-btn'
+            }
+          }
+        })
+      }
+    },
+
+    component () {
+      const props = {}
+
+      if (this.hasMoreThanOneAction) {
+        props.label = 'Opções'
+        props.iconRight = this.icon
+        props.textColor = 'dark'
+      } else {
+        props.icon = this.actions[this.firstItemKey]?.icon
+        props.label = this.actions[this.firstItemKey]?.label
+        props.color = 'primary'
+      }
+
+      this.hasDelete && Object.assign(props, this.deleteProps)
+
+      return {
+        is: this.hasMoreThanOneAction || !this.hasDelete ? 'qas-btn' : 'qas-delete',
+        props
+      }
+    },
+
+    firstItemKey () {
+      return Object.keys(this.actions)?.[0]
+    },
+
+    hasActions () {
+      return !!Object.keys(this.actions).length
+    },
+
     hasDelete () {
       return !!Object.keys(this.deleteProps).length
+    },
+
+    hasMoreThanOneAction () {
+      return Object.keys(this.actions || {}).length > 1
     }
   },
 
   methods: {
-    onClick (item) {
+    getComponent (key) {
+      return key === 'delete' ? 'qas-delete' : 'q-item'
+    },
+
+    onClick (item = {}) {
+      if (!this.hasMoreThanOneAction) {
+        item = this.actions[this.firstItemKey]
+      }
+
       if (typeof item.handler === 'function') {
         const { handler, ...filtered } = item
         item.handler(filtered)
@@ -84,12 +142,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.qas-actions-menu {
-  &__list {
-    width: 265px;
-    z-index: 1;
-  }
-}
-</style>

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

@@ -21,15 +21,10 @@ props:
 
   icon:
     desc: Ícone do botão.
-    default: o_settings
+    default: o_more_vert
     type: String
     examples: [start, end, between, around, center]
 
-  label:
-    desc: Rotulo do botão.
-    default: Configurações
-    type: String
-
   list:
     desc: Lista de items que vão ser criados dentro do menu de ações.
     default: '{}'
@@ -44,6 +39,11 @@ props:
       }"
     ]
 
+  use-label-on-small-screen:
+    desc: Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno (esta propriedade só funciona se o "rotulo") for passado via propriedade "label".
+    default: true
+    type: Boolean
+
 slots:
   '[nome-da-chave]':
     desc: 'Slot dinâmico gerado a partir das chaves dentro do objeto da prop "list"'

package/src/components/app-menu/QasAppMenu.vue

@@ -179,7 +179,7 @@ export default {
   }
 
   &__children.q-item {
-    padding-left: var(--qas-spacing-lg);
+    padding-left: var(--qas-spacing-xl);
   }
 
   &__item-children.q-item + &__item-children.q-item {

package/src/components/copy/QasCopy.vue

@@ -2,7 +2,7 @@
   <span>
     <slot>{{ text }}</slot>
 
-    <qas-btn class="q-ml-xs" color="grey-7" flat :icon="icon" :loading="isLoading" round :size="size" @click="copy">
+    <qas-btn class="q-ml-xs" color="grey-7" flat :icon="icon" :loading="isLoading" round :size="size" @click.stop="copy">
       <q-tooltip>Copiar</q-tooltip>
     </qas-btn>
   </span>

package/src/components/delete/QasDelete.vue

@@ -1,5 +1,5 @@
 <template>
-  <component v-bind="$attrs" :is="tag" @click="openConfirmDialog">
+  <component v-bind="$attrs" :is="tag" @click.stop="openConfirmDialog">
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>

package/src/components/field/QasField.vue

@@ -159,11 +159,18 @@ export default {
     // This computed will change the key name when the server sends different key.
     formattedField () {
       const field = {}
+      const nonRequiredFieldsLabel = ['boolean', 'checkbox', 'radio']
 
       for (const key in this.field) {
         field[attributesProfile[key] || key] = this.field[key]
       }
 
+      const { label, required, type } = field
+
+      if (required && label && !nonRequiredFieldsLabel.includes(type)) {
+        field.label = `${label}*`
+      }
+
       return field
     },
 

package/src/components/form-generator/QasFormGenerator.yml

@@ -46,7 +46,7 @@ props:
 
   gutter:
     desc: Espaçamento entre colunas.
-    default: md
+    default: lg
     type: [String, Boolean]
     examples: [xs, sm, md, lg, xl, false]
 

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

@@ -28,7 +28,7 @@ props:
 
   gutter:
     desc: Espaçamento entre colunas.
-    default: md
+    default: lg
     type: String
     examples: [xs, sm, md, lg, xl]
 

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

@@ -16,9 +16,8 @@
 
         <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-7" name="o_search" size="38px" />
-              <div class="text-grey-7">Nenhum item encontrado.</div>
+            <div class="q-my-lg text-body1 text-grey-7">
+              Não há itens para serem exibidos.
             </div>
           </slot>
         </div>
@@ -27,8 +26,8 @@
           <q-spinner color="grey" size="3em" />
         </div>
 
-        <div v-if="hasPages" class="justify-center q-mt-lg">
-          <q-pagination v-model="page" boundary-links class="flex-center" direction-links :input="$q.screen.lt.sm" :max="totalPages" :max-pages="6" @click="changePage" />
+        <div v-if="hasPages" class="flex items-center q-mt-sm" :class="paginationClasses">
+          <qas-pagination v-model="page" :max="totalPages" @click="changePage" />
         </div>
 
         <q-inner-loading :showing="hasResults && mx_isFetching">
@@ -44,12 +43,14 @@
 <script>
 import { viewMixin, contextMixin } from '../../mixins'
 import QasFilters from '../filters/QasFilters.vue'
+import QasPagination from '../pagination/QasPagination.vue'
 import { extend } from 'quasar'
 import { getState, getAction } from '@bildvitta/store-adapter'
 
 export default {
   components: {
-    QasFilters
+    QasFilters,
+    QasPagination
   },
 
   mixins: [contextMixin, viewMixin],
@@ -65,6 +66,10 @@ export default {
       type: Array
     },
 
+    useAutoHandleOnDelete: {
+      type: Boolean
+    },
+
     useRefresh: {
       default: true,
       type: Boolean
@@ -89,7 +94,8 @@ export default {
 
   data () {
     return {
-      page: 1
+      page: 1,
+      resultsQuantity: 0
     }
   },
 
@@ -116,6 +122,10 @@ export default {
 
     showResults () {
       return this.hasResults || this.useResultsAreaOnly
+    },
+
+    paginationClasses () {
+      return this.$qas.screen.isSmall ? 'justify-center column' : 'justify-end'
     }
   },
 
@@ -142,6 +152,18 @@ export default {
     this.setCurrentPage()
   },
 
+  mounted () {
+    if (!this.useAutoHandleOnDelete) return
+
+    window.addEventListener('delete-success', this.onDeleteResult)
+  },
+
+  unmounted () {
+    if (!this.useAutoHandleOnDelete) return
+
+    window.removeEventListener('delete-success', this.onDeleteResult)
+  },
+
   methods: {
     changePage () {
       const query = { ...this.$route.query, page: this.page }
@@ -168,7 +190,8 @@ export default {
           payload
         })
 
-        const { errors, fields, metadata } = response.data
+        const { errors, fields, metadata, results } = response.data
+        this.resultsQuantity = results.length
 
         this.mx_setErrors(errors)
         this.mx_setFields(fields)
@@ -210,6 +233,42 @@ export default {
 
     setCurrentPage () {
       this.page = parseInt(this.$route.query.page || 1)
+    },
+
+    onDeleteResult ({ detail: { entity } }) {
+      const { page } = this.mx_context
+
+      /*
+      * - se a entidade que estiver sendo excluída for diferente da entidade da listagem, ignora.
+      * - se a ultima pagina da paginação for igual a pagina atual e tiver mais de um resultado, ignora.
+      * - se não existir paginação (somente 1), ignora.
+      */
+      const skipRefreshList = [
+        (entity !== this.entity),
+        (this.totalPages === page && this.resultsQuantity > 1),
+        (this.totalPages === 1)
+      ]
+
+      this.resultsQuantity -= 1
+
+      if (skipRefreshList.find(Boolean)) return
+
+      /*
+      * caso eu remova o ultimo item da ultima pagina eu volto ele para a pagina anterior
+      * ex: estou na pagina 3 que é a ultima pagina, e removo o ultimo item dela, eu volto o usuário para pagina 2
+      */
+      if (this.resultsQuantity === 1 || !this.resultsQuantity) {
+        const { path, query } = this.$route
+
+        this.$router.replace({ path, query: { ...query, page: query.page - 1 } })
+        return
+      }
+
+      /*
+      * caso remova algo de uma pagina que não seja a ultima, chama o método fetchList novamente
+      * ex: estou na pagina 2 e existem 3 paginas, removo um item da pagina 2, então chamo o método fetchList
+      */
+      this.mx_fetchHandler({ ...this.mx_context, url: this.url }, this.fetchList)
     }
   }
 }

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

@@ -58,6 +58,10 @@ props:
     desc: Envia como parâmetro para a action "fetchList" do modulo correspondente a "entity".
     type: String
 
+  use-auto-handle-on-delete:
+    desc: Controla se o componente vai lidar automaticamente quando acontecer algum delete compatível com a listagem.
+    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

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

@@ -11,11 +11,7 @@
             <div>
               <div class="flex items-center justify-between q-py-xs">
                 <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" />
-
-                <div v-if="hasBlockActions(row)" class="q-gutter-x-sm">
-                  <qas-btn v-if="useDuplicate" v-bind="buttonDuplicateProps" @click="add(row)" />
-                  <qas-btn v-if="showDestroyBtn" v-bind="buttonDestroyProps" @click="destroy(index, row)" />
-                </div>
+                <qas-actions-menu v-if="hasBlockActions(row)" :list="getActionsList(index, row)" :use-label-on-small-screen="false" />
               </div>
 
               <div ref="formGenerator" class="col-12 justify-between q-col-gutter-x-md row">
@@ -28,12 +24,7 @@
                 </slot>
 
                 <div v-if="hasInlineActions(row)" class="flex items-center qas-nested-fields__actions">
-                  <div class="col-auto">
-                    <qas-btn v-if="useDuplicate" color="primary" flat icon="o_content_copy" round @click="add(row)" />
-                  </div>
-                  <div class="col-auto">
-                    <qas-btn v-if="showDestroyBtn" color="negative" flat icon="o_cancel" round @click="destroy(index, row)" />
-                  </div>
+                  <qas-actions-menu :list="getActionsList(index, row)" :use-label-on-small-screen="false" />
                 </div>
               </div>
 
@@ -47,18 +38,22 @@
 
       <div v-if="useAdd" class="q-mt-md">
         <slot :add="add" name="add-input">
-          <div v-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" @click="add()">
+          <div v-if="showAddFirstInputButton" class="text-left">
+            <qas-btn class="q-px-sm" color="dark" flat @click="add()">{{ addFirstInputLabel }}</qas-btn>
+          </div>
+
+          <div v-else-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" @click="add()">
             <div class="col">
               <qas-input class="disabled no-pointer-events" hide-bottom-space :label="addInputLabel" outlined @focus="add()" />
             </div>
 
             <div class="col-auto">
-              <qas-btn color="green" flat icon="o_add_circle_outline" round />
+              <qas-btn color="dark" flat icon="o_add_circle_outline" round />
             </div>
           </div>
 
-          <div v-else class="q-mt-lg">
-            <qas-btn class="full-width q-py-md" icon="o_add" outline @click="add()">{{ addInputLabel }}</qas-btn>
+          <div v-else class="text-left">
+            <qas-btn class="q-px-sm" color="dark" flat icon="o_add" @click="add()">{{ addInputLabel }}</qas-btn>
           </div>
         </slot>
       </div>
@@ -67,6 +62,7 @@
 </template>
 
 <script>
+import QasActionsMenu from '../actions-menu/QasActionsMenu.vue'
 import QasBtn from '../btn/QasBtn.vue'
 import QasFormGenerator from '../form-generator/QasFormGenerator.vue'
 import QasInput from '../input/QasInput.vue'
@@ -80,27 +76,38 @@ export default {
   name: 'QasNestedFields',
 
   components: {
+    QasActionsMenu,
     QasBtn,
     QasFormGenerator,
     QasInput,
     QasLabel,
 
-    // vue
+    // Vue
     TransitionGroup
   },
 
   props: {
+    actionsMenuProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    addFirstInputLabel: {
+      type: String,
+      default: 'Clique aqui para adicionar'
+    },
+
     addInputLabel: {
       type: String,
-      default: 'Inserir novo campo'
+      default: 'Adicionar'
     },
 
     buttonDestroyProps: {
       type: Object,
       default: () => {
         return {
-          label: 'Remover',
-          icon: 'o_cancel',
+          label: 'Excluir',
+          icon: 'o_delete',
           flat: true,
           dense: true
         }
@@ -190,7 +197,8 @@ export default {
     },
 
     useDestroyAlways: {
-      type: Boolean
+      type: Boolean,
+      default: undefined
     },
 
     useDuplicate: {
@@ -198,6 +206,11 @@ export default {
       default: true
     },
 
+    useFirstInputButton: {
+      type: Boolean,
+      default: true
+    },
+
     useIndexLabel: {
       type: Boolean
     },
@@ -215,6 +228,11 @@ export default {
       default: true
     },
 
+    useStartsEmpty: {
+      default: true,
+      type: Boolean
+    },
+
     modelValue: {
       type: Array,
       default: () => []
@@ -225,25 +243,35 @@ export default {
 
   data () {
     return {
-      nested: []
+      nested: [],
+      hasDestroyAlways: true
     }
   },
 
   computed: {
-    fieldLabel () {
-      return this.field?.label
+    children () {
+      return this.field?.children
     },
 
-    fieldName () {
-      return this.field?.name
+    componentTag () {
+      return this.useAnimation ? 'transition-group' : 'div'
     },
 
-    children () {
-      return this.field?.children
+    componentProps () {
+      if (!this.useAnimation) return {}
+
+      return {
+        tag: 'div',
+        enterActiveClass: 'animated slideInDown'
+      }
     },
 
-    showDestroyBtn () {
-      return this.nested.filter(item => !item[this.destroyKey]).length > 1 || this.useDestroyAlways
+    fieldLabel () {
+      return this.field?.label
+    },
+
+    fieldName () {
+      return this.field?.name
     },
 
     formClasses () {
@@ -253,21 +281,16 @@ export default {
       }
     },
 
-    transformedErrors () {
-      return Array.isArray(this.errors) ? this.errors : constructObject(this.fieldName, this.errors)
+    showDestroyBtn () {
+      return this.nested.filter(item => !item[this.destroyKey]).length > 1 || this.useDestroyAlways
     },
 
-    componentTag () {
-      return this.useAnimation ? 'transition-group' : 'div'
+    transformedErrors () {
+      return Array.isArray(this.errors) ? this.errors : constructObject(this.fieldName, this.errors)
     },
 
-    componentProps () {
-      if (!this.useAnimation) return {}
-
-      return {
-        tag: 'div',
-        enterActiveClass: 'animated slideInDown'
-      }
+    showAddFirstInputButton () {
+      return this.useFirstInputButton && !this.nested.length
     }
   },
 
@@ -282,13 +305,49 @@ export default {
 
     rowObject: {
       handler () {
-        if (!this.nested.length) return this.setDefaultNestedValue()
+        this.setDefaultNestedValue()
+      },
+      immediate: true
+    },
+
+    useDestroyAlways: {
+      handler (value) {
+        this.hasDestroyAlways = value ?? this.useStartsEmpty
       },
       immediate: true
     }
   },
 
   methods: {
+    getActionsList (index, row) {
+      const list = {}
+
+      if (this.useDuplicate) {
+        list.duplicate = {
+          ...this.buttonDuplicateProps,
+          handler: () => this.add(row)
+        }
+      }
+
+      if (this.showDestroyBtn) {
+        list.destroy = {
+          ...this.buttonDestroyProps,
+          handler: () => this.destroy(index, row)
+        }
+      }
+
+      for (const key in this.actionsMenuProps.list) {
+        const { handler, ...content } = this.actionsMenuProps.list[key] || {}
+
+        list[key] = {
+          handler: payload => handler?.({ payload, row, index }),
+          ...content
+        }
+      }
+
+      return list
+    },
+
     add (row = {}) {
       const payload = { ...this.rowObject, ...row }
       const hasIdentifierKey = payload[this.identifierItemKey]
@@ -345,6 +404,7 @@ export default {
     },
 
     setDefaultNestedValue () {
+      if (this.nested.length || this.useStartsEmpty) return
       this.nested.splice(0, 0, { ...this.rowObject })
     },
 

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

@@ -4,14 +4,24 @@ meta:
   desc: Componente para gerar dinamicamente campos nested.
 
 props:
+  actions-menu-props:
+    desc: Repassa as propriedades para o componente QasActionsMenu.
+    default: {}
+    type: Object
+
+  add-first-input-label:
+    desc: Rótulo do input para adicionar o primeiro campo.
+    default: Clique aqui para adicionar
+    type: String
+
   add-input-label:
     desc: Rótulo do input de adicionar novos campos.
-    default: Inserir novo campo
-    type: Boolean
+    default: Adicionar
+    type: String
 
   button-destroy-props:
     desc: Props do botão de excluir linha contendo os campos.
-    default: "{ label: 'Remover', o_cancel, flat: true, dense: true }"
+    default: "{ label: 'Excluir', icon: 'o_delete', flat: true, dense: true }"
     debugger: true
     type: Object
 
@@ -76,17 +86,17 @@ props:
     model: true
 
   row-label:
-    desc: Rótulo entre cada linha (row).
+    desc: Rótulo entre cada linha.
     type: String
 
   row-object:
-    desc: Objeto contendo valores iniciais do model de cada linha (row).
+    desc: Objeto contendo valores iniciais do model de cada linha.
     default: {}
     type: Object
     examples: ["{ name: '', cities: [] }"]
 
   use-add:
-    desc: Controla quando vai ter seção de "adicionar" novas rows (linhas).
+    desc: Controla quando vai ter seção de "adicionar" novas linhas.
     default: true
     type: Boolean
 
@@ -96,7 +106,7 @@ props:
     type: Boolean
 
   use-destroy-always:
-    desc: Controla o botão de remover em todas linhas (row), incluindo a primeira.
+    desc: Controla o botão de remover em todas linhas, incluindo a primeira.
     type: Boolean
 
   use-duplicate:
@@ -104,20 +114,30 @@ props:
     default: true
     type: Boolean
 
+  use-first-input-button:
+    desc: Controla se vai ter um botão diferente para adicionar o primeiro campo.
+    default: true
+    type: Boolean
+
   use-index-label:
     desc: Se tiver "rowLabel" esta prop controla se cada label da linha vai ter o index como sufixo.
     type: Boolean
 
   use-inline-actions:
-    desc: Controla o comportamento referente aos estilos das ações de duplicar/adicionar/remover
+    desc: Controla o comportamento referente aos estilos das ações de duplicar/adicionar/remover.
     type: Boolean
 
   use-single-label:
-    desc: Se o valor for "true", então vai exibir apenas uma label referente a todas linhas (row) e não uma por linha
+    desc: Exibe apenas uma label referente a todas linhas, e não uma por linha.
     type: Boolean
 
   use-remove-on-destroy:
-    desc: Se o valor for "true" o valor do model será removido senão será adicionar uma flag como `destroyed` por exemplo.
+    desc: O valor do model será removido senão será adicionar uma flag como `destroyed` por exemplo.
+    default: true
+    type: Boolean
+
+  use-starts-empty:
+    desc: O componente iniciará sem nenhuma linha.
     default: true
     type: Boolean
 

package/src/components/pagination/QasPagination.vue

@@ -0,0 +1,27 @@
+<template>
+  <q-pagination v-bind="defaultProps" />
+</template>
+
+<script>
+export default {
+  name: 'QasPagination',
+
+  computed: {
+    defaultProps () {
+      const { modelValue, ...attributes } = this.$attrs
+
+      return {
+        activeColor: 'primary',
+        activeDesign: 'flat',
+        boundaryNumbers: true,
+        color: 'grey-7',
+        directionLinks: true,
+        maxPages: modelValue < 3 ? 3 : 6,
+        modelValue,
+
+        ...attributes
+      }
+    }
+  }
+}
+</script>

package/src/components/pagination/QasPagination.yml

@@ -0,0 +1,4 @@
+type: component
+
+meta:
+  desc: Componente para paginação de listagens.

package/src/components/table-generator/QasTableGenerator.vue

@@ -1,5 +1,5 @@
 <template>
-  <qas-box class="q-mb-xl q-px-lg q-py-md">
+  <qas-box class="q-px-lg q-py-md">
     <q-table ref="table" class="bg-transparent qas-table-generator" :class="tableClass" v-bind="attributes">
       <template v-for="(_, name) in $slots" #[name]="context">
         <slot v-if="hasBodySlot" name="body" :props="context" />
@@ -70,7 +70,10 @@ export default {
         flat: true,
         hideBottom: true,
         pagination: { rowsPerPage: 0 },
-        rowKey: this.rowKey
+        rowKey: this.rowKey,
+
+        // Eventos.
+        onRowClick: this.$attrs.onRowClick && this.onRowClick
       }
 
       return attributes
@@ -220,6 +223,11 @@ export default {
       }
     },
 
+    onRowClick () {
+      if (this.hasScrollOnGrab && this.scrollOnGrab.haveMoved()) return
+      this.$attrs.onRowClick(...arguments)
+    },
+
     setObserver () {
       this.elementToObserve = this.getTableElement()
       this.resizeObserver = new ResizeObserver(entries => {

package/src/components/table-generator/QasTableGenerator.yml

@@ -44,3 +44,17 @@ slots:
         desc: Payload da linha da tabela.
         default: {}
         type: Object
+
+events:
+  '@row-click -> function(event, row, index)':
+    desc: Dispara ao clicar em uma linha. Não funciona usando slots personalizados (body, row e item).
+    params:
+      event:
+        desc: Evento do click.
+        type: Event
+      row:
+        desc: Payload da linha da tabela.
+        type: Object
+      index:
+        desc: Índice da linha.
+        type: Number

package/src/components/text-truncate/QasTextTruncate.vue

@@ -4,7 +4,7 @@
       <div ref="truncate" :class="truncateTextClass">
         <slot>{{ text }}</slot>
       </div>
-      <div v-if="isTruncated" class="cursor-pointer text-primary" @click="toggleDialog">{{ seeMoreLabel }}</div>
+      <div v-if="isTruncated" class="cursor-pointer text-primary" @click.stop="toggleDialog">{{ seeMoreLabel }}</div>
     </div>
 
     <qas-dialog v-model="showDialog" v-bind="defaultDialogProps">

package/src/css/components/item.scss

@@ -1,6 +1,10 @@
 .q-item {
   font-size: 16px;
 
+  &:not(.disabled) {
+    font-weight: 600;
+  }
+
   &.q-router-link--active {
     background-color: transparent !important;
     font-weight: 600;

package/src/css/plugins/index.scss

@@ -0,0 +1 @@
+@import './notify';

package/src/css/plugins/notify.scss

@@ -0,0 +1,40 @@
+.q-notification {
+  margin-top: 80px;
+
+  &__content {
+    .q-icon {
+      margin-right: var(--qas-spacing-sm);
+    }
+  }
+
+  &__actions {
+    align-self: start;
+    padding-top: var(--qas-spacing-xs);
+
+    .q-btn {
+      color: white;
+      height: var(--qas-spacing-md);
+      min-height: auto;
+      min-width: auto;
+      padding: 0;
+      text-align: center;
+      text-transform: none;
+      width: var(--qas-spacing-md);
+
+      &__content {
+        height: var(--qas-spacing-md);
+
+        span {
+          align-self: center;
+          height: var(--qas-spacing-md);
+          line-height: 0.9;
+          width: var(--qas-spacing-md);
+        }
+      }
+    }
+  }
+
+  @media (max-width: $breakpoint-xs) {
+    margin-top: 40px;
+  }
+}

package/src/css/variables/spacing.scss

@@ -27,15 +27,15 @@ $space-md: (
   y: $space-y-base
 );
 
-// O tamanho original seria "16px * 1.5" ou "24px", alterado para ter "32px"
 $space-lg: (
-  x: ($space-x-base * 2),
-  y: ($space-y-base * 2)
+  x: ($space-x-base * 1.5),
+  y: ($space-y-base * 1.5)
 );
 
+// O tamanho original seria "16px * 3" ou "48px", alterado para ter "32px"
 $space-xl: (
-  x: ($space-x-base * 3),
-  y: ($space-y-base * 3)
+  x: ($space-x-base * 2),
+  y: ($space-y-base * 2)
 );
 
 $spaces: (

package/src/helpers/set-scroll-on-grab.js

@@ -2,6 +2,7 @@ export default function (element) {
   setStyle()
 
   let isDown = false
+  let moved = false
   let startX
   let scrollLeft
 
@@ -12,35 +13,38 @@ export default function (element) {
 
   function onMouseDown (event) {
     isDown = true
+    moved = false
+
     element.classList.add('active')
+
     startX = event.pageX - element.offsetLeft
     scrollLeft = element.scrollLeft
   }
 
   function onMouseLeave () {
     isDown = false
-    element.classList.remove('active')
 
+    element.classList.remove('active')
     setStyle()
   }
 
   function onMouseUp () {
     isDown = false
-    element.classList.remove('active')
 
+    element.classList.remove('active')
     setStyle()
   }
 
   function onMouseMove (event) {
+    if (event) event.preventDefault()
     if (!isDown) return
 
-    event.preventDefault()
-
     setStyle('grabbing')
 
     const x = event.pageX - element.offsetLeft
     const walk = (x - startX) * 3 // scroll-fast
     element.scrollLeft = scrollLeft - walk
+    moved = true
   }
 
   function setStyle (model = 'grab') {
@@ -54,8 +58,13 @@ export default function (element) {
     element.removeEventListener('mousemove', onMouseMove)
   }
 
+  function haveMoved () {
+    return moved
+  }
+
   return {
     element,
+    haveMoved,
     destroyEvents
   }
 }

package/src/index.scss

@@ -22,8 +22,11 @@ $generic-border-radius: var(--qas-generic-border-radius);
 // components
 @import './css/components/index';
 
+// plugins
+@import './css/plugins/index';
+
 // utils
 @import './css/utils/index';
 
 // mixins
-@import './css/mixins/index'
+@import './css/mixins/index';

package/src/mixins/generator.js

@@ -13,7 +13,7 @@ export default {
     },
 
     gutter: {
-      default: 'md',
+      default: 'lg',
       type: [String, Boolean],
       validator: value => {
         return typeof value === 'boolean' || ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)

package/src/plugins/notify-error/NotifyError.js

@@ -1,10 +1,12 @@
 import { Notify } from 'quasar'
+import notifyConfig from '../../shared/notify-config.js'
 
-Notify.registerType('error', {
-  color: 'negative',
-  progress: true
-})
+Notify.registerType('error', { icon: 'o_cancel', ...notifyConfig })
 
 export default (message, caption) => {
-  Notify.create({ caption, message, type: 'error' })
+  Notify.create({
+    caption,
+    message,
+    type: 'error'
+  })
 }

package/src/plugins/notify-success/NotifySuccess.js

@@ -1,10 +1,12 @@
 import { Notify } from 'quasar'
+import notifyConfig from '../../shared/notify-config.js'
 
-Notify.registerType('success', {
-  icon: 'o_check',
-  progress: true
-})
+Notify.registerType('success', { icon: 'o_check_circle', ...notifyConfig })
 
 export default (message, caption) => {
-  Notify?.create({ caption, message, type: 'success' })
+  Notify.create({
+    caption,
+    message,
+    type: 'success'
+  })
 }

package/src/shared/notify-config.js

@@ -0,0 +1,7 @@
+export default {
+  color: 'grey-9',
+  progress: true,
+  closeBtn: 'x',
+  position: 'top',
+  timeout: 4000
+}

package/src/vue-plugin.js

@@ -31,6 +31,7 @@ import QasNestedFields from './components/nested-fields/QasNestedFields.vue'
 import QasNumericInput from './components/numeric-input/QasNumericInput.vue'
 import QasOptionGroup from './components/option-group/QasOptionGroup.vue'
 import QasPageHeader from './components/page-header/QasPageHeader.vue'
+import QasPagination from './components/pagination/QasPagination.vue'
 import QasPasswordInput from './components/password-input/QasPasswordInput.vue'
 import QasPasswordStrengthChecker from './components/password-strength-checker/QasPasswordStrengthChecker.vue'
 import QasProfile from './components/profile/QasProfile.vue'
@@ -102,6 +103,7 @@ function install (app) {
   app.component('QasNumericInput', QasNumericInput)
   app.component('QasOptionGroup', QasOptionGroup)
   app.component('QasPageHeader', QasPageHeader)
+  app.component('QasPagination', QasPagination)
   app.component('QasPasswordInput', QasPasswordInput)
   app.component('QasPasswordStrengthChecker', QasPasswordStrengthChecker)
   app.component('QasProfile', QasProfile)
@@ -174,6 +176,7 @@ export {
   QasNumericInput,
   QasOptionGroup,
   QasPageHeader,
+  QasPagination,
   QasPasswordInput,
   QasPasswordStrengthChecker,
   QasProfile,