@bildvitta/quasar-ui-asteroid 3.20.0-beta.18-alpha.0 → 3.20.0-beta.19

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.20.0-beta.18-alpha.0",
+  "version": "3.20.0-beta.19",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "./src/asteroid.js",

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

@@ -1280,10 +1280,7 @@ async function updatePosition ({ newHeaderKey, oldHeaderKey, itemId, event, opti
     : `${props.updatePositionUrl}/${itemId}/update-position`
 
   const { data, error } = await promiseHandler(
-    axios.patch(url, params, {
-      adapter: 'fetch',
-      fetchOptions: { priority: 'low' }
-    }),
+    axios.patch(url, params),
     {
       errorMessage: 'Ocorreu um erro ao atualizar a posição de seu item.',
       useLoading: false,

package/src/components/dialog/QasDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <q-dialog ref="dialogRef" v-model="model" class="qas-dialog" :class="classes" data-cy="dialog" v-bind="dialogProps">
-    <div class="bg-white full-width q-pa-md qas-dialog__container" :style="containerStyles">
+    <div class="bg-white full-width q-pa-md qas-dialog__container">
       <header v-if="hasHeaderSlot" class="q-mb-md">
         <slot name="header" />
       </header>
@@ -38,7 +38,7 @@ import QasHeader from '../header/QasHeader.vue'
 import { computed, ref, useAttrs, provide, useSlots, inject } from 'vue'
 import { useDialogPluginComponent, QForm } from 'quasar'
 
-defineOptions({ name: 'QasDialog' })
+defineOptions({ name: 'QasDialog', inheritAttrs: false })
 
 const props = defineProps({
   badges: {
@@ -128,11 +128,11 @@ const emit = defineEmits([
 const model = defineModel({ type: Boolean })
 
 // globals
+const drawerProps = inject('drawerProps', null)
+
 provide('isDialog', true)
 provide('btnPropsDefaults', { size: 'md' }) // define o tamanho padrão para os botões dentro do dialog
-
-// necessário para pegar as props default do dialog quando usado no QasDrawer
-const defaultProps = inject('dialogDefaultProps', null)
+provide('drawerProps', null) // quebra a cadeia para dialogs filhos usarem hasActions normalmente
 
 // refs
 const form = ref(null)
@@ -146,11 +146,6 @@ const { defaultOk, hasOk, onOk } = useOk()
 const { descriptionComponent, mainComponent } = useDynamicComponents()
 
 // computeds
-/**
- * Necessária logica via provide para controle interno no componente QasDrawer.
- */
-const hasDefaultMaxWidth = computed(() => !!defaultProps?.value.maxWidth)
-
 /**
  * Classes criadas para serem utilizadas quando usado com a prop "position", pois
  * o comportamento do dialog muda, e não é possível usar em conjunto com a prop
@@ -168,32 +163,27 @@ const classes = computed(() => {
   }
 
   return [
+    sizes[props.size],
+
     {
-      [sizes[props.size]]: !hasDefaultMaxWidth.value,
       'qas-dialog--right': isRightPosition,
       'qas-dialog--left': isLeftPosition
     }
   ]
 })
 
-/**
- * TODO-ISSUE: Manter dessa forma até issue #1431 ser resolvida.
- */
-const containerStyles = computed(() => {
-  if (!hasDefaultMaxWidth.value) return
-
-  return {
-    maxWidth: defaultProps?.value?.maxWidth
-  }
-})
-
 const dialogProps = computed(() => {
   const { title, ...attributes } = attrs
 
   return {
     ...(!props.usePlugin && { modelValue: props.modelValue }),
     ...attributes,
-    persistent: defaultProps?.value?.persistent ?? hasActions.value,
+
+    /**
+     * valida se a prop "persistent" foi passada para o drawer, caso tenha passado,
+     * ele respeita a prop, caso contrário é validado se tem ações para ser persistente ou não.
+     */
+    persistent: drawerProps?.value ? drawerProps?.value.persistent : hasActions.value,
 
     onHide: onDialogHide
   }
@@ -263,7 +253,7 @@ function useOk () {
     }
   })
 
-  const hasOk = computed(() => typeof props.ok === 'boolean' ? props.ok : !!Object.keys(props.ok))
+  const hasOk = computed(() => typeof props.ok === 'boolean' ? props.ok : !!Object.keys(props.ok)?.length)
 
   // functions
   function onOk () {
@@ -296,7 +286,7 @@ function useCancel () {
     }
   })
 
-  const hasCancel = computed(() => typeof props.cancel === 'boolean' ? props.cancel : !!Object.keys(props.cancel))
+  const hasCancel = computed(() => typeof props.cancel === 'boolean' ? props.cancel : !!Object.keys(props.cancel)?.length)
 
   // functions
   function onCancel () {

package/src/components/drawer/QasDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <qas-dialog v-model="model" class="qas-drawer" v-bind="attributes">
+  <qas-dialog v-model="model" class="qas-drawer" :class="containerDialogClasses" v-bind="attributes">
     <template #header>
       <slot name="header">
         <div class="items-center justify-between row">
@@ -17,12 +17,12 @@
     </template>
 
     <template #description>
-      <div>
-        <div class="relative-position" data-cy="drawer-default">
+      <div class="relative-position">
+        <div data-cy="drawer-default">
           <slot />
         </div>
 
-        <div v-if="props.loading" class="qas-drawer__loading" :style="loadingStyle">
+        <div v-if="props.loading" class="qas-drawer__loading">
           <div class="full-height relative-position">
             <q-inner-loading :showing="props.loading">
               <q-spinner color="grey" size="2em" />
@@ -40,7 +40,7 @@ import QasBtn from '../btn/QasBtn.vue'
 
 import useScreen from '../../composables/use-screen.js'
 
-import { computed, provide } from 'vue'
+import { computed, inject, provide } from 'vue'
 
 defineOptions({
   name: 'QasDrawer',
@@ -53,11 +53,6 @@ const props = defineProps({
     default: () => ({})
   },
 
-  maxWidth: {
-    type: String,
-    default: '60%'
-  },
-
   persistent: {
     type: Boolean
   },
@@ -75,9 +70,20 @@ const props = defineProps({
 
   loading: {
     type: Boolean
+  },
+
+  size: {
+    type: String,
+    default: 'sm',
+    validator: value => !value || ['sm', 'md', 'lg', 'xl'].includes(value)
   }
 })
 
+// globals
+const isOverlay = inject('isOverlay', false)
+
+provide('drawerProps', computed(() => ({ persistent: props.persistent })))
+
 // emits
 const model = defineModel({ type: Boolean })
 
@@ -85,12 +91,18 @@ const model = defineModel({ type: Boolean })
 const screen = useScreen()
 
 // computed
-const normalizedMaxWidth = computed(() => screen.isSmall ? '95%' : props.maxWidth)
-
-const loadingStyle = computed(() => {
-  return {
-    right: `calc(100% - ${normalizedMaxWidth.value})`
-  }
+const containerDialogClasses = computed(() => {
+  // tratamento para mobile, onde sempre pegará 95% da tela.
+  if (screen.isSmall) return 'qas-drawer--mobile'
+
+  /**
+   * no caso de ter passado a prop lg ou xl, mas o tamanho da tela ser médio,
+   * o drawer irá se comportar como md, pegando 512px de largura, caso contrário, teria o problema
+   * do drawer acabar pegando 100% da página, tendo o comportamento errado.
+   */
+  if (screen.isMedium && (props.size === 'lg' || props.size === 'xl')) return 'qas-drawer--md'
+
+  return isOverlay ? 'qas-drawer--overlay' : `qas-drawer--${props.size}`
 })
 
 const attributes = computed(() => {
@@ -101,20 +113,10 @@ const attributes = computed(() => {
     cancel: false,
     maximized: true,
     ok: false,
-    position: props.position
-  }
-})
-
-// globals
-/**
- * Manter dessa forma até issue #1431 ser resolvida.
- */
-provide('dialogDefaultProps', computed(() => {
-  return {
-    maxWidth: normalizedMaxWidth.value,
+    position: props.position,
     persistent: props.persistent
   }
-}))
+})
 
 // functions
 function close () {
@@ -129,6 +131,43 @@ function close () {
     left: 0;
     position: absolute;
     top: 0;
+    width: 100%;
+  }
+
+  &--mobile {
+    .qas-dialog__container {
+      max-width: 95% !important;
+    }
+  }
+
+  &--overlay {
+    .qas-dialog__container {
+      max-width: 90% !important;
+    }
+  }
+
+  &--sm {
+    .qas-dialog__container {
+      max-width: 368px !important;
+    }
+  }
+
+  &--md {
+    .qas-dialog__container {
+      max-width: 512px !important;
+    }
+  }
+
+  &--lg {
+    .qas-dialog__container {
+      max-width: 656px !important;
+    }
+  }
+
+  &--xl {
+    .qas-dialog__container {
+      max-width: 960px !important;
+    }
   }
 }
 </style>

package/src/components/drawer/QasDrawer.yml

@@ -34,6 +34,11 @@ props:
     desc: Titulo do drawer.
     type: String
 
+  size:
+    desc: Tamanho do drawer.
+    default: sm
+    type: String
+
 slots:
   header:
     desc: Slot para conteúdo do cabeçalho.

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

@@ -62,7 +62,6 @@ const isForwardButtonDisabled = computed(() => !hasNextRoute.value || isDisabled
 const drawerProps = computed(() => {
   return {
     position: 'right',
-    maxWidth: '90%',
     dialogProps: {
       class: 'pv-layout-overlay-drawer',
       onHide: closeOverlay,