@bildvitta/quasar-ui-asteroid 3.20.0-beta.18 → 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",
+  "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

@@ -388,8 +388,6 @@ const hasColumnsLength = computed(() => !!Object.keys(columnsResultsModel.value)
 
 const containerStyle = computed(() => `width: ${props.columnWidth};`)
 
-const hasConfirmDialogProps = computed(() => !!Object.keys(props.confirmDialogProps).length)
-
 const defaultConfirmDialogProps = computed(() => {
   const defaultProps = {
     ok: {
@@ -1124,7 +1122,7 @@ function onDropCard (event) {
     return
   }
 
-  hasConfirmDialogProps.value
+  props.useConfirmDialog
     ? openConfirmDialog()
     : confirmDrop(event)
 }
@@ -1143,7 +1141,7 @@ function closeConfirmDialog () {
 function cancelDrop (event) {
   revertDomDrag(event)
 
-  if (hasConfirmDialogProps.value) closeConfirmDialog()
+  if (props.useConfirmDialog) closeConfirmDialog()
 
   stopDragging()
 }

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

@@ -115,6 +115,10 @@ props:
     default: "{ animation: 500, swapThreshold: 1, delay: 50, delayOnTouchOnly: true, emptyInsertThreshold: 0 }"
     debugger: true
 
+  use-confirm-dialog:
+    desc: Controla se o dialog de confirmação para o drag and drop será utilizado. Caso seja "true", o dialog é aberto utilizando as props passadas em "confirm-dialog-props" e as ações de confirmar e cancelar são feitas por padrão no componente. Caso seja "false", o drag and drop é realizado sem confirmação.
+    type: Boolean
+
   use-drag-and-drop-x:
     desc: Controla se irá ter drag and drop no eixo X (entre colunas).
     type: Boolean

package/src/components/dialog/QasDialog.vue

@@ -1,37 +1,29 @@
 <template>
-  <q-dialog ref="dialogRef" class="qas-dialog" :class="classes" data-cy="dialog" v-bind="dialogProps" :persistent="props.persistent" @update:model-value="updateModelValue">
-    <div class="bg-white q-pa-md" :style="style">
-      <header v-if="hasHeader" class="q-mb-md">
-        <slot name="header">
-          <div class="items-center justify-between row">
-            <qas-label data-cy="dialog-title" :label="props.card.title" margin="none">
-              <slot name="title" />
-            </qas-label>
-
-            <qas-btn v-if="isInfoDialog" v-close-popup color="grey-10" data-cy="dialog-close-btn" icon="sym_r_close" variant="tertiary" />
-          </div>
-        </slot>
+  <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">
+      <header v-if="hasHeaderSlot" class="q-mb-md">
+        <slot name="header" />
       </header>
 
+      <qas-header v-else-if="props.title" v-bind="headerProps">
+        <template v-if="hasTitleSlot" #label>
+          <qas-label>
+            <slot name="title" />
+          </qas-label>
+        </template>
+      </qas-header>
+
       <section class="relative-position text-body1 text-grey-8">
         <component :is="mainComponent.is" ref="form" v-bind="mainComponent.props">
           <slot name="description">
-            <component :is="descriptionComponent" data-cy="dialog-description">{{ props.card.description }}</component>
+            <div v-if="props.useHtmlDescription" data-cy="dialog-description" v-html="props.description" />
+
+            <component :is="descriptionComponent" v-else data-cy="dialog-description">
+              {{ props.description }}
+            </component>
           </slot>
 
-          <div v-if="!isInfoDialog">
-            <slot name="actions">
-              <qas-actions v-bind="defaultActionsProps">
-                <template v-if="hasOk" #primary>
-                  <qas-btn v-close-popup="!props.useForm" class="full-width" data-cy="dialog-ok-btn" size="lg" variant="primary" v-bind="defaultOk" />
-                </template>
-
-                <template v-if="hasCancel" #secondary>
-                  <qas-btn v-close-popup class="full-width" data-cy="dialog-cancel-btn" size="lg" v-bind="defaultCancel" variant="secondary" />
-                </template>
-              </qas-actions>
-            </slot>
-          </div>
+          <qas-actions v-if="hasActions" class="qas-dialog__actions" v-bind="defaultActionsProps" />
         </component>
       </section>
     </div>
@@ -39,24 +31,19 @@
 </template>
 
 <script setup>
-import QasActions from '../actions/QasActions.vue'
-import QasBtn from '../btn/QasBtn.vue'
 import QasLabel from '../label/QasLabel.vue'
+import QasActions from '../actions/QasActions.vue'
+import QasHeader from '../header/QasHeader.vue'
 
-import useCancel from './composables/use-cancel'
-import useDynamicComponents from './composables/use-dynamic-components'
-import useOk from './composables/use-ok'
-import { useScreen } from '../../composables'
-
-import { computed, ref, useAttrs, useSlots, provide } from 'vue'
-import { useDialogPluginComponent } from 'quasar'
+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({
-  actionsProps: {
-    default: () => ({}),
-    type: Object
+  badges: {
+    default: () => [],
+    type: [Array, Object]
   },
 
   cancel: {
@@ -64,19 +51,13 @@ const props = defineProps({
     type: [Object, Boolean]
   },
 
-  card: {
-    default: () => ({}),
-    type: Object
-  },
-
-  maxWidth: {
-    default: '',
-    type: String
+  description: {
+    type: [String, Object],
+    default: ''
   },
 
-  minWidth: {
-    default: '',
-    type: String
+  disableCloseButton: {
+    type: Boolean
   },
 
   ok: {
@@ -84,16 +65,23 @@ const props = defineProps({
     type: [Object, Boolean]
   },
 
-  persistent: {
-    default: true,
-    type: Boolean
+  size: {
+    type: String,
+    default: 'sm',
+    validator: value => ['sm', 'md', 'lg', 'xl'].includes(value)
   },
 
-  useForm: {
-    type: Boolean
+  title: {
+    type: String,
+    required: true
   },
 
-  modelValue: {
+  tertiary: {
+    default: () => ({}),
+    type: Object
+  },
+
+  useForm: {
     type: Boolean
   },
 
@@ -101,7 +89,22 @@ const props = defineProps({
     type: Boolean
   },
 
-  useFullMaxWidth: {
+  useAutoCloseOnCancel: {
+    type: Boolean,
+    default: true
+  },
+
+  useAutoCloseOnOk: {
+    type: Boolean,
+    default: true
+  },
+
+  useCloseButton: {
+    type: Boolean,
+    default: true
+  },
+
+  useHtmlDescription: {
     type: Boolean
   },
 
@@ -110,10 +113,8 @@ const props = defineProps({
   }
 })
 
+// emtis
 const emit = defineEmits([
-  // model
-  'update:modelValue',
-
   // actions
   'cancel',
   'ok',
@@ -123,24 +124,28 @@ const emit = defineEmits([
   ...useDialogPluginComponent.emits
 ])
 
-provide('isDialog', true)
+// models
+const model = defineModel({ type: Boolean })
 
-const attrs = useAttrs()
-const screen = useScreen()
-const slots = useSlots()
+// globals
+const drawerProps = inject('drawerProps', null)
 
-// usado para o plugin
-const { dialogRef, onDialogHide } = useDialogPluginComponent()
+provide('isDialog', true)
+provide('btnPropsDefaults', { size: 'md' }) // define o tamanho padrão para os botões dentro do dialog
+provide('drawerProps', null) // quebra a cadeia para dialogs filhos usarem hasActions normalmente
 
-// QForm template
+// refs
 const form = ref(null)
 
-const composablesParams = { emit, form, props, screen, slots }
-
-const { defaultCancel, hasCancel } = useCancel(composablesParams)
-const { defaultOk, hasOk, onOk } = useOk(composablesParams)
-const { descriptionComponent, mainComponent } = useDynamicComponents({ ...composablesParams, onOk, hasOk })
+// composables
+const slots = useSlots()
+const attrs = useAttrs()
+const { dialogRef, onDialogHide } = useDialogPluginComponent() // usado para o plugin
+const { defaultCancel, hasCancel } = useCancel()
+const { defaultOk, hasOk, onOk } = useOk()
+const { descriptionComponent, mainComponent } = useDynamicComponents()
 
+// computeds
 /**
  * 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
@@ -150,60 +155,236 @@ const classes = computed(() => {
   const isRightPosition = attrs.position === 'right'
   const isLeftPosition = attrs.position === 'left'
 
-  return {
-    'qas-dialog--right': isRightPosition,
-    'qas-dialog--left': isLeftPosition
+  const sizes = {
+    sm: 'qas-dialog--sm', // 450px
+    md: 'qas-dialog--md', // 550px
+    lg: 'qas-dialog--lg', // 800px
+    xl: 'qas-dialog--xl' // 1100px
   }
+
+  return [
+    sizes[props.size],
+
+    {
+      'qas-dialog--right': isRightPosition,
+      'qas-dialog--left': isLeftPosition
+    }
+  ]
 })
 
 const dialogProps = computed(() => {
+  const { title, ...attributes } = attrs
+
   return {
     ...(!props.usePlugin && { modelValue: props.modelValue }),
-    ...attrs,
+    ...attributes,
+
+    /**
+     * 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
   }
 })
 
-const style = computed(() => {
+const hasActions = computed(() => hasOk.value || hasCancel.value || !!Object.keys(props.tertiary).length)
+
+const headerProps = computed(() => {
   return {
-    ...(props.useFullMaxWidth && { width: '100%' }),
+    labelProps: {
+      label: props.title
+    },
+
+    badges: props.badges,
+
+    buttonProps: {
+      ...(props.useCloseButton && {
+        color: 'grey-10',
+        disable: props.disableCloseButton,
+        icon: 'sym_r_close',
+        variant: 'tertiary',
+        'data-cy': 'dialog-close-btn',
+        onClick: () => updateModelValue(false)
+      })
+    }
+  }
+})
 
-    maxWidth: props.maxWidth || '470px',
-    minWidth: props.minWidth || (screen.isSmall ? '' : '366px')
+const defaultActionsProps = computed(() => {
+  return {
+    ...(hasOk.value && { primaryButtonProps: defaultOk.value }),
+    ...(hasCancel.value && { secondaryButtonProps: defaultCancel.value }),
+
+    tertiaryButtonProps: {
+      ...props.tertiary,
+      'data-cy': 'dialog-tertiary-btn'
+    },
+
+    spacingTop: 'lg',
+    gutter: 'md'
   }
 })
 
-const hasHeader = computed(() => !!slots.header || props.card.title)
-const isInfoDialog = computed(() => !hasOk.value && !hasCancel.value)
+const hasHeaderSlot = computed(() => !!slots.header)
+const hasTitleSlot = computed(() => !!slots.title)
 
-const defaultActionsProps = computed(() => {
-  const { useFullWidth, useEqualWidth } = props.actionsProps
+// functions
+function updateModelValue (value) {
+  model.value = value
+}
 
-  if (useFullWidth || useEqualWidth) return props.actionsProps
+// composable definitions
+function useOk () {
+  // computeds
+  const defaultOk = computed(() => {
+    const { onClick, ...attrs } = props.ok
+
+    return {
+      label: 'Ok',
+      type: (props.ok?.type || props.useForm) ? 'submit' : 'button',
+      'data-cy': 'dialog-ok-btn',
+
+      ...attrs,
+
+      // adiciona somente se não estiver usando useForm pois o controle ficará no submit.
+      ...(!props.useForm && { onClick: onOk })
+    }
+  })
+
+  const hasOk = computed(() => typeof props.ok === 'boolean' ? props.ok : !!Object.keys(props.ok)?.length)
+
+  // functions
+  function onOk () {
+    if (!props.useForm && props.useAutoCloseOnOk) {
+      updateModelValue(false)
+    }
 
-  const hasAllActions = hasOk.value && hasCancel.value
-  const hasSingleAction = (hasOk.value && !hasCancel.value) || (!hasOk.value && hasCancel.value)
+    props.ok.onClick?.()
+
+    emit('ok')
+  }
 
   return {
-    useFullWidth: hasSingleAction,
-    useEqualWidth: hasAllActions,
+    defaultOk,
+    hasOk,
+    onOk
+  }
+}
+
+function useCancel () {
+  // computeds
+  const defaultCancel = computed(() => {
+    return {
+      label: 'Cancelar',
+      'data-cy': 'dialog-cancel-btn',
+
+      ...props.cancel,
+
+      onClick: onCancel
+    }
+  })
 
-    ...props.actionsProps
+  const hasCancel = computed(() => typeof props.cancel === 'boolean' ? props.cancel : !!Object.keys(props.cancel)?.length)
+
+  // functions
+  function onCancel () {
+    props.cancel.onClick?.()
+
+    if (props.useAutoCloseOnAction || props.useAutoCloseOnCancel) {
+      updateModelValue(false)
+    }
+
+    emit('cancel')
   }
-})
 
-function updateModelValue (value) {
-  emit('update:modelValue', value)
+  return {
+    defaultCancel,
+    hasCancel
+  }
+}
+
+function useDynamicComponents () {
+  // computeds
+  const mainComponent = computed(() => {
+    return {
+      is: props.useForm ? QForm : 'div',
+
+      /**
+       * adiciona evento de submit caso useForm seja true,
+       * uma vez que somente o q-form possui este evento.
+       */
+      props: {
+        ...(props.useForm && { onSubmit })
+      }
+    }
+  })
+
+  const hasRenderFunction = computed(() => {
+    const description = props.description
+
+    return typeof description === 'object' && description !== null && !Array.isArray(description)
+  })
+
+  const descriptionComponent = computed(() => hasRenderFunction.value ? props.description : 'div')
+
+  // functions
+  function submitHandler () {
+    if (!props.useForm) return
+
+    if (props.useValidationAllAtOnce) {
+      let isAllComponentValid = true
+      const components = form.value.getValidationComponents() || []
+
+      for (const component of components) {
+        const isValid = component?.validate?.()
+
+        if (!isValid) {
+          isAllComponentValid = false
+        }
+      }
+
+      emit('validate', isAllComponentValid)
+
+      return
+    }
+
+    emit('validate', form.value.validate())
+  }
+
+  /**
+   * Sem este método, ao clicar enter com a prop useForm ativada a tela era recarregada,
+   * e a ação de click do botão não era chamada pois ele não esta dentro do form.
+   */
+  function onSubmit (event) {
+    event.preventDefault()
+
+    if (hasOk.value) {
+      onOk()
+      submitHandler()
+    }
+  }
+
+  return {
+    mainComponent,
+    descriptionComponent
+  }
 }
 </script>
 
 <style lang="scss">
 .qas-dialog {
+  $root: &;
+
   .q-dialog__inner > div {
     box-shadow: $shadow-2;
   }
 
+  .q-dialog__inner--minimized {
+    padding: var(--qas-spacing-md);
+  }
+
   &--right {
     .q-dialog__inner {
       width: 100%;
@@ -216,5 +397,39 @@ function updateModelValue (value) {
       width: 100%;
     }
   }
+
+  // tamanhos
+  &--sm {
+    #{$root}__container {
+      max-width: 450px !important;
+    }
+  }
+
+  &--md {
+    #{$root}__container {
+      max-width: 550px !important;
+    }
+  }
+
+  &--lg {
+    #{$root}__container {
+      max-width: 800px !important;
+    }
+  }
+
+  &--xl {
+    #{$root}__container {
+      max-width: 1100px !important;
+    }
+  }
+
+  // tamanho mínimo dos botões de ação (primário e secundário)
+  &__actions {
+    .qas-btn--primary,
+    .qas-btn--secondary {
+      min-width: 120px;
+      width: 100%;
+    }
+  }
 }
 </style>

package/src/components/dialog/QasDialog.yml

@@ -4,10 +4,10 @@ meta:
   desc: Componente de dialog.
 
 props:
-  actions-props:
-    desc: Props repassadas para o "QasActions".
-    default: {}
-    type: Object
+  badges:
+    desc: Badges que aparecem no canto superior direito do dialog.
+    type: [Array, Object]
+    default: []
 
   cancel:
     desc: Props para o botão de cancelar, pode ser objeto com as propriedades ou um boolean, caso for "false", remove o botão de cancelar.
@@ -15,19 +15,13 @@ props:
     type: [Object, Boolean]
     examples: ["{ label: 'Meu botão de cancelar', onClick: () => alert('fui clicado!') }"]
 
-  card:
-    desc: Objeto contendo as informações para serem exibidas dentro do dialog como "title" e "description".
-    default: {}
-    type: Object
-    examples: ["{ title: 'Meu título', description: 'Minha descrição' }"]
-
-  max-width:
-    desc: Tamanho máximo do dialog.
-    type: String
+  description:
+    desc: Descrição do dialog, pode ser uma string, um componente ou uma string com HTML (passando a prop useHtmlDescription).
+    type: [String, Object]
 
-  min-width:
-    desc: Tamanho mínimo do dialog.
-    type: String
+  disable-close-button:
+    desc: Define se o botão de fechar no canto superior direito estará desabilitado.
+    type: Boolean
 
   model-value:
     desc: Model do componente, abre ou fecha o dialog.
@@ -42,27 +36,49 @@ props:
     type: [Object, Boolean]
     examples: ["{ label: 'Meu botão de confirmar', onClick: () => alert('fui clicado!') }"]
 
-  persistent:
-    desc: Define se o dialog vai fechar ou não após clicar fora do dialog.
+  size:
+    desc: Tamanho do dialog.
+    type: String
+    default: 'md'
+    options: ['xs', 'sm', 'md', 'lg', 'xl']
+
+  use-auto-close-on-cancel:
+    desc: Define se o dialog vai fechar automaticamente ao clicar no botão de cancelar.
+    type: Boolean
+    default: true
+
+  use-auto-close-on-ok:
+    desc: Define se o dialog vai fechar automaticamente ao clicar no botão de confirmar (ok).
+    type: Boolean
     default: true
+
+  use-close-button:
+    desc: Define se o dialog vai ter um botão de fechar no canto superior direito.
     type: Boolean
 
   use-form:
     desc: Define se a tag onde fica a descrição no dialog vai ser um "<q-form />" ou "<div />".
     type: Boolean
 
-  use-full-max-width:
-    desc: propriedade para utilizar `100% do maxWidth`.
+  use-html-description:
+    desc: Define se a descrição aceita HTML (utilize com cuidado para evitar XSS).
     type: Boolean
 
   use-validation-all-at-once:
     desc: Valida todos os campos de uma única vez, ao invés de ser um por vez (que é o padrão).
     type: Boolean
 
-slots:
-  actions:
-    desc: Slot para ações (botões por exemplo).
+  tertiary:
+    desc: Props para o botão terciário
+    type: Object
+    default: {}
+
+  title:
+    desc: Título do dialog.
+    type: String
+    required: true
 
+slots:
   description:
     desc: Slot para descrição.
 
@@ -104,6 +120,10 @@ selectors:
     desc: Seletor do botão de cancelar do componente.
     examples: ['data-cy="dialog-cancel-btn"']
 
+  dialog-tertiary-btn:
+    desc: Seletor do botão terciário do componente.
+    examples: ['data-cy="dialog-tertiary-btn"']
+
   dialog-close-btn:
     desc: Seletor do botão de fechar do componente.
     examples: ['data-cy="dialog-close-btn"']

package/src/components/dialog/composables/use-cancel.js

@@ -15,7 +15,7 @@ export default function useCancel (config = {}) {
   const defaultCancel = computed(() => {
     return {
       label: 'Cancelar',
-      outline: true,
+      'data-cy': 'dialog-cancel-btn',
 
       ...props.cancel,
 

package/src/components/dialog/composables/use-dynamic-components.js

@@ -35,12 +35,12 @@ export default function useDynamicComponents (config = {}) {
   })
 
   const hasRenderFunction = computed(() => {
-    const description = props.card.description
+    const description = props.description
 
     return typeof description === 'object' && description !== null && !Array.isArray(description)
   })
 
-  const descriptionComponent = computed(() => hasRenderFunction.value ? props.card.description : 'div')
+  const descriptionComponent = computed(() => hasRenderFunction.value ? props.description : 'div')
 
   // métodos
   function submitHandler () {

package/src/components/dialog/composables/use-ok.js

@@ -18,6 +18,7 @@ export default function useOk (config = {}) {
     return {
       label: 'Ok',
       type: (props.ok?.type || props.useForm) ? 'submit' : 'button',
+      'data-cy': 'dialog-ok-btn',
 
       ...attrs,
 

package/src/components/drawer/QasDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <qas-dialog class="qas-drawer" v-bind="attributes" @update:model-value="onUpdateModelValue">
+  <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">
@@ -11,18 +11,18 @@
             </slot>
           </span>
 
-          <qas-btn v-close-popup class="z-max" color="grey-10" data-cy="drawer-close-btn" icon="sym_r_close" variant="tertiary" @click="emit('update:modelValue', false)" />
+          <qas-btn class="z-max" color="grey-10" data-cy="drawer-close-btn" icon="sym_r_close" variant="tertiary" @click="close" />
         </div>
       </slot>
     </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, useAttrs } from 'vue'
+import { computed, inject, provide } from 'vue'
 
 defineOptions({
   name: 'QasDrawer',
@@ -53,9 +53,8 @@ const props = defineProps({
     default: () => ({})
   },
 
-  maxWidth: {
-    type: String,
-    default: '60%'
+  persistent: {
+    type: Boolean
   },
 
   position: {
@@ -71,43 +70,57 @@ const props = defineProps({
 
   loading: {
     type: Boolean
+  },
+
+  size: {
+    type: String,
+    default: 'sm',
+    validator: value => !value || ['sm', 'md', 'lg', 'xl'].includes(value)
   }
 })
 
-const emit = defineEmits(['update:modelValue'])
+// globals
+const isOverlay = inject('isOverlay', false)
+
+provide('drawerProps', computed(() => ({ persistent: props.persistent })))
 
-const attrs = useAttrs()
+// emits
+const model = defineModel({ type: Boolean })
+
+// composables
 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(() => {
-  const { modelValue } = attrs
-
   return {
-    persistent: false,
-    modelValue,
-
     ...props.dialogProps,
 
+    title: props.title,
     cancel: false,
-    maxWidth: normalizedMaxWidth.value,
     maximized: true,
     ok: false,
     position: props.position,
-    useFullMaxWidth: true
+    persistent: props.persistent
   }
 })
 
-function onUpdateModelValue (value) {
-  emit('update:modelValue', value)
+// functions
+function close () {
+  model.value = false
 }
 </script>
 
@@ -118,6 +131,43 @@ function onUpdateModelValue (value) {
     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

@@ -20,6 +20,11 @@ props:
     examples: [v-model="value"]
     model: true
 
+  persistent:
+    desc: Define se o drawer pode ser fechado clicando fora dele ou pressionando a tecla ESC.
+    default: false
+    type: Boolean
+
   position:
     desc: 'Posição do drawer, sendo possível apenas 2 opções: [left, right].'
     default: left
@@ -29,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/form-view/QasFormView.vue

@@ -190,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' },
 

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/header/QasHeader.vue

@@ -15,7 +15,7 @@
         </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">
+          <div v-for="(badge, badgeIndex) in normalizedBadges" :key="badgeIndex">
             <qas-skeleton v-if="props.skeleton" type="QasBadge" />
 
             <qas-badge v-else v-bind="badge" />
@@ -73,7 +73,7 @@ const props = defineProps({
   },
 
   badges: {
-    type: Array,
+    type: [Array, Object],
     default: () => []
   },
 
@@ -203,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.

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,

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

@@ -54,7 +54,7 @@
 
       <template #description>
         <slot name="dialog-description">
-          <div v-if="dialogDescription" class="q-mb-xl text-center">
+          <div v-if="dialogDescription" class="q-mb-md">
             {{ dialogDescription }}
           </div>
 
@@ -342,8 +342,8 @@ function useSelectDialog () {
 
   const defaultDialogProps = computed(() => {
     return {
-      useFullMaxWidth: true,
-
+      size: 'md',
+      title: 'Adicionar itens',
       ...props.dialogProps,
 
       onBeforeShow: event => {

package/src/components/signature-uploader/QasSignatureUploader.vue

@@ -3,12 +3,8 @@
     <qas-uploader ref="uploader" v-model="model" :add-button-fn="openDialog" :use-resize="false" v-bind="defaultUploaderProps" />
 
     <qas-dialog v-model="isOpenedDialog" v-bind="defaultDialogProps">
-      <template #header>
-        <div class="text-bold text-center">Insira sua assinatura digital no campo abaixo</div>
-      </template>
-
       <template #description>
-        <div :style="signaturePadWidth">
+        <div>
           <qas-signature-pad ref="signaturePadModal" v-model:empty="isEmpty" :height="signaturePadHeight" />
         </div>
       </template>
@@ -82,10 +78,11 @@ export default {
 
     defaultDialogProps () {
       return {
-        maxWidth: '620px',
+        title: 'Assinatura digital',
+        size: 'md',
         ...this.dialogProps,
         ok: {
-          label: 'Salvar',
+          label: 'Assinar',
           onClick: () => this.getSignatureData()
         }
       }
@@ -111,16 +108,6 @@ export default {
       return sizes.true
     },
 
-    signaturePadWidth () {
-      const sizes = {
-        [this.$qas.screen.isSmall]: { width: '100%' },
-        [this.$qas.screen.isMedium]: { width: '570px' },
-        [this.$qas.screen.isLarge]: { width: '350px' }
-      }
-
-      return sizes.true
-    },
-
     uploaderScope () {
       return this.$refs?.uploader?.uploader
     }

package/src/components/text-truncate/QasTextTruncate.vue

@@ -19,7 +19,7 @@
       <qas-btn v-if="hasButton" class="q-ml-xs" :label="buttonLabel" @click.stop.prevent="toggle" />
     </div>
 
-    <qas-dialog v-model="show" v-bind="defaultProps" aria-label="Diálogo de texto completo" role="dialog">
+    <qas-dialog v-model="show" v-bind="defaultProps" aria-label="Diálogo de texto completo" role="dialog" size="md">
       <template v-if="showDescriptionSlot" #description>
         <component :is="dialogComponent.is" v-bind="dialogComponent.props" v-model:results="searchModel">
           <q-list separator>
@@ -225,10 +225,8 @@ function useDialog ({ props, textContent }) {
 
       ...props.dialogProps,
 
-      card: {
-        title: props.dialogTitle,
-        description: description.value
-      }
+      title: props.dialogTitle,
+      description: description.value
     }
   })
 

package/src/components/tree-generator/QasTreeGenerator.vue

@@ -186,9 +186,9 @@ export default {
 
     destroyDialogConfig () {
       return {
-        card: {
-          description: 'Todas as informações serão perdidas. Deseja realmente continuar?'
-        },
+        title: 'Excluir',
+        description: 'Todas as informações serão perdidas. Deseja realmente continuar?',
+        size: 'md',
         ok: {
           label: 'Excluir',
           onClick: this.destroy
@@ -201,9 +201,7 @@ export default {
 
     formDialogConfig () {
       return {
-        card: {
-          title: this.isAdd ? 'Adicionar ramo' : 'Editar ramo'
-        },
+        title: this.isAdd ? 'Adicionar ramo' : 'Editar ramo',
         ok: {
           label: 'Salvar',
           loading: this.isSubmitting

package/src/components/uploader/QasUploader.vue

@@ -317,7 +317,17 @@ export default {
       } = this.$props
 
       return {
-        dialogProps,
+        dialogProps: {
+          title: 'Editar arquivo',
+
+          ok: {
+            label: 'Salvar',
+            ...dialogProps.ok
+          },
+
+          ...dialogProps
+        },
+
         fields,
         formGeneratorProps,
         galleryCardProps,

package/src/plugins/delete/Delete.js

@@ -21,16 +21,12 @@ export default function (config = {}) {
   const { entity, id, url } = deleteActionParams
 
   const defaultDialogProps = {
-    useForm: true,
+    useAutoCloseOnOk: false,
 
-    ...dialogProps,
-
-    card: {
-      title: 'Excluir',
-      description: 'Tem certeza que deseja excluir este item?',
+    title: 'Excluir',
+    description: 'Tem certeza que deseja excluir este item?',
 
-      ...dialogProps.card
-    },
+    ...dialogProps,
 
     ok: {
       label: 'Excluir',