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

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.18",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "./src/asteroid.js",

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

@@ -388,6 +388,8 @@ 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: {
@@ -1122,7 +1124,7 @@ function onDropCard (event) {
     return
   }
 
-  props.useConfirmDialog
+  hasConfirmDialogProps.value
     ? openConfirmDialog()
     : confirmDrop(event)
 }
@@ -1141,7 +1143,7 @@ function closeConfirmDialog () {
 function cancelDrop (event) {
   revertDomDrag(event)
 
-  if (props.useConfirmDialog) closeConfirmDialog()
+  if (hasConfirmDialogProps.value) closeConfirmDialog()
 
   stopDragging()
 }
@@ -1280,10 +1282,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/board-generator/QasBoardGenerator.yml

@@ -115,10 +115,6 @@ 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,29 +1,37 @@
 <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">
-      <header v-if="hasHeaderSlot" class="q-mb-md">
-        <slot name="header" />
+  <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>
       </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">
-            <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>
+            <component :is="descriptionComponent" data-cy="dialog-description">{{ props.card.description }}</component>
           </slot>
 
-          <qas-actions v-if="hasActions" class="qas-dialog__actions" v-bind="defaultActionsProps" />
+          <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>
         </component>
       </section>
     </div>
@@ -31,19 +39,24 @@
 </template>
 
 <script setup>
-import QasLabel from '../label/QasLabel.vue'
 import QasActions from '../actions/QasActions.vue'
-import QasHeader from '../header/QasHeader.vue'
+import QasBtn from '../btn/QasBtn.vue'
+import QasLabel from '../label/QasLabel.vue'
 
-import { computed, ref, useAttrs, provide, useSlots, inject } from 'vue'
-import { useDialogPluginComponent, QForm } from 'quasar'
+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'
 
 defineOptions({ name: 'QasDialog' })
 
 const props = defineProps({
-  badges: {
-    default: () => [],
-    type: [Array, Object]
+  actionsProps: {
+    default: () => ({}),
+    type: Object
   },
 
   cancel: {
@@ -51,60 +64,44 @@ const props = defineProps({
     type: [Object, Boolean]
   },
 
-  description: {
-    type: [String, Object],
-    default: ''
-  },
-
-  disableCloseButton: {
-    type: Boolean
-  },
-
-  ok: {
+  card: {
     default: () => ({}),
-    type: [Object, Boolean]
+    type: Object
   },
 
-  size: {
-    type: String,
-    default: 'sm',
-    validator: value => ['sm', 'md', 'lg', 'xl'].includes(value)
+  maxWidth: {
+    default: '',
+    type: String
   },
 
-  title: {
-    type: String,
-    required: true
+  minWidth: {
+    default: '',
+    type: String
   },
 
-  tertiary: {
+  ok: {
     default: () => ({}),
-    type: Object
+    type: [Object, Boolean]
   },
 
-  useForm: {
+  persistent: {
+    default: true,
     type: Boolean
   },
 
-  usePlugin: {
+  useForm: {
     type: Boolean
   },
 
-  useAutoCloseOnCancel: {
-    type: Boolean,
-    default: true
-  },
-
-  useAutoCloseOnOk: {
-    type: Boolean,
-    default: true
+  modelValue: {
+    type: Boolean
   },
 
-  useCloseButton: {
-    type: Boolean,
-    default: true
+  usePlugin: {
+    type: Boolean
   },
 
-  useHtmlDescription: {
+  useFullMaxWidth: {
     type: Boolean
   },
 
@@ -113,8 +110,10 @@ const props = defineProps({
   }
 })
 
-// emtis
 const emit = defineEmits([
+  // model
+  'update:modelValue',
+
   // actions
   'cancel',
   'ok',
@@ -124,32 +123,23 @@ const emit = defineEmits([
   ...useDialogPluginComponent.emits
 ])
 
-// models
-const model = defineModel({ type: Boolean })
-
-// globals
 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)
+const attrs = useAttrs()
+const screen = useScreen()
+const slots = useSlots()
+
+// usado para o plugin
+const { dialogRef, onDialogHide } = useDialogPluginComponent()
 
-// refs
+// QForm template
 const form = ref(null)
 
-// 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()
+const composablesParams = { emit, form, props, screen, slots }
 
-// computeds
-/**
- * Necessária logica via provide para controle interno no componente QasDrawer.
- */
-const hasDefaultMaxWidth = computed(() => !!defaultProps?.value.maxWidth)
+const { defaultCancel, hasCancel } = useCancel(composablesParams)
+const { defaultOk, hasOk, onOk } = useOk(composablesParams)
+const { descriptionComponent, mainComponent } = useDynamicComponents({ ...composablesParams, onOk, hasOk })
 
 /**
  * Classes criadas para serem utilizadas quando usado com a prop "position", pois
@@ -160,241 +150,60 @@ const classes = computed(() => {
   const isRightPosition = attrs.position === 'right'
   const isLeftPosition = attrs.position === 'left'
 
-  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]]: !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
+    'qas-dialog--right': isRightPosition,
+    'qas-dialog--left': isLeftPosition
   }
 })
 
 const dialogProps = computed(() => {
-  const { title, ...attributes } = attrs
-
   return {
     ...(!props.usePlugin && { modelValue: props.modelValue }),
-    ...attributes,
-    persistent: defaultProps?.value?.persistent ?? hasActions.value,
+    ...attrs,
 
     onHide: onDialogHide
   }
 })
 
-const hasActions = computed(() => hasOk.value || hasCancel.value || !!Object.keys(props.tertiary).length)
-
-const headerProps = computed(() => {
-  return {
-    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)
-      })
-    }
-  }
-})
-
-const defaultActionsProps = computed(() => {
+const style = computed(() => {
   return {
-    ...(hasOk.value && { primaryButtonProps: defaultOk.value }),
-    ...(hasCancel.value && { secondaryButtonProps: defaultCancel.value }),
+    ...(props.useFullMaxWidth && { width: '100%' }),
 
-    tertiaryButtonProps: {
-      ...props.tertiary,
-      'data-cy': 'dialog-tertiary-btn'
-    },
-
-    spacingTop: 'lg',
-    gutter: 'md'
+    maxWidth: props.maxWidth || '470px',
+    minWidth: props.minWidth || (screen.isSmall ? '' : '366px')
   }
 })
 
-const hasHeaderSlot = computed(() => !!slots.header)
-const hasTitleSlot = computed(() => !!slots.title)
-
-// functions
-function updateModelValue (value) {
-  model.value = value
-}
-
-// 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 hasHeader = computed(() => !!slots.header || props.card.title)
+const isInfoDialog = computed(() => !hasOk.value && !hasCancel.value)
 
-  const hasOk = computed(() => typeof props.ok === 'boolean' ? props.ok : !!Object.keys(props.ok))
-
-  // functions
-  function onOk () {
-    if (!props.useForm && props.useAutoCloseOnOk) {
-      updateModelValue(false)
-    }
+const defaultActionsProps = computed(() => {
+  const { useFullWidth, useEqualWidth } = props.actionsProps
 
-    props.ok.onClick?.()
+  if (useFullWidth || useEqualWidth) return props.actionsProps
 
-    emit('ok')
-  }
+  const hasAllActions = hasOk.value && hasCancel.value
+  const hasSingleAction = (hasOk.value && !hasCancel.value) || (!hasOk.value && hasCancel.value)
 
   return {
-    defaultOk,
-    hasOk,
-    onOk
-  }
-}
-
-function useCancel () {
-  // computeds
-  const defaultCancel = computed(() => {
-    return {
-      label: 'Cancelar',
-      'data-cy': 'dialog-cancel-btn',
-
-      ...props.cancel,
-
-      onClick: onCancel
-    }
-  })
-
-  const hasCancel = computed(() => typeof props.cancel === 'boolean' ? props.cancel : !!Object.keys(props.cancel))
-
-  // functions
-  function onCancel () {
-    props.cancel.onClick?.()
-
-    if (props.useAutoCloseOnAction || props.useAutoCloseOnCancel) {
-      updateModelValue(false)
-    }
-
-    emit('cancel')
-  }
+    useFullWidth: hasSingleAction,
+    useEqualWidth: hasAllActions,
 
-  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()
-    }
+    ...props.actionsProps
   }
+})
 
-  return {
-    mainComponent,
-    descriptionComponent
-  }
+function updateModelValue (value) {
+  emit('update:modelValue', value)
 }
 </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%;
@@ -407,39 +216,5 @@ function useDynamicComponents () {
       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:
-  badges:
-    desc: Badges que aparecem no canto superior direito do dialog.
-    type: [Array, Object]
-    default: []
+  actions-props:
+    desc: Props repassadas para o "QasActions".
+    default: {}
+    type: Object
 
   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,13 +15,19 @@ props:
     type: [Object, Boolean]
     examples: ["{ label: 'Meu botão de cancelar', onClick: () => alert('fui clicado!') }"]
 
-  description:
-    desc: Descrição do dialog, pode ser uma string, um componente ou uma string com HTML (passando a prop useHtmlDescription).
-    type: [String, Object]
+  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' }"]
 
-  disable-close-button:
-    desc: Define se o botão de fechar no canto superior direito estará desabilitado.
-    type: Boolean
+  max-width:
+    desc: Tamanho máximo do dialog.
+    type: String
+
+  min-width:
+    desc: Tamanho mínimo do dialog.
+    type: String
 
   model-value:
     desc: Model do componente, abre ou fecha o dialog.
@@ -36,49 +42,27 @@ props:
     type: [Object, Boolean]
     examples: ["{ label: 'Meu botão de confirmar', onClick: () => alert('fui clicado!') }"]
 
-  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
+  persistent:
+    desc: Define se o dialog vai fechar ou não após clicar fora do dialog.
     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-html-description:
-    desc: Define se a descrição aceita HTML (utilize com cuidado para evitar XSS).
+  use-full-max-width:
+    desc: propriedade para utilizar `100% do maxWidth`.
     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
 
-  tertiary:
-    desc: Props para o botão terciário
-    type: Object
-    default: {}
-
-  title:
-    desc: Título do dialog.
-    type: String
-    required: true
-
 slots:
+  actions:
+    desc: Slot para ações (botões por exemplo).
+
   description:
     desc: Slot para descrição.
 
@@ -120,10 +104,6 @@ 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',
-      'data-cy': 'dialog-cancel-btn',
+      outline: true,
 
       ...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.description
+    const description = props.card.description
 
     return typeof description === 'object' && description !== null && !Array.isArray(description)
   })
 
-  const descriptionComponent = computed(() => hasRenderFunction.value ? props.description : 'div')
+  const descriptionComponent = computed(() => hasRenderFunction.value ? props.card.description : 'div')
 
   // métodos
   function submitHandler () {

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

@@ -18,7 +18,6 @@ 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 v-model="model" class="qas-drawer" v-bind="attributes">
+  <qas-dialog class="qas-drawer" v-bind="attributes" @update:model-value="onUpdateModelValue">
     <template #header>
       <slot name="header">
         <div class="items-center justify-between row">
@@ -11,7 +11,7 @@
             </slot>
           </span>
 
-          <qas-btn class="z-max" color="grey-10" data-cy="drawer-close-btn" icon="sym_r_close" variant="tertiary" @click="close" />
+          <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)" />
         </div>
       </slot>
     </template>
@@ -40,7 +40,7 @@ import QasBtn from '../btn/QasBtn.vue'
 
 import useScreen from '../../composables/use-screen.js'
 
-import { computed, provide } from 'vue'
+import { computed, useAttrs } from 'vue'
 
 defineOptions({
   name: 'QasDrawer',
@@ -58,10 +58,6 @@ const props = defineProps({
     default: '60%'
   },
 
-  persistent: {
-    type: Boolean
-  },
-
   position: {
     type: String,
     default: 'left',
@@ -78,10 +74,9 @@ const props = defineProps({
   }
 })
 
-// emits
-const model = defineModel({ type: Boolean })
+const emit = defineEmits(['update:modelValue'])
 
-// composables
+const attrs = useAttrs()
 const screen = useScreen()
 
 // computed
@@ -94,31 +89,25 @@ const loadingStyle = computed(() => {
 })
 
 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
+    position: props.position,
+    useFullMaxWidth: true
   }
 })
 
-// globals
-/**
- * Manter dessa forma até issue #1431 ser resolvida.
- */
-provide('dialogDefaultProps', computed(() => {
-  return {
-    maxWidth: normalizedMaxWidth.value,
-    persistent: props.persistent
-  }
-}))
-
-// functions
-function close () {
-  model.value = false
+function onUpdateModelValue (value) {
+  emit('update:modelValue', value)
 }
 </script>
 

package/src/components/drawer/QasDrawer.yml

@@ -20,11 +20,6 @@ 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

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

@@ -190,9 +190,9 @@ export default {
       ignoreRouterGuard: false,
 
       defaultDialogProps: {
-        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',
+        card: {
+          description: 'Você está deixando a página e suas alterações serão perdidas. Tem certeza que deseja sair sem salvar?'
+        },
 
         ok: { label: 'Continuar editando' },
 

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

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

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

@@ -1,6 +1,12 @@
 <template>
   <div class="pv-gallery-carousel-dialog">
-    <qas-dialog v-model="model" v-bind="dialogProps">
+    <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>
+
       <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">
@@ -46,13 +52,6 @@ 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 normalizedBadges" :key="badgeIndex">
+          <div v-for="(badge, badgeIndex) in props.badges" :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, Object],
+    type: Array,
     default: () => []
   },
 
@@ -203,15 +203,13 @@ 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(() => !!normalizedBadges.value.length)
+const hasBadges = computed(() => !!props.badges.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, Object]
+    type: Array
 
   button-props:
     desc: Propriedades do QasBtn.

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

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

@@ -3,8 +3,12 @@
     <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>
+        <div :style="signaturePadWidth">
           <qas-signature-pad ref="signaturePadModal" v-model:empty="isEmpty" :height="signaturePadHeight" />
         </div>
       </template>
@@ -78,11 +82,10 @@ export default {
 
     defaultDialogProps () {
       return {
-        title: 'Assinatura digital',
-        size: 'md',
+        maxWidth: '620px',
         ...this.dialogProps,
         ok: {
-          label: 'Assinar',
+          label: 'Salvar',
           onClick: () => this.getSignatureData()
         }
       }
@@ -108,6 +111,16 @@ 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" size="md">
+    <qas-dialog v-model="show" v-bind="defaultProps" aria-label="Diálogo de texto completo" role="dialog">
       <template v-if="showDescriptionSlot" #description>
         <component :is="dialogComponent.is" v-bind="dialogComponent.props" v-model:results="searchModel">
           <q-list separator>
@@ -225,8 +225,10 @@ function useDialog ({ props, textContent }) {
 
       ...props.dialogProps,
 
-      title: props.dialogTitle,
-      description: description.value
+      card: {
+        title: props.dialogTitle,
+        description: description.value
+      }
     }
   })
 

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

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

package/src/components/uploader/QasUploader.vue

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

package/src/plugins/delete/Delete.js

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