@bildvitta/quasar-ui-asteroid 3.20.0-beta.2 → 3.20.0-beta.21

package/src/components/form-view/QasFormView.vue

@@ -12,7 +12,7 @@
       <slot v-if="useActions" name="actions">
         <qas-actions>
           <template v-if="useSubmitButton" #primary>
-            <qas-btn class="qas-form-view__btn" :data-cy="`form-view-submit-btn-${entity}`" :disable="disable" :label="submitButtonLabel" :loading="isSubmitting" type="submit" variant="primary" />
+            <qas-btn class="qas-form-view__btn" :data-cy="`form-view-submit-btn-${entity}`" :disable="disable" :label="submitButtonLabel" :loading="isSubmitting" :skeleton="mx_isFetching" type="submit" variant="primary" />
           </template>
 
           <template v-if="hasCancelButton" #secondary>
@@ -28,7 +28,7 @@
 
     <qas-dialog v-model="showDialog" v-bind="defaultDialogProps" />
 
-    <q-inner-loading :showing="mx_isFetching">
+    <q-inner-loading :showing="mx_isFetching && useLoading">
       <q-spinner color="grey" size="3em" />
     </q-inner-loading>
   </qas-container>
@@ -40,7 +40,8 @@ import QasBtn from '../btn/QasBtn.vue'
 import QasContainer from '../container/QasContainer.vue'
 import QasDialog from '../dialog/QasDialog.vue'
 
-import { NotifyError, NotifySuccess } from '../../plugins'
+import NotifyError from '../../plugins/notify-error/NotifyError.js'
+import NotifySuccess from '../../plugins/notify-success/NotifySuccess.js'
 import { useHistory, useOverlayNavigation } from '../../composables'
 import { viewMixin } from '../../mixins'
 
@@ -150,6 +151,11 @@ export default {
       default: true
     },
 
+    useLoading: {
+      type: Boolean,
+      default: true
+    },
+
     useSubmitButton: {
       default: true,
       type: Boolean
@@ -184,9 +190,9 @@ export default {
       ignoreRouterGuard: false,
 
       defaultDialogProps: {
-        card: {
-          description: 'Você está deixando a página e suas alterações serão perdidas. Tem certeza que deseja sair sem salvar?'
-        },
+        title: 'Alterações não salvas',
+        description: 'Você está deixando a página e suas alterações serão perdidas. Tem certeza que deseja sair sem salvar?',
+        size: 'md',
 
         ok: { label: 'Continuar editando' },
 
@@ -498,6 +504,9 @@ export default {
 
     getFormattedURL ({ payload, isSubmit = false } = {}) {
       const { url: customURL } = payload
+
+      if (customURL) return customURL
+
       const decamelizedEntity = decamelize(this.entity, { separator: '-' })
 
       // Utiliza a URL passada via prop, ou monta a URL baseada na entity e id.
@@ -507,9 +516,7 @@ export default {
        * Utiliza a customURL que pode vir via payload, no caso de um beforeSubmit por exemplo
        * Caso for uma ação de submit, retorna a customURL ou a baseURL (sem o mode new ou edit).
        */
-      if (isSubmit) {
-        return customURL || baseURL
-      }
+      if (isSubmit) return baseURL
 
       const mode = this.isCreateMode ? 'new' : 'edit'
 
@@ -517,7 +524,7 @@ export default {
        * Utiliza a customURL que pode vir via payload, no caso de um beforeFetch por exemplo,
        * ou então concatena a baseURL com o mode (new ou edit).
        */
-      return customURL || `${baseURL}/${mode}`
+      return `${baseURL}/${mode}`
     },
 
     handleFetchAction (payload) {
@@ -555,10 +562,12 @@ export default {
       // Formata a url com base em mode, entity, url via props, etc
       const url = this.getFormattedURL({ payload, isSubmit: true })
 
+      const { payload: dataPayload } = payload
+
       return this.$axios({
         method: methods[this.mode],
         url,
-        data: this.modelValue
+        data: dataPayload
       })
     },
 

package/src/components/form-view/QasFormView.yml

@@ -138,6 +138,12 @@ props:
     default: true
     type: Boolean
 
+  use-loading:
+    desc: Controla se o componente vai exibir um loading quando estiver fazendo fetch dos dados.
+    default: true
+    type: Boolean
+
+
   use-notify-success:
     desc: Controla se vai ter ou não notificação de sucesso ao finalizar o submit.
     default: true

package/src/components/gallery/composables/use-delete.js

@@ -28,9 +28,8 @@ export default function useDelete ({ props, destroyFn, emit }) {
 
   const defaultDialogProps = computed(() => {
     return {
-      card: {
-        description: 'Tem certeza que deseja excluir este item?'
-      },
+      title: 'Excluir',
+      description: 'Tem certeza que deseja excluir este item?',
 
       ok: {
         label: 'Excluir',

package/src/components/gallery/private/PvGalleryCarouselDialog.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="pv-gallery-carousel-dialog">
-    <qas-dialog v-model="model" :cancel="false" class="q-pa-xl" max-width="1100px" :ok="false" :persistent="false" use-full-max-width>
-      <template #header>
-        <div class="text-right">
-          <qas-btn v-close-popup color="grey-10" icon="sym_r_close" variant="tertiary" @click="close" />
-        </div>
-      </template>
-
+    <qas-dialog v-model="model" v-bind="dialogProps">
       <template #description>
         <q-carousel v-model="imageIndexModel" animated :arrows="!screen.isSmall" class="pv-gallery-carousel-dialog__carousel" control-text-color="primary" data-cy="gallery-carousel" :fullscreen="screen.isSmall" :height="carouselImageHeight" next-icon="sym_r_chevron_right" prev-icon="sym_r_chevron_left" swipeable :thumbnails="!isSingleImage">
           <q-carousel-slide v-for="(image, index) in props.images" :key="index" class="bg-no-repeat bg-size-contain" :data-cy="`gallery-carousel-slide-${index}`" :img-src="image.url" :name="index">
@@ -52,6 +46,13 @@ const screen = useScreen()
 
 const carouselImageHeight = 'calc((500/976) * 100vh)'
 
+const dialogProps = {
+  cancel: false,
+  ok: false,
+  size: 'xl',
+  title: 'Galeria de imagens'
+}
+
 const model = computed({
   get () {
     return props.modelValue

package/src/components/grid-item/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -0,0 +1 @@
+{"version":"4.0.18","results":[[":QasGridItem.test.js",{"duration":0,"failed":true}]]}

package/src/components/header/QasHeader.vue

@@ -2,13 +2,23 @@
   <div v-if="hasHeaderContent" :class="containerClasses">
     <div v-if="hasLabelSection" class="full-width items-center justify-between no-wrap row" :class="labelSectionClasses">
       <div class="items-center overflow-hidden q-col-gutter-sm row">
-        <slot name="label">
-          <qas-label v-if="hasLabel" v-bind="defaultLabelProps" />
+        <div v-if="props.skeleton">
+          <qas-skeleton type="text" use-contrast width="200px" />
+        </div>
+
+        <slot v-else name="label">
+          <div v-if="hasLabel" class="items-center q-gutter-x-sm row">
+            <qas-label v-if="hasLabel" v-bind="defaultLabelProps" />
+
+            <qas-tip v-if="hasTip" v-bind="defaultTipProps" />
+          </div>
         </slot>
 
         <div v-if="hasBadges" class="col-auto items-center q-col-gutter-sm row">
-          <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex">
-            <qas-badge v-bind="badge" />
+          <div v-for="(badge, badgeIndex) in normalizedBadges" :key="badgeIndex">
+            <qas-skeleton v-if="props.skeleton" type="QasBadge" />
+
+            <qas-badge v-else v-bind="badge" />
           </div>
         </div>
       </div>
@@ -21,14 +31,18 @@
     </div>
 
     <div v-if="hasDescriptionOrOnlyActionsSection" class="items-start no-wrap q-col-gutter-sm row" :class="descriptionSectionClasses">
-      <div v-if="hasDescriptionSection" class="text-body1 text-grey-8">
-        <slot name="description">
+      <div v-if="hasDescriptionSection" class="text-body1 text-grey-8" :class="descriptionClasses">
+        <qas-skeleton v-if="props.skeleton" max-width="400px" type="text" />
+
+        <slot v-else name="description">
           {{ props.description }}
         </slot>
       </div>
 
       <div v-if="!hasLabelSection" class="justify-end row text-right">
-        <slot name="actions">
+        <qas-skeleton v-if="props.skeleton" type="QasBtn" />
+
+        <slot v-else name="actions">
           <component :is="actionsComponent.is" v-if="hasActionsComponent" v-bind="actionsComponent.props" />
         </slot>
       </div>
@@ -42,11 +56,13 @@ import QasBadge from '../badge/QasBadge.vue'
 import QasBtn from '../btn/QasBtn.vue'
 import QasActionsMenu from '../actions-menu/QasActionsMenu.vue'
 import QasFilters from '../filters/QasFilters.vue'
+import QasSkeleton from '../skeleton/QasSkeleton.vue'
+import QasTip from '../tip/QasTip.vue'
 
 import { Spacing } from '../../enums/Spacing'
 import { gutterValidator } from '../../helpers/private/gutter-validator'
 
-import { computed, useSlots } from 'vue'
+import { computed, useSlots, provide } from 'vue'
 
 defineOptions({ name: 'QasHeader' })
 
@@ -57,7 +73,7 @@ const props = defineProps({
   },
 
   badges: {
-    type: Array,
+    type: [Array, Object],
     default: () => []
   },
 
@@ -81,17 +97,29 @@ const props = defineProps({
     default: () => ({})
   },
 
+  skeleton: {
+    type: Boolean
+  },
+
   spacing: {
     default: Spacing.Md,
     type: String,
     validator: gutterValidator
   },
 
+  tipProps: {
+    type: Object,
+    default: () => ({})
+  },
+
   useEllipsis: {
     type: Boolean
   }
 })
 
+// globals
+provide('isHeader', true)
+
 const slots = useSlots()
 
 // computed
@@ -110,6 +138,17 @@ const descriptionSectionClasses = computed(() => {
   }
 })
 
+/**
+ * É necessário adicionar full-width na descrição quando tem skeleton pois o skeleton
+ * precisa ter max-width, e para width funcionar corretamente, o pai precisa ser full-width.
+ * Se sempre deixar como full-width, quebra layout quando tem descrição com ação sem label.
+ */
+const descriptionClasses = computed(() => {
+  return {
+    'full-width': props.skeleton
+  }
+})
+
 const defaultLabelProps = computed(() => {
   return {
     class: {
@@ -121,11 +160,21 @@ const defaultLabelProps = computed(() => {
   }
 })
 
+const hasTip = computed(() => !!Object.keys(props.tipProps).length)
+
+const defaultTipProps = computed(() => {
+  return {
+    size: '20px',
+    ...props.tipProps
+  }
+})
+
 const actionsComponent = computed(() => {
   const component = {
     [hasDefaultButton.value]: {
       is: QasBtn,
       props: {
+        skeleton: props.skeleton,
         ...props.buttonProps,
         useLabelOnSmallScreen: false
       }
@@ -133,12 +182,16 @@ const actionsComponent = computed(() => {
 
     [hasDefaultActionsMenu.value]: {
       is: QasActionsMenu,
-      props: props.actionsMenuProps
+      props: {
+        skeleton: props.skeleton,
+        ...props.actionsMenuProps
+      }
     },
 
     [hasDefaultFilters.value]: {
       is: QasFilters,
       props: {
+        skeleton: props.skeleton,
         useSearch: false,
         useChip: false,
         useSpacing: false,
@@ -150,13 +203,15 @@ const actionsComponent = computed(() => {
   return component.true
 })
 
+const normalizedBadges = computed(() => Array.isArray(props.badges) ? props.badges : [props.badges])
+
 const hasActionsComponent = computed(() => {
   return hasDefaultButton.value || hasDefaultActionsMenu.value || hasDefaultFilters.value
 })
 
 const hasActionsSection = computed(() => !!slots.actions || hasActionsComponent.value)
 
-const hasBadges = computed(() => !!props.badges.length)
+const hasBadges = computed(() => !!normalizedBadges.value.length)
 const hasLabel = computed(() => !!Object.keys(props.labelProps).length)
 const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)
 const hasDefaultFilters = computed(() => !!Object.keys(props.filtersProps).length)

package/src/components/header/QasHeader.yml

@@ -12,7 +12,7 @@ props:
   badges:
     desc: Adiciona badges ao lado do titulo (QasLabel), caso não tenha titulo fica somente as bages acima da descrição.
     default: []
-    type: Array
+    type: [Array, Object]
 
   button-props:
     desc: Propriedades do QasBtn.
@@ -33,17 +33,32 @@ props:
     type: Object
     default: {}
 
+  skeleton:
+    desc: Exibe um esqueleto de carregamento no lugar do conteúdo.
+    default: false
+    type: Boolean
+
   spacing:
     desc: Espaçamento entre o componente e o conteúdo abaixo.
     default: xl
     type: String
     examples: [none, xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl']
 
+  tip-props:
+    desc: Propriedades repassadas para o componente do QasTip ficando ao lado do título (label).
+    type: Object
+    default: {}
+
   use-ellipsis:
     desc: Adiciona ellipsis ao título (label).
     type: Boolean
     default: false
 
+provide:
+  is-header:
+    desc: Identificador booleano que indica quando um componente está dentro do contexto de um QasHeader.
+    type: Boolean
+
 slots:
   actions:
     desc: slot para acessar seção da direita (ações).

package/src/components/infinite-scroll/QasInfiniteScroll.vue

@@ -25,7 +25,7 @@
 import QasEmptyResultText from '../empty-result-text/QasEmptyResultText.vue'
 
 import { ref, computed, inject, nextTick } from 'vue'
-import { NotifyError } from '../../plugins'
+import NotifyError from '../../plugins/notify-error/NotifyError.js'
 
 defineOptions({ name: 'QasInfiniteScroll' })
 

package/src/components/label/QasLabel.vue

@@ -1,6 +1,8 @@
 <template>
   <component :is="props.typography" class="qas-label" :class="classes">
-    <slot :label-with-suffix="formattedLabel">{{ formattedLabel }}</slot>
+    <slot :label-with-suffix="formattedLabel">
+      {{ formattedLabel }}
+    </slot>
   </component>
 </template>
 

package/src/components/layout/QasLayout.vue

@@ -11,7 +11,7 @@
     <slot>
       <q-page-container>
         <q-page>
-          <router-view />
+          <router-view :route="overlayBackgroundRoute" />
         </q-page>
       </q-page-container>
     </slot>
@@ -34,6 +34,7 @@ import useScreen from '../../composables/use-screen'
 import useNotifications from '../../composables/use-notifications'
 
 import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
 defineOptions({ name: 'QasLayout' })
 
@@ -68,10 +69,24 @@ const screen = useScreen()
 
 const { isNotificationsEnabled, setUnreadNotificationsCount } = useNotifications()
 
+const route = useRoute()
+
 const menuDrawer = ref(false)
 const notificationsDrawer = ref(false)
 
 // computed
+
+/**
+ * Sempre fornece uma rota para o <router-view>. Quando o overlay está ativo,
+ * usa a rota resolvida do background; sem overlay, usa a rota atual.
+ * Isso evita alternância entre `undefined` e objeto de rota, reduzindo remounts.
+ */
+const overlayBackgroundRoute = computed(() => {
+  return route.query?.overlay === 'true'
+    ? route.meta.overlayBackgroundResolvedRoute
+    : route
+})
+
 const defaultAppMenuProps = computed(() => {
   return {
     ...props.appBarProps,

package/src/components/layout/private/PvLayoutNotificationsDrawer.vue

@@ -91,7 +91,8 @@ const model = computed({
 const drawerProps = computed(() => {
   return {
     loading: isMarkingNotificationsAsRead.value,
-    title: 'Notificações'
+    title: 'Notificações',
+    size: 'md'
   }
 })
 

package/src/components/layout/private/PvLayoutOverlayDrawer.vue

@@ -17,7 +17,9 @@
     </template>
 
     <template #default>
-      <router-view name="overlay" />
+      <div class="pv-layout-overlay-drawer__content">
+        <router-view name="overlay" />
+      </div>
     </template>
   </qas-drawer>
 </template>
@@ -60,8 +62,8 @@ const isForwardButtonDisabled = computed(() => !hasNextRoute.value || isDisabled
 const drawerProps = computed(() => {
   return {
     position: 'right',
-    maxWidth: '90%',
     dialogProps: {
+      class: 'pv-layout-overlay-drawer',
       onHide: closeOverlay,
       noRouteDismiss: true,
       persistent: isDisabled.value