@bildvitta/quasar-ui-asteroid 3.8.0 → 3.9.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.8.0",
+  "version": "3.9.0-beta.0",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

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

@@ -73,6 +73,10 @@ export default {
     useLabel: {
       default: true,
       type: Boolean
+    },
+
+    useTooltip: {
+      type: Boolean
     }
   },
 
@@ -136,7 +140,7 @@ export default {
     },
 
     hasTooltip () {
-      return !this.isBtnDropdown && !this.useLabel
+      return !this.isBtnDropdown && !this.useLabel && this.useTooltip
     },
 
     tooltipLabel () {

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

@@ -45,6 +45,9 @@ props:
     type: String
     examples: [visibility]
 
+  use-tooltip:
+    desc: Controla se vai ter o tooltip caso passe nas regras de exibição de tooltip
+
   use-label:
     desc: Habilita ou não o label no botão.
     default: true

package/src/components/gallery/QasGallery.vue

@@ -3,23 +3,11 @@
   <div class="qas-gallery">
     <div class="q-col-gutter-md row">
       <div v-for="(image, index) in getInitialImages()" :key="index" :class="galleryColumnsClasses" :data-cy="`gallery-image-${index}`">
-        <div class="bg-white q-pa-md rounded-borders shadow-2">
-          <div class="flat items-center justify-between no-wrap q-mb-xs row text-grey-9">
-            <div class="ellipsis q-mr-xs qas-gallery__name">
-              <slot v-if="image.name" :image="image" :index="index" name="header">
-                {{ image.name }}
-              </slot>
-            </div>
-
-            <div v-if="useDestroy">
-              <slot :destroy="onDestroy" :image="image" :index="index" name="destroy">
-                <qas-btn color="grey-9" :disabled="isDestroyDisabled(image)" icon="sym_r_delete" variant="tertiary" @click="onDestroy(image, index)" />
-              </slot>
-            </div>
-          </div>
-
-          <q-img class="cursor-pointer rounded-borders" height="150px" :src="image.url" @click="toggleCarouselDialog(index)" @error="onError(image.url)" />
-        </div>
+        <qas-gallery-card v-bind="getGalleryCardProps({ image, index })">
+          <template v-for="(_, name) in $slots" #[name]="context">
+            <slot v-bind="context" :image="image" :index="index" :name="name" />
+          </template>
+        </qas-gallery-card>
       </div>
 
       <slot>
@@ -64,6 +52,11 @@ export default {
       default: 'sym_r_chevron_left'
     },
 
+    galleryCardProps: {
+      type: Object,
+      default: () => ({})
+    },
+
     initialSize: {
       type: Number,
       default: 4,
@@ -184,6 +177,46 @@ export default {
       }
     },
 
+    getGalleryCardProps ({ image, index }) {
+      return {
+        card: image,
+        imageProps: this.getImageProps({ image, index }),
+        actionsMenuProps: this.getActionsMenuProps({ image, index }),
+        ...this.galleryCardProps
+      }
+    },
+
+    getActionsMenuProps ({ image, index }) {
+      if (!this.useDestroy) return {}
+
+      return {
+        useLabel: false,
+
+        buttonProps: {
+          disable: this.isDestroyDisabled(image)
+        },
+
+        list: {
+          destroy: {
+            label: 'Excluir',
+            color: 'grey-9',
+            icon: 'sym_r_delete',
+
+            handler: () => this.onDestroy(image, index)
+          }
+        }
+      }
+    },
+
+    getImageProps ({ image, index }) {
+      return {
+        class: 'cursor-pointer',
+
+        onClick: () => this.toggleCarouselDialog(index),
+        onError: () => this.onError(image.url)
+      }
+    },
+
     getInitialImages () {
       return this.useLoadAll
         ? this.normalizedImages
@@ -230,13 +263,3 @@ export default {
   }
 }
 </script>
-
-<!-- TODO rever tipografia -->
-<style lang="scss">
-.qas-gallery {
-  &__name {
-    font-size: 16px;
-    font-weight: 600;
-  }
-}
-</style>

package/src/components/gallery/QasGallery.yml

@@ -21,6 +21,11 @@ props:
     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" (utilizado para remover imagem).
     type: String
 
+  gallery-card-props:
+    desc: Propriedades repassadas para o QasGalleryCard
+    default: {}
+    type: Object
+
   initial-size:
     desc: Quantidade de imagens iniciais.
     default: 6
@@ -61,17 +66,39 @@ props:
     type: Boolean
 
 slots:
+  actions:
+    desc: Slot para ações do cabeçalho.
+    scope:
+      index:
+        desc: index atual.
+        default: 0
+        type: Number
+
+      image:
+        desc: imagem atual.
+        default: {}
+        type: Object
+
+  bottom:
+    desc: Slot para acessar o conteúdo abaixo da imagem.
+    scope:
+      index:
+        desc: index atual.
+        default: 0
+        type: Number
+
+      image:
+        desc: imagem atual.
+        default: {}
+        type: Object
+
+
   default:
     desc: Slot para todo conteúdo onde fica o botão "mostrar mais".
 
-  destroy:
-    desc: Slot para o ícone de remover.
+  image:
+    desc: Slot para acessar o conteúdo da imagem (onde fica o QasGridGenerator).
     scope:
-      destroy:
-        desc: Função para remover e atualizar o model.
-        default: undefined
-        type: Function
-
       index:
         desc: index atual.
         default: 0
@@ -83,7 +110,20 @@ slots:
         type: Object
 
   header:
-    desc: Slot para o header.
+    desc: Slot para acessar o conteúdo do cabeçalho.
+    scope:
+      index:
+        desc: index atual.
+        default: 0
+        type: Number
+
+      image:
+        desc: imagem atual.
+        default: {}
+        type: Object
+
+  name:
+    desc: Slot para acessar o conteúdo do nome, acima da imagem.
     scope:
       index:
         desc: index atual.

package/src/components/gallery-card/QasGalleryCard.vue

@@ -1,16 +1,17 @@
-<!-- TODO: componente adaptado somente para o uso do QasUploader, precisa ser revisitado para ser implementado no QasGallery -->
 <template>
   <div class="bg-white q-pa-md qas-gallery-card rounded-borders shadow-2" :class="classes">
-    <header class="flat items-center no-wrap q-mb-md row" :class="headerClasses">
+    <header class="flat items-center no-wrap row" :class="headerClasses">
       <slot name="header">
-        <div class="ellipsis q-mr-xs qas-gallery__name">
+        <div class="ellipsis q-mr-xs qas-gallery__name text-subtitle1">
           <slot v-if="card.name" name="name">
             {{ card.name }}
           </slot>
         </div>
 
-        <div v-if="hasActionsMenu">
-          <qas-actions-menu v-bind="defaultActionsMenuProps" />
+        <div v-if="hasActions">
+          <slot name="actions">
+            <qas-actions-menu v-bind="defaultActionsMenuProps" />
+          </slot>
         </div>
       </slot>
     </header>
@@ -84,8 +85,12 @@ export default {
       }
     },
 
-    hasActionsMenu () {
-      return !!Object.keys(this.actionsMenuProps).length
+    hasActions () {
+      return !!Object.keys(this.actionsMenuProps).length || this.hasActionsSlot
+    },
+
+    hasActionsSlot () {
+      return !!this.$slots.actions
     },
 
     hasBottom () {
@@ -100,7 +105,8 @@ export default {
       return {
         'justify-between': this.card.name,
         'justify-right': !this.card.name,
-        'text-grey-9': !this.disable
+        'text-grey-9': !this.disable,
+        'q-mb-md': this.hasActions || this.card.name
       }
     }
   }

package/src/components/gallery-card/QasGalleryCard.yml

@@ -29,6 +29,9 @@ props:
     type: Object
 
 slots:
+  actions:
+    desc: Slot para ações do cabeçalho.
+
   bottom:
     desc: Slot para acessar o conteúdo abaixo da imagem.
 

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

@@ -70,6 +70,10 @@ export default {
       type: Boolean
     },
 
+    useAutoRefetchOnDelete: {
+      type: Boolean
+    },
+
     useRefresh: {
       default: true,
       type: Boolean
@@ -100,6 +104,10 @@ export default {
   },
 
   computed: {
+    hasDeleteEventListener () {
+      return this.useAutoHandleOnDelete || this.useAutoRefetchOnDelete
+    },
+
     hasHeaderSlot () {
       return !!this.$slots.header
     },
@@ -153,13 +161,13 @@ export default {
   },
 
   mounted () {
-    if (!this.useAutoHandleOnDelete) return
+    if (!this.hasDeleteEventListener) return
 
     window.addEventListener('delete-success', this.onDeleteResult)
   },
 
   unmounted () {
-    if (!this.useAutoHandleOnDelete) return
+    if (!this.hasDeleteEventListener) return
 
     window.removeEventListener('delete-success', this.onDeleteResult)
   },
@@ -235,7 +243,7 @@ export default {
       this.page = parseInt(this.$route.query.page || 1)
     },
 
-    onDeleteResult ({ detail: { entity } }) {
+    onAutoHandleDelete ({ detail: { entity } }) {
       const { page } = this.mx_context
 
       /*
@@ -269,6 +277,15 @@ export default {
       * 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)
+    },
+
+    onDeleteResult (event) {
+      if (this.useAutoRefetchOnDelete) {
+        this.mx_fetchHandler({ ...this.mx_context, url: this.url }, this.fetchList)
+        return
+      }
+
+      this.onAutoHandleDelete(event)
     }
   }
 }

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

@@ -62,6 +62,10 @@ props:
     desc: Controla se o componente vai lidar automaticamente quando acontecer algum delete compatível com a listagem.
     type: Boolean
 
+  use-auto-refetch-on-delete:
+    desc: Controla se o componente vai fazer o fetch novamente 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/helpers/copy-to-clipboard.js

@@ -6,9 +6,9 @@ export default async (text, onLoading = () => {}) => {
 
   try {
     await copyToClipboard(text)
-    NotifySuccess('Copiado!', text)
+    NotifySuccess('Item copiado com sucesso.')
   } catch {
-    NotifyError('Não foi possível copiar.', text)
+    NotifyError('Não foi possível copiar o item.')
   } finally {
     setTimeout(() => { onLoading(false) }, 500)
   }