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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.4.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

@@ -11,9 +11,10 @@ import QasCheckboxGroup from '../checkbox-group/QasCheckboxGroup.vue'
 import QasDateTimeInput from '../date-time-input/QasDateTimeInput.vue'
 import QasInput from '../input/QasInput.vue'
 import QasNumericInput from '../numeric-input/QasNumericInput.vue'
+import QasOptionGroup from '../option-group/QasOptionGroup.vue'
 import QasPasswordInput from '../password-input/QasPasswordInput.vue'
-import QasUploader from '../uploader/QasUploader.vue'
 import QasSignatureUploader from '../signature-uploader/QasSignatureUploader.vue'
+import QasUploader from '../uploader/QasUploader.vue'
 
 const attributesProfile = {
   maxLength: 'maxlength',
@@ -29,9 +30,10 @@ export default {
     QasDateTimeInput,
     QasInput,
     QasNumericInput,
+    QasOptionGroup,
     QasPasswordInput,
-    QasUploader,
-    QasSignatureUploader
+    QasSignatureUploader,
+    QasUploader
   },
 
   inheritAttrs: false,
@@ -77,7 +79,6 @@ export default {
         maxFiles,
         useIso,
         useLazyLoading,
-        useSearch,
         useStrengthChecker
       } = this.formattedField
 
@@ -138,14 +139,14 @@ export default {
 
         boolean: { is: 'q-toggle', label, ...error },
         checkbox: { is: 'qas-checkbox-group', label, options, ...error },
-        radio: { is: 'q-option-group', label, options, type: 'radio', ...error },
+        radio: { is: 'qas-option-group', label, options },
 
         upload: { is: 'qas-uploader', accept, autoUpload: true, entity, label, multiple, readonly, maxFiles, ...error },
         editor: { is: 'q-editor', toolbar, ...error },
 
         'signature-uploader': { is: 'qas-signature-uploader', entity, uploadLabel: label, ...error },
 
-        select: { is: 'qas-select', entity, name, multiple, options, useSearch, useLazyLoading, ...input }
+        select: { is: 'qas-select', entity, name, multiple, options, useLazyLoading, ...input }
       }
 
       return { ...(profiles[type] || profiles.default), ...this.$attrs }
@@ -158,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/filters/QasFilters.vue

@@ -27,7 +27,7 @@
 
             <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="filter()">
               <div v-for="(field, index) in fields" :key="index">
-                <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" dense :field="field" />
+                <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" dense :field="field" v-bind="fieldsProps[field.name]" />
               </div>
 
               <div class="text-right">
@@ -78,6 +78,11 @@ export default {
       type: String
     },
 
+    fieldsProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     useFilterButton: {
       default: true,
       type: Boolean

package/src/components/filters/QasFilters.yml

@@ -9,6 +9,12 @@ props:
     required: true
     type: String
 
+  fields-props:
+    desc: Propriedade para repassar propriedades para cada campo individualmente.
+    default: {}
+    type: Object
+    examples: ["{ name: { dense: true, onClick: () => alert('Estou sendo clicado') } }"]
+
   search-placeholder:
     desc: Placeholder do campo de busca.
     default: Pesquisar...

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