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

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,33 +36,60 @@ 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.
 
   header:
     desc: Slot para o título.
 
+provide:
+  is-dialog:
+    desc: Identificador booleano que indica quando um componente está dentro do contexto de um QasDialog.
+    type: Boolean
+
 events:
   '@update:model-value -> function (value)':
     desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
@@ -99,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"']
@@ -111,6 +136,9 @@ selectors:
     desc: Seletor do botão de confirmar do componente.
     examples: ['data-cy="dialog-ok-btn"']
 
+  title:
+    desc: Slot para inserir conteúdo adicional ao lado do título do card do dialog.
+
   dialog-title:
     desc: Seletor do título do componente.
     examples: ['data-cy="dialog-title"']

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/dialog-router/QasDialogRouter.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import { NotifyError } from '../../plugins'
+import NotifyError from '../../plugins/notify-error/NotifyError.js'
 
 import { Loading, extend } from 'quasar'
 import { ref, markRaw } from 'vue'

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/expansion-item/QasExpansionItem.yml

@@ -62,6 +62,11 @@ slots:
   content:
     desc: Slot para substituir o conteúdo principal do card.
 
+provide:
+  is-expansion-item:
+    desc: Identificador booleano que indica quando um componente está dentro do contexto de um QasExpansionItem.
+    type: Boolean
+
 events:
   '@update:model-value -> function(value)':
     desc: Dispara quando o model-value altera, também usado para v-model.

package/src/components/filters/QasFilters.vue

@@ -249,13 +249,14 @@ export default {
         orderByOptions: this.orderByOptions,
         useOrderBy: this.hasOrderByOptions,
         useFilterButton: this.useFilterButton,
+        isFetchingFilters: this.isFetching,
 
         filtersButtonProps: {
           color: this.filterButtonColor,
           error: this.hasFetchError,
           fields: this.fields,
           fieldsProps: this.formattedFieldsProps,
-          loading: this.isFetching
+          skeleton: this.isFetching
         },
 
         /**

package/src/components/filters/private/PvFiltersActions.vue

@@ -2,7 +2,7 @@
   <qas-btn-dropdown v-bind="btnDropdownProps">
     <!-- Seção do botão de filtrar -->
     <template v-if="props.useFilterButton" #btn-content-filtersButton>
-      <q-menu ref="filtersButtonMenu" anchor="center right" class="full-width" max-width="270px" no-refocus self="top right" @hide="emit('hide-filters-menu')">
+      <q-menu ref="filtersButtonMenu" anchor="center right" class="full-width pv-filter-actions" max-width="300px" no-refocus self="top right" @before-hide="onMenuHide" @before-show="onMenuShow" @hide="emit('hide-filters-menu')">
         <div v-if="props.filtersButtonProps.loading" class="q-pa-xl text-center">
           <q-spinner color="grey" size="2em" />
         </div>
@@ -11,20 +11,24 @@
           <q-icon color="negative" name="sym_r_warning" size="2em" />
         </div>
 
-        <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="emit('filter')">
-          <div v-for="(field, index) in props.filtersButtonProps.fields" :key="index">
-            <qas-field v-model="filtersButtonModel[field.name]" :data-cy="`filters-${field.name}-field`" :field="field" v-bind="props.filtersButtonProps.fieldsProps[field.name]" />
+        <q-form v-else class="pv-filter-actions__form" @submit.prevent="emit('filter')">
+          <div ref="content" class="pv-filter-actions__fields-content q-gutter-y-md q-pt-md q-px-md">
+            <div v-for="(field, index) in props.filtersButtonProps.fields" :key="index">
+              <qas-field v-model="filtersButtonModel[field.name]" :data-cy="`filters-${field.name}-field`" :field="field" v-bind="props.filtersButtonProps.fieldsProps[field.name]" />
+            </div>
           </div>
 
-          <qas-actions gutter="sm" use-equal-width>
-            <template #primary>
-              <qas-btn class="full-width" data-cy="filters-submit-btn" label="Filtrar" size="sm" type="submit" variant="primary" />
-            </template>
+          <div class="pv-filter-actions__actions q-pa-md q-pb-md q-px-md">
+            <qas-actions gutter="sm" spacing-top="none" use-equal-width>
+              <template #primary>
+                <qas-btn class="full-width" data-cy="filters-submit-btn" label="Filtrar" size="sm" type="submit" variant="primary" />
+              </template>
 
-            <template #secondary>
-              <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" size="sm" variant="secondary" @click="emit('clear-filters')" />
-            </template>
-          </qas-actions>
+              <template #secondary>
+                <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" size="sm" variant="secondary" @click="emit('clear-filters')" />
+              </template>
+            </qas-actions>
+          </div>
         </q-form>
       </q-menu>
     </template>
@@ -52,8 +56,10 @@ import QasBtn from '../../btn/QasBtn.vue'
 import QasBtnDropdown from '../../btn-dropdown/QasBtnDropdown.vue'
 import QasField from '../../field/QasField.vue'
 
+import { setScrollGradient } from '../../../helpers'
+
 import { useRoute } from 'vue-router'
-import { computed, ref } from 'vue'
+import { computed, ref, nextTick } from 'vue'
 
 defineOptions({ name: 'PvFiltersActions' })
 
@@ -74,6 +80,10 @@ const props = defineProps({
 
   useOrderBy: {
     type: Boolean
+  },
+
+  isFetchingFilters: {
+    type: Boolean
   }
 })
 
@@ -88,10 +98,19 @@ defineExpose({ hideFiltersMenu })
 
 // template refs
 const filtersButtonMenu = ref(null)
+const content = ref(null)
 
 // composables
 const route = useRoute()
 
+const { initializeScrollGradient, removeScrollGradient } = setScrollGradient({
+  styles: {
+    gradientLevel: 2
+  },
+
+  orientation: 'y'
+})
+
 // computeds
 const btnDropdownProps = computed(() => {
   return {
@@ -99,6 +118,7 @@ const btnDropdownProps = computed(() => {
       ...(props.useFilterButton && {
         filtersButton: {
           label: 'Filtrar',
+          skeleton: props.isFetchingFilters,
           useLabelOnSmallScreen: false,
           icon: 'sym_r_filter_alt',
           'data-cy': 'filters-btn' // manter compatibilidade
@@ -130,4 +150,50 @@ function isActive (value) {
 function hideFiltersMenu () {
   filtersButtonMenu.value?.hide()
 }
+
+/**
+ * Precisa usar nextTick com o evento `before-show` ou invés de `show` para evitar um delay na renderização
+ * do gradiente, dessa forma o gradiente é aplicado imediatamente após o menu ser exibido.
+ */
+async function onMenuShow () {
+  await nextTick()
+
+  if (content.value) {
+    initializeScrollGradient(content.value)
+  }
+}
+
+function onMenuHide () {
+  if (content.value) {
+    removeScrollGradient(content.value)
+  }
+}
 </script>
+
+<style lang="scss">
+.pv-filter-actions {
+  &.q-menu {
+    display: flex;
+    flex-direction: column;
+    max-height: 600px;
+    overflow: hidden;
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &__fields-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  &__actions {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+</style>

package/src/components/form-generator/QasFormGenerator.vue

@@ -1,7 +1,9 @@
 <template>
   <div :class="fieldsetClasses">
     <div v-for="(fieldsetItem, fieldsetItemKey) in normalizedFields" :key="fieldsetItemKey" :class="getFieldSetColumnClass(fieldsetItem.column)">
-      <component :is="containerComponent.is" v-bind="containerComponent.props">
+      <qas-skeleton v-if="props.skeleton" height="200px" />
+
+      <component :is="containerComponent.is" v-else v-bind="containerComponent.props">
         <slot v-if="fieldsetItem.__hasFieldset" :name="`legend-${fieldsetItemKey}`">
           <qas-header v-if="fieldsetItem.__hasHeader" v-bind="getHeaderProps({ values: fieldsetItem })" />
         </slot>
@@ -63,6 +65,7 @@ import QasBox from '../box/QasBox.vue'
 import QasBtn from '../btn/QasBtn.vue'
 import QasField from '../field/QasField.vue'
 import QasHeader from '../header/QasHeader.vue'
+import QasSkeleton from '../skeleton/QasSkeleton.vue'
 
 import { gutterValidator } from '../../helpers/private/gutter-validator'
 import useGenerator, { baseProps } from '../../composables/private/use-generator'
@@ -116,6 +119,10 @@ const props = defineProps({
     type: Array
   },
 
+  skeleton: {
+    type: Boolean
+  },
+
   useBox: {
     type: Boolean
   }

package/src/components/form-generator/QasFormGenerator.yml

@@ -72,6 +72,11 @@ props:
     default: []
     type: Array
 
+  skeleton:
+    desc: Exibe um esqueleto de carregamento no lugar do conteúdo.
+    default: false
+    type: Boolean
+
   use-box:
     desc: Contra QasBox dentro do form-generator e fieldset.
     default: false
@@ -115,6 +120,11 @@ slots:
   'legend-bottom[nome-da-chave-do-fieldset]-[nome-da-chave-do-subset]':
     desc: Acessa o slot da seção abaixo do conteúdo do form de um subset específico.
 
+provide:
+  is-form-generator:
+    desc: Identificador booleano que indica quando um componente está dentro do contexto de um QasFormGenerator.
+    type: Boolean
+
 events:
   '@update:model-value -> function(value)':
     desc: Dispara quando o model-value altera, também usado para v-model.