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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.8.0",
+  "version": "3.9.0-beta.1",
   "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/app-bar/QasAppBar.vue

@@ -11,8 +11,8 @@
         </router-link>
       </q-toolbar-title>
 
-      <slot v-if="hasUser" name="user" :user="user">
-        <qas-app-user :menu-props="appUserMenuProps" :user="user" @sign-out="signOut" />
+      <slot v-if="hasUser" name="user">
+        <qas-app-user v-bind="defaultAppUserProps" />
       </slot>
     </q-toolbar>
   </q-header>
@@ -31,6 +31,12 @@ export default {
   },
 
   props: {
+    appUserProps: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
+
     brand: {
       default: '',
       type: String
@@ -44,12 +50,6 @@ export default {
     title: {
       required: true,
       type: String
-    },
-
-    user: {
-      default: () => ({}),
-      require: true,
-      type: Object
     }
   },
 
@@ -70,6 +70,19 @@ export default {
       }
     },
 
+    defaultAppUserProps () {
+      return {
+        menuProps: {
+          anchor: 'bottom end',
+          offset: [0, 5],
+          self: 'top end'
+        },
+
+        onSignOut: this.signOut,
+        ...this.appUserProps
+      }
+    },
+
     developmentBadgeLabel () {
       const hosts = {
         localhost: 'Local',
@@ -92,7 +105,7 @@ export default {
     },
 
     hasUser () {
-      return !!Object.keys(this.user).length
+      return !!Object.keys(this.defaultAppUserProps.user || {}).length
     },
 
     rootRoute () {

package/src/components/app-bar/QasAppBar.yml

@@ -4,6 +4,12 @@ meta:
   desc: Gerencia a barra superior da aplicação
 
 props:
+  app-user-props:
+    desc: Props repassadas para o QasAppUser.
+    default: {}
+    type: Object
+    required: true
+
   brand:
     desc: Path do logotipo.
     type: String
@@ -18,20 +24,6 @@ props:
     required: true
     type: String
 
-  user:
-    desc: Informações do usuário.
-    type: Object
-    default: {}
-    examples: [
-      "
-      {
-        photo: 'minha-img',
-        name: 'Eduardo Lima',
-        email: 'eduardolima@gmail.com'
-      }
-      "
-    ]
-
 slots:
   user:
     desc: Slot para acessar o menu de usuário.

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

@@ -76,8 +76,8 @@
         </div>
 
         <!-- User -->
-        <div v-if="showUser" class="full-width q-pb-lg q-px-lg">
-          <qas-app-user v-bind="appUserProps" />
+        <div v-if="showAppUser" class="full-width q-pb-lg q-px-lg">
+          <qas-app-user v-bind="defaultAppUserProps" />
         </div>
       </div>
     </q-drawer>
@@ -102,6 +102,12 @@ export default {
   inheritAttrs: false,
 
   props: {
+    appUserProps: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
+
     brand: {
       default: '',
       required: true,
@@ -137,12 +143,6 @@ export default {
     title: {
       default: '',
       type: String
-    },
-
-    user: {
-      default: () => ({}),
-      require: true,
-      type: Object
     }
   },
 
@@ -168,20 +168,6 @@ export default {
       }
     },
 
-    appUserProps () {
-      return {
-        avatarSize: '40px',
-        user: this.user,
-
-        menuProps: {
-          'onUpdate:modelValue': this.setHasOpenedMenu
-        },
-
-        // eventos
-        onSignOut: this.signOut
-      }
-    },
-
     behavior () {
       return this.isUntilLarge ? 'mobile' : 'desktop'
     },
@@ -213,6 +199,20 @@ export default {
       return this.defaultModules.find(module => module?.value.includes(hostname))?.value
     },
 
+    defaultAppUserProps () {
+      return {
+        avatarSize: '40px',
+
+        menuProps: {
+          'onUpdate:modelValue': this.setHasOpenedMenu
+        },
+
+        // eventos
+        onSignOut: this.signOut,
+        ...this.appUserProps
+      }
+    },
+
     defaultModules () {
       if (!isLocalDevelopment()) return this.modules
 
@@ -289,7 +289,7 @@ export default {
       return this.$router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
     },
 
-    showUser () {
+    showAppUser () {
       return this.hasUser && !this.isUntilLarge
     },
 
@@ -339,7 +339,7 @@ export default {
     },
 
     hasUser () {
-      return !!Object.keys(this.user).length
+      return !!Object.keys(this.defaultAppUserProps.user || {}).length
     },
 
     isActive ({ to }) {

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

@@ -4,6 +4,12 @@ meta:
   desc: Menu lateral.
 
 props:
+  app-user-props:
+    desc: Props repassadas para o QasAppUser.
+    default: {}
+    type: Object
+    required: true
+
   brand:
     desc: Logotipo quando menu esta aberto.
     type: String
@@ -38,20 +44,6 @@ props:
     desc: Título que vai ficar no label do select de módulos.
     type: String
 
-  user:
-    desc: Informações do usuário.
-    type: Object
-    default: {}
-    examples: [
-      "
-      {
-        photo: 'minha-img',
-        name: 'Eduardo Lima',
-        email: 'eduardolima@gmail.com'
-      }
-      "
-    ]
-
 slots:
   user:
     desc: Slot para acessar o menu de usuário.

package/src/components/app-user/QasAppUser.vue

@@ -17,6 +17,8 @@
         <div class="ellipsis qas-app-user__menu-name">{{ userName }}</div>
         <div class="ellipsis">{{ user.email }}</div>
 
+        <qas-select v-if="hasCompaniesSelect" v-model="companiesModel" class="q-my-md" label="Vínculo" :loading="loading" :options="companiesOptions" @update:model-value="setCompanies" />
+
         <q-list class="q-mt-md">
           <q-item v-close-popup :active="false" class="qas-app-user__menu-item" clickable :to="user.to">
             <q-item-section avatar>
@@ -67,6 +69,16 @@ export default {
       type: String
     },
 
+    companiesOptions: {
+      type: Array,
+      default: () => []
+    },
+
+    currentCompany: {
+      type: String,
+      default: ''
+    },
+
     menuProps: {
       default: () => ({}),
       type: Object
@@ -86,6 +98,13 @@ export default {
 
   emits: ['sign-out'],
 
+  data () {
+    return {
+      companiesModel: '',
+      loading: false
+    }
+  },
+
   computed: {
     hasNotifications () {
       return !!Object.keys(this.notifications).length
@@ -93,12 +112,43 @@ export default {
 
     userName () {
       return this.user.name || this.user.givenName
+    },
+
+    hasCompaniesSelect () {
+      return this.companiesOptions.length > 1
+    }
+  },
+
+  watch: {
+    currentCompany: {
+      handler (value) {
+        this.companiesModel = value
+      },
+
+      immediate: true
     }
   },
 
   methods: {
     signOut () {
       this.$emit('sign-out')
+    },
+
+    async setCompanies (value) {
+      this.loading = true
+
+      try {
+        await this.$axios.patch('users/me', { companies: value })
+
+        this.$qas.success('Vínculo alterado com sucesso.')
+
+        setTimeout(() => location.reload(), 1500)
+      } catch {
+        this.companiesModel = this.currentCompany
+        this.$qas.error('Falha ao alterar vínculo.')
+      } finally {
+        this.loading = false
+      }
     }
   }
 }

package/src/components/app-user/QasAppUser.yml

@@ -4,6 +4,26 @@ meta:
   desc: Exibe o avatar e o nome do usuário, ao clicar abre um menu com as opções.
 
 props:
+  avatar-size:
+    desc: Define o tamanho do avatar.
+    default: 36px
+    type: String
+
+  companies-options:
+    desc: Opções para o select de vínculo de empresas.
+    default: []
+    type: Array
+
+  current-company:
+    desc: Empresa atual vinculada
+    default: ''
+    type: String
+
+  menu-props:
+    desc: Repassa props pro QMenu.
+    default: {}
+    type: Object
+
   notifications:
     desc: Lista com as notificações do usuário.
     type: Object

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,8 +70,7 @@ export default {
       type: Boolean
     },
 
-    useRefresh: {
-      default: true,
+    useAutoRefetchOnDelete: {
       type: Boolean
     },
 
@@ -80,6 +79,16 @@ export default {
       type: Boolean
     },
 
+    usePagination: {
+      default: true,
+      type: Boolean
+    },
+
+    useRefresh: {
+      default: true,
+      type: Boolean
+    },
+
     useResultsAreaOnly: {
       type: Boolean
     }
@@ -100,12 +109,16 @@ export default {
   },
 
   computed: {
+    hasDeleteEventListener () {
+      return this.useAutoHandleOnDelete || this.useAutoRefetchOnDelete
+    },
+
     hasHeaderSlot () {
       return !!this.$slots.header
     },
 
     hasPages () {
-      return this.totalPages > 1
+      return this.totalPages > 1 && this.usePagination
     },
 
     hasResults () {
@@ -153,13 +166,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 +248,7 @@ export default {
       this.page = parseInt(this.$route.query.page || 1)
     },
 
-    onDeleteResult ({ detail: { entity } }) {
+    onAutoHandleDelete ({ detail: { entity } }) {
       const { page } = this.mx_context
 
       /*
@@ -269,6 +282,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
@@ -72,6 +76,11 @@ props:
     default: true
     type: Boolean
 
+  use-pagination:
+    desc: Controla se vai ter ou não paginação.
+    default: true
+    type: Boolean
+
   use-refresh:
     desc: Controla o [pull-to-refresh](https://quasar.dev/vue-components/pull-to-refresh#basic).
     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)
   }