@bildvitta/quasar-ui-asteroid 3.20.0-beta.14 → 3.20.0-beta.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.20.0-beta.14",
+  "version": "3.20.0-beta.16",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "./src/asteroid.js",
@@ -45,7 +45,7 @@
     "@bildvitta/composables": "^1.0.0-beta.7",
     "@bildvitta/store-adapter": "^1.0.0",
     "autonumeric": "4.10.9",
-    "axios": "^1.4.0",
+    "axios": "1.4.0",
     "date-fns": "^2.30.0",
     "pdfjs-dist": "4.3.136",
     "debug": "^4.3.4",

package/src/components/board-generator/QasBoardGenerator.vue

@@ -362,7 +362,7 @@ const columnContainerElements = computed(() => {
 const normalizedHeaders = computed(() => {
   // retorna dados fakes para criar colunas de skeleton, caso a prop skeleton seja true.
   if (props.skeleton) {
-    return Array.from({ length: 4 }).map((_, index) => {
+    return Array.from({ length: 8 }).map((_, index) => {
       return {
         [props.columnIdKey]: `${props.columnIdKey}-${index}`
       }

package/src/components/card/QasCard.vue

@@ -67,6 +67,7 @@
 </template>
 
 <script setup>
+import QasRouterLink from '../router-link/QasRouterLink.vue'
 import QasTooltip from '../tooltip/QasTooltip.vue'
 import QasActionsMenu from '../actions-menu/QasActionsMenu.vue'
 import QasCheckbox from '../checkbox/QasCheckbox.vue'
@@ -128,6 +129,10 @@ const props = defineProps({
     default: true
   },
 
+  useOverlayRoute: {
+    type: Boolean
+  },
+
   useSelection: {
     type: Boolean
   }
@@ -172,11 +177,13 @@ const titleComponent = computed(() => {
   const hasRoute = !!Object.keys(props.route).length && !props.skeleton
 
   return {
-    is: hasRoute ? 'router-link' : 'h5',
+    is: hasRoute ? QasRouterLink : 'h5',
+
     props: {
       ...(hasRoute && {
-        to: props.route,
-        class: 'qas-card__router'
+        route: props.route,
+        useOverlayRoute: props.useOverlayRoute,
+        title: props.title
       })
     }
   }
@@ -229,12 +236,6 @@ const formattedActionsMenuProps = computed(() => {
     background-color: transparent;
   }
 
-  &__router {
-    &:hover {
-      color: $primary;
-    }
-  }
-
   &__expansion-header {
     transition: color var(--qas-generic-transition);
 

package/src/components/card/QasCard.yml

@@ -29,6 +29,11 @@ props:
     default: {}
     type: Object
 
+  use-overlay-route:
+    desc: Quando verdadeiro, o clique no título abre a rota no overlay em vez de navegar normalmente. Ao abrir em uma nova guia, o comportamento padrão do `router-link` é mantido.
+    default: false
+    type: Boolean
+
   status-color:
     desc: Insere uma borda na esquerda para indicar o status do card.
     default: ''

package/src/components/copy/QasCopy.vue

@@ -7,7 +7,7 @@
       </slot>
     </span>
 
-    <qas-btn class="q-ml-xs" color="primary" :icon="props.icon" :loading="isLoading" variant="tertiary" @click.stop.prevent="copy">
+    <qas-btn class="q-ml-xs" color="primary" :icon="props.icon" :loading="isLoading" variant="tertiary" v-bind="props.buttonProps" @click.stop.prevent="copy">
       <qas-tooltip text="Copiar" />
     </qas-btn>
   </span>
@@ -41,6 +41,11 @@ const props = defineProps({
   rawText: {
     default: '',
     type: String
+  },
+
+  buttonProps: {
+    type: Object,
+    default: () => ({})
   }
 })
 

package/src/components/copy/QasCopy.yml

@@ -21,3 +21,8 @@ props:
   raw-text:
     desc: Caso o texto a ser copiado precise ser diferente do texto a ser exibido, utilize esta propriedade.
     type: String
+
+  button-props:
+    desc: Propriedades adicionais que serão repassadas ao botão.
+    type: Object
+    default: () => ({})

package/src/components/router-link/QasRouterLink.vue

@@ -0,0 +1,72 @@
+<!--
+  Tratamento feito para ter o comportamento de ao abrir em uma nova guia, direto na página, abre sem overlay.
+  Caso contrário, ao clicar normalmente, abrirá no overlay.
+-->
+<template>
+  <router-link
+    class="qas-router-link text-no-decoration"
+    v-bind="routerLinkProps"
+  >
+    <slot>
+      {{ props.label }}
+    </slot>
+  </router-link>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useOverlayNavigation } from 'asteroid'
+
+defineOptions({ name: 'QasRouterLink' })
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+
+  route: {
+    type: Object,
+    required: true
+  },
+
+  useOverlayRoute: {
+    type: Boolean
+  }
+})
+
+// composables
+const router = useRouter()
+const { getOverlayRoute } = useOverlayNavigation()
+
+// computeds
+const routerLinkProps = computed(() => {
+  return {
+    to: props.route,
+
+    ...(props.useOverlayRoute && {
+      onClick: event => {
+        /**
+         * @click.prevent pra evitar com que o router-link já trate o clique e tente navegar para a rota
+         * normalmente, o que não é o desejado quando queremos abrir um overlay
+         */
+        event.preventDefault()
+
+        router.push(getOverlayRoute(props.route))
+      }
+    })
+  }
+})
+</script>
+
+<style lang="scss">
+.qas-router-link {
+  transition: color var(--qas-generic-transition);
+  color: inherit;
+
+  &:hover {
+    color: $primary;
+  }
+}
+</style>

package/src/components/router-link/QasRouterLink.yml

@@ -0,0 +1,24 @@
+type: component
+
+meta:
+  desc: Componente de link baseado no router-link. Ao passar a prop use-overlay-route, o clique normal abre a rota no overlay. Ao abrir em uma nova guia, navega diretamente para a página, sem overlay.
+
+props:
+  label:
+    desc: Texto exibido como conteúdo padrão do link, utilizado quando o slot default não é fornecido.
+    default: ''
+    type: String
+
+  route:
+    desc: Rota de destino do link, repassada diretamente ao `router-link`.
+    required: true
+    type: Object
+
+  use-overlay-route:
+    desc: Quando verdadeiro, o clique no link abre a rota no overlay em vez de navegar normalmente. Ao abrir em uma nova guia, o comportamento padrão do `router-link` é mantido.
+    default: false
+    type: Boolean
+
+slots:
+  default:
+    desc: Conteúdo do link. Quando não fornecido, exibe o valor da prop `label`.

package/src/components/search-box/QasSearchBox.vue

@@ -138,7 +138,7 @@ export default {
     },
 
     hasNoOptionsOnFirstFetch () {
-      return this.mx_fetchCount === 1 && !this.mx_hasFilteredOptions
+      return this.mx_fetchCount === 1 && !this.mx_hasFilteredOptions && !this.mx_hasNextPage
     },
 
     containerHeight () {

package/src/components/select-list-dialog/QasSelectListDialog.vue

@@ -9,22 +9,24 @@
       v-if="canShowContainerList"
       class="q-mt-md relative-position"
     >
-      <span class="text-grey-10 text-subtitle1">
-        {{ props.listLabel }}
-      </span>
-
       <slot name="selected-content">
-        <q-virtual-scroll #default="{ item, index }" class="app-select-list-dialog__list q-mt-md" :items="selectedOptions" separator>
-          <q-item class="q-px-none text-body1 text-grey-8">
-            <q-item-section>
-              {{ item.label }}
-            </q-item-section>
-
-            <q-item-section avatar>
-              <qas-btn v-bind="getRemoveButtonProps({ index, option: item })" />
-            </q-item-section>
-          </q-item>
-        </q-virtual-scroll>
+        <qas-search-box v-model:results="searchedResults" v-bind="searchSelectedItemsBoxProps" class="q-mt-md">
+          <span class="text-grey-10 text-subtitle1">
+            {{ props.listLabel }}
+          </span>
+
+          <q-virtual-scroll #default="{ item, index }" class="app-select-list-dialog__list" :items="searchedResults" separator>
+            <q-item class="q-px-none text-body1 text-grey-8">
+              <q-item-section>
+                {{ item.label }}
+              </q-item-section>
+
+              <q-item-section avatar>
+                <qas-btn v-bind="getRemoveButtonProps({ index, option: item })" />
+              </q-item-section>
+            </q-item>
+          </q-virtual-scroll>
+        </qas-search-box>
       </slot>
 
       <q-inner-loading :showing="props.loading">
@@ -132,6 +134,11 @@ const props = defineProps({
 
   useLazyLoading: {
     type: Boolean
+  },
+
+  searchPlaceholder: {
+    default: 'Pesquisar...',
+    type: String
   }
 })
 
@@ -174,6 +181,7 @@ defineExpose({ add, removeAll, remove, toggleDialog })
 
 // refs
 const model = ref([...props.modelValue])
+const searchedResults = ref([])
 
 // computeds
 const hasError = computed(() => Array.isArray(props.error) ? !!props.error.length : !!props.error)
@@ -210,6 +218,15 @@ const hasLazyLoading = computed(() => {
   return props.useLazyLoading || !!props.selectListProps?.searchBoxProps?.useLazyLoading
 })
 
+const searchSelectedItemsBoxProps = computed(() => {
+  return {
+    fuseOptions: { keys: ['label'] },
+    list: selectedOptions.value,
+    useEmptyResults: false,
+    placeholder: props.searchPlaceholder
+  }
+})
+
 watch(() => props.modelValue, newValue => {
   model.value = [...newValue]
 })

package/src/components/select-list-dialog/QasSelectListDialog.yml

@@ -55,6 +55,11 @@ props:
     type: Array
     model: true
 
+  search-placeholder:
+    desc: Placeholder do campo de busca.
+    default: Pesquisar...
+    type: String
+
   select-list-model:
     desc: Model dos itens selecionados dentro do dialog.
     type: Array
@@ -64,8 +69,8 @@ props:
 
   select-list-props:
     desc: Propriedades repassadas para o componente QasSelectList.
-    default: []
-    type: Array
+    default: {}
+    type: Object
 
   use-lazy-loading:
     desc: O componente precisa saber se o lazy-loading esta habilitado para este componente, e caso esteja usando customização pelos slots do "dialog-description", é necessário informar por esta prop.

package/src/mixins/search-filter.js

@@ -86,6 +86,12 @@ export default {
       return !!this.mx_filteredOptions.length
     },
 
+    mx_hasNextPage () {
+      const { lastPage, page, hasCount, hasNextPage } = this.mx_pagination
+
+      return hasCount ? !!(lastPage && page <= lastPage) : hasNextPage
+    },
+
     mx_hasOptionsToExclude () {
       return !!this.optionsToExclude.length
     }