@bildvitta/quasar-ui-asteroid 3.5.0-beta.9 → 3.6.0-beta.0

package/src/components/date-time-input/QasDateTimeInput.vue

@@ -1,17 +1,17 @@
 <template>
-  <qas-input ref="input" v-bind="attributes" v-model="currentValue" :unmasked-value="false" @update:model-value="updateModelValue">
+  <qas-input ref="input" v-bind="attributes" v-model="currentValue" :unmasked-value="false" @blur="validateDateTimeOnBlur" @focus="resetError" @update:model-value="updateModelValue">
     <template #append>
-      <q-icon v-if="!useTimeOnly" class="cursor-pointer" name="o_event">
+      <qas-btn v-if="!useTimeOnly" color="grey-9" dense :disable="$attrs.readonly" flat icon="sym_r_event" rounded>
         <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale">
-          <q-date v-model="currentValue" v-bind="dateProps" :mask="maskDate" @update:model-value="updateModelValue" />
+          <q-date v-model="currentValue" v-bind="defaultDateProps" :mask="maskDate" @update:model-value="updateModelValue" />
         </q-popup-proxy>
-      </q-icon>
+      </qas-btn>
 
-      <q-icon v-if="!useDateOnly" class="cursor-pointer q-ml-md" name="o_access_time">
+      <qas-btn v-if="!useDateOnly" class="q-ml-sm" color="grey-9" dense :disable="$attrs.readonly" flat icon="sym_r_access_time" rounded>
         <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale">
-          <q-time v-model="currentValue" v-bind="timeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
+          <q-time v-model="currentValue" v-bind="defaultTimeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
         </q-popup-proxy>
-      </q-icon>
+      </qas-btn>
     </template>
   </qas-input>
 </template>
@@ -69,6 +69,9 @@ export default {
   data () {
     return {
       currentValue: '',
+      error: false,
+      errorMessage: '',
+      hasInvalidDate: false,
       lastValue: ''
     }
   },
@@ -78,11 +81,34 @@ export default {
       const { modelValue, ...attributes } = this.$attrs
 
       return {
+        error: this.error,
+        errorMessage: this.errorMessage,
         ...attributes,
         mask: this.mask
       }
     },
 
+    defaultDateProps () {
+      return {
+        ...this.defaultDateTimeProps,
+        ...this.dateProps
+      }
+    },
+
+    defaultTimeProps () {
+      return {
+        ...this.defaultDateTimeProps,
+        ...this.timeProps
+      }
+    },
+
+    defaultDateTimeProps () {
+      return {
+        readonly: this.$attrs.readonly,
+        disable: this.$attrs.disable
+      }
+    },
+
     inputElement () {
       return this.$refs.input
     },
@@ -131,6 +157,16 @@ export default {
       this.currentValue = value
       const valueLength = value?.replace?.(/_/g, '')?.length
 
+      this.error = this.validateDateAndTime(value)
+
+      if (this.error) {
+        this.hasInvalidDate = true
+        this.errorMessage = 'Data inválida.'
+        return
+      }
+
+      this.hasInvalidDate = false
+
       if (value === '' || valueLength === this.mask.length) {
         this.lastValue = this.useTimeOnly ? value : this.toISOString(value)
         this.$emit('update:modelValue', this.lastValue)
@@ -146,9 +182,7 @@ export default {
     },
 
     toISOString (value) {
-      if (!value) {
-        return ''
-      }
+      if (!value) return ''
 
       if (this.useDateOnly && !this.useIso) {
         return dateFn(date.extractDate(value, this.maskDate), 'yyyy-MM-dd')
@@ -172,6 +206,54 @@ export default {
         this.useDateOnly ? newDate.slice(0, 23) : newDate,
         this.maskDate
       )
+    },
+
+    validateDateTimeOnBlur () {
+      const valueLength = this.currentValue?.replace?.(/_/g, '')?.length
+
+      // valida se o tamanho digitado é o tamanho que a mascara espera receber
+      this.error = !!((valueLength < this.mask.length || this.error) && valueLength)
+
+      if (this.error && !this.hasInvalidDate) {
+        this.errorMessage = 'Data incompleta.'
+      }
+
+      if (this.hasInvalidDate) {
+        this.currentValue = ''
+      }
+
+      if (this.error || this.hasInvalidDate) {
+        this.$emit('update:modelValue', '')
+      }
+    },
+
+    validateDateAndTime (value) {
+      if (!value) return false
+
+      if (this.useDateOnly) return this.validateDateOnly(value)
+      if (this.useTimeOnly) return this.validateTimeOnly(value)
+
+      const [date, time] = value?.split(' ')
+
+      return this.validateDateOnly(date) || this.validateTimeOnly(time)
+    },
+
+    validateDateOnly (value = '') {
+      const [day, month] = value.split('/')
+
+      return day > 31 || month > 12
+    },
+
+    validateTimeOnly (value = '') {
+      const [hour, minute] = value.split(':')
+
+      return hour > 23 || minute > 59
+    },
+
+    resetError () {
+      if (!this.currentValue) {
+        this.error = false
+      }
     }
   }
 }

package/src/components/delete/QasDelete.vue

@@ -77,7 +77,6 @@ export default {
     defaultDialogProps () {
       return {
         card: {
-          title: 'Confirmar',
           description: 'Tem certeza que deseja excluir este item?'
         },
 

package/src/components/dialog/QasDialog.vue

@@ -1,37 +1,38 @@
 <template>
-  <q-dialog ref="dialog" :persistent="persistent" v-bind="dialogProps" @update:model-value="updateModelValue">
-    <q-card v-bind="cardProps" class="q-pa-sm" :style="style">
-      <q-card-section>
+  <q-dialog ref="dialog" class="qas-dialog" :persistent="persistent" v-bind="dialogProps" @update:model-value="updateModelValue">
+    <div class="bg-white q-pa-lg" :style="style">
+      <header v-if="hasHeader" class="q-mb-lg">
         <slot name="header">
-          <div class="justify-between row">
-            <div class="text-bold text-h6">{{ card.title }}</div>
-            <qas-btn v-if="useCloseButton" v-close-popup dense flat icon="o_close" rounded />
+          <div class="items-center justify-between row">
+            <h5 class="text-grey-9 text-h5">{{ card.title }}</h5>
+
+            <qas-btn v-if="isInfoDialog" v-close-popup color="grey-9" dense flat icon="sym_r_close" rounded />
           </div>
         </slot>
-      </q-card-section>
+      </header>
 
-      <q-card-section class="q-pt-none">
+      <section class="text-body1 text-grey-8">
         <component :is="componentTag" ref="form">
           <slot name="description">
             <div v-if="card.description">{{ card.description }}</div>
           </slot>
         </component>
-      </q-card-section>
+      </section>
 
-      <q-card-section>
+      <footer v-if="!isInfoDialog" class="q-mt-xl">
         <slot name="actions">
-          <qas-actions v-bind="actionsProps">
-            <template #primary>
-              <qas-btn v-if="ok" v-close-popup="!useForm" class="full-width" v-bind="defaultOk" @click="submitHandler" />
+          <qas-actions v-bind="actionsProps" :use-equal-width="hasAllActions" :use-full-width="hasSingleAction">
+            <template v-if="hasOk" #primary>
+              <qas-btn v-close-popup="!useForm" class="full-width" v-bind="defaultOk" @click="submitHandler" />
             </template>
 
-            <template #secondary>
-              <qas-btn v-if="cancel" v-close-popup class="full-width" v-bind="defaultCancel" />
+            <template v-if="hasCancel" #secondary>
+              <qas-btn v-close-popup class="full-width" v-bind="defaultCancel" />
             </template>
           </qas-actions>
         </slot>
-      </q-card-section>
-    </q-card>
+      </footer>
+    </div>
   </q-dialog>
 </template>
 
@@ -63,11 +64,6 @@ export default {
       type: Object
     },
 
-    cardProps: {
-      default: () => ({}),
-      type: Object
-    },
-
     maxWidth: {
       default: '',
       type: String
@@ -100,10 +96,6 @@ export default {
       type: Boolean
     },
 
-    useCloseButton: {
-      type: Boolean
-    },
-
     useFullMaxWidth: {
       type: Boolean
     },
@@ -138,8 +130,8 @@ export default {
     style () {
       return {
         ...(this.useFullMaxWidth && { width: '100%' }),
-        maxWidth: this.maxWidth || (this.$qas.screen.isSmall ? '' : '600px'),
-        minWidth: this.minWidth || (this.$qas.screen.isSmall ? '' : '400px')
+        maxWidth: this.maxWidth || '470px',
+        minWidth: this.minWidth || (this.$qas.screen.isSmall ? '' : '366px')
       }
     },
 
@@ -152,6 +144,34 @@ export default {
         ...(!this.usePlugin && { modelValue: this.modelValue }),
         ...this.$attrs
       }
+    },
+
+    hasOk () {
+      return typeof this.ok === 'boolean' ? this.ok : !!Object.keys(this.ok)
+    },
+
+    hasCancel () {
+      return typeof this.cancel === 'boolean' ? this.cancel : !!Object.keys(this.cancel)
+    },
+
+    hasAllActions () {
+      return this.hasOk && this.hasCancel
+    },
+
+    hasSingleAction () {
+      return (this.hasOk && !this.hasCancel) || (!this.hasOk && this.hasCancel)
+    },
+
+    hasHeaderSlot () {
+      return !!this.$slots.header
+    },
+
+    hasHeader () {
+      return this.hasHeaderSlot || this.card.title
+    },
+
+    isInfoDialog () {
+      return !this.hasOk && !this.hasCancel
     }
   },
 
@@ -195,3 +215,11 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.qas-dialog {
+  .q-dialog__inner > div {
+    box-shadow: $shadow-2;
+  }
+}
+</style>

package/src/components/dialog/QasDialog.yml

@@ -15,11 +15,6 @@ props:
     type: [Object, Boolean]
     examples: ["{ label: 'Meu botão de cancelar', onClick: () => alert('fui clicado!') }"]
 
-  card-props:
-    desc: Props repassadas para o componente "<q-card />".
-    default: {}
-    type: Object
-
   card:
     desc: Objeto contendo as informações para serem exibidas dentro do dialog como "title" e "description".
     default: {}
@@ -52,10 +47,6 @@ props:
     default: true
     type: Boolean
 
-  use-close-button:
-    desc: Define se vai ter ou não Ícone de fechar o dialog.
-    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

package/src/components/filters/QasFilters.vue

@@ -4,44 +4,46 @@
       <div v-if="showSearch" class="col-12 col-md-6">
         <slot :filter="filter" name="search">
           <q-form v-if="useSearch" @submit.prevent="filter()">
-            <qas-input v-model="search" class="bg-white q-px-sm qas-filters__input rounded-borders-sm shadow-2" data-cy="filters-search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" :outlined="false" :placeholder="searchPlaceholder" type="search">
-              <template #prepend>
-                <q-icon v-if="useSearchOnType" color="grey-8" name="o_search" />
-                <qas-btn v-else color="grey-9" flat icon="o_search" padding="0" @click="filter()" />
-              </template>
-
-              <template #append>
-                <qas-btn v-if="hasSearch" class="q-mr-sm" color="grey-9" flat icon="o_clear" padding="0" size="sm" @click="clearSearch" />
-
-                <qas-btn v-if="useFilterButton" :color="filterButtonColor" data-cy="filters-btn" flat icon="o_tune" padding="0">
-                  <q-menu anchor="center right" class="full-width" max-width="270px" self="top right">
-                    <div v-if="isFetching" class="q-pa-xl text-center">
-                      <q-spinner color="grey" size="2em" />
-                    </div>
-
-                    <div v-else-if="hasFetchError" class="q-pa-xl text-center">
-                      <q-icon color="negative" name="o_warning" size="2em" />
-                    </div>
-
-                    <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="filter()">
-                      <div v-for="(field, index) in fields" :key="index">
-                        <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" :field="field" v-bind="fieldsProps[field.name]" />
+            <div class="qas-filters__input-content">
+              <qas-input v-model="search" class="bg-white q-px-sm rounded-borders-sm shadow-2" data-cy="filters-search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" :outlined="false" :placeholder="searchPlaceholder" type="search">
+                <template #prepend>
+                  <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
+                  <qas-btn v-else color="grey-9" flat icon="sym_r_search" padding="0" @click="filter()" />
+                </template>
+
+                <template #append>
+                  <qas-btn v-if="hasSearch" class="q-mr-sm" color="grey-9" flat icon="sym_r_clear" padding="0" size="sm" @click="clearSearch" />
+
+                  <qas-btn v-if="useFilterButton" :color="filterButtonColor" data-cy="filters-btn" flat icon="sym_r_tune" padding="0">
+                    <q-menu anchor="center right" class="full-width" max-width="270px" self="top right">
+                      <div v-if="isFetching" class="q-pa-xl text-center">
+                        <q-spinner color="grey" size="2em" />
                       </div>
 
-                      <div class="q-col-gutter-x-md q-mt-xl row">
-                        <div class="col-6">
-                          <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" outline size="12px" @click="clearFilters" />
+                      <div v-else-if="hasFetchError" class="q-pa-xl text-center">
+                        <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="filter()">
+                        <div v-for="(field, index) in fields" :key="index">
+                          <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" :field="field" v-bind="fieldsProps[field.name]" />
                         </div>
 
-                        <div class="col-6">
-                          <qas-btn class="full-width" color="primary" data-cy="filters-submit-btn" label="Filtrar" size="12px" type="submit" />
+                        <div class="q-col-gutter-x-md q-mt-xl row">
+                          <div class="col-6">
+                            <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" outline size="12px" @click="clearFilters" />
+                          </div>
+
+                          <div class="col-6">
+                            <qas-btn class="full-width" color="primary" data-cy="filters-submit-btn" label="Filtrar" size="12px" type="submit" />
+                          </div>
                         </div>
-                      </div>
-                    </q-form>
-                  </q-menu>
-                </qas-btn>
-              </template>
-            </qas-input>
+                      </q-form>
+                    </q-menu>
+                  </qas-btn>
+                </template>
+              </qas-input>
+            </div>
           </q-form>
         </slot>
       </div>
@@ -53,7 +55,7 @@
 
     <div v-if="hasChip" class="q-mt-md">
       <!-- TODO rever com novo estilo -->
-      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="white" :data-cy="`filters-${filterItem.value}-chip`" dense icon-remove="o_close" removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ getChipValue(filterItem.value) }}</q-chip>
+      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="white" :data-cy="`filters-${filterItem.value}-chip`" dense icon-remove="sym_r_close" removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ getChipValue(filterItem.value) }}</q-chip>
     </div>
 
     <slot :context="mx_context" :filter="filter" :filters="activeFilters" :remove-filter="removeFilter" />
@@ -162,7 +164,7 @@ export default {
     },
 
     debounce () {
-      return this.useSearchOnType ? '800' : ''
+      return this.useSearchOnType ? '1200' : ''
     },
 
     fields () {
@@ -225,6 +227,7 @@ export default {
   created () {
     this.fetchFilters()
     this.watchOnceFields()
+    this.handleSearchModelOnCreate()
   },
 
   methods: {
@@ -322,8 +325,9 @@ export default {
     },
 
     updateValues () {
-      const { filters, search } = this.mx_context
-      this.search = search || ''
+      this.setSearch()
+
+      const { filters } = this.mx_context
 
       for (const key in filters) {
         this.filters[key] = parseValue(this.normalizeValues(filters[key], this.fields[key]?.multiple))
@@ -343,6 +347,15 @@ export default {
           watchOnce()
         }
       })
+    },
+
+    handleSearchModelOnCreate () {
+      !this.useFilterButton && this.setSearch()
+    },
+
+    setSearch () {
+      const { search } = this.mx_context
+      this.search = search || ''
     }
   }
 }
@@ -351,41 +364,43 @@ export default {
 <style lang="scss">
 // TODO rever
 .qas-filters {
-  .q-field::before {
-    border: 2px solid transparent;
-    border-radius: 4px;
-    bottom: 0;
-    content: '';
-    left: 0;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: border-color var(--qas-generic-transition);
-  }
+  &__input-content {
+    .q-field {
+      &::before {
+        border: 2px solid transparent;
+        border-radius: var(--qas-generic-border-radius);
+        bottom: 0;
+        content: '';
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transition: border-color var(--qas-generic-transition);
+      }
 
-  .q-field--focused::before {
-    border-color: var(--q-primary);
-    color: var(--q-primary);
-  }
+      &--dense .q-field__prepend {
+        padding-right: var(--qas-spacing-xs);
+      }
 
-  .q-field--dense .q-field__prepend {
-    padding-right: var(--qas-spacing-xs);
-  }
+      &--dense .q-field__append {
+        padding-left: var(--qas-spacing-sm);
+      }
 
-  .q-field--dense .q-field__append {
-    padding-left: var(--qas-spacing-sm);
-  }
+      &--focused::before {
+        border-color: var(--q-primary);
+        color: var(--q-primary);
+      }
 
-  &__input {
-    .q-field__control::before,
-    .q-field__control::after {
-      display: none;
-    }
+      &__control::after,
+      &__control::before {
+        display: none !important;
+      }
 
-    .q-field__native {
-      padding-bottom: var(--qas-spacing-sm);
-      padding-top: var(--qas-spacing-sm);
+      &__native {
+        padding-bottom: var(--qas-spacing-sm);
+        padding-top: var(--qas-spacing-sm);
+      }
     }
   }
 }

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

@@ -150,7 +150,6 @@ export default {
 
       defaultDialogProps: {
         card: {
-          title: 'Atenção!',
           description: 'Você está deixando a página e suas alterações serão perdidas. Tem certeza que deseja sair sem salvar?'
         },
 

package/src/components/gallery/QasGallery.vue

@@ -14,7 +14,7 @@
             <div v-if="useDestroy">
               <slot :destroy="onDestroy" :image="image" :index="index" name="destroy">
                 <qas-btn color="grey-9" dense :disabled="isDestroyDisabled(image)" flat round size="sm" @click="onDestroy(image, index)">
-                  <q-icon name="o_delete" size="xs" />
+                  <q-icon name="sym_r_delete" size="xs" />
                 </qas-btn>
               </slot>
             </div>
@@ -58,12 +58,12 @@ export default {
   props: {
     carouselNextIcon: {
       type: String,
-      default: 'o_chevron_right'
+      default: 'sym_r_chevron_right'
     },
 
     carouselPreviousIcon: {
       type: String,
-      default: 'o_chevron_left'
+      default: 'sym_r_chevron_left'
     },
 
     initialSize: {

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

@@ -2,15 +2,15 @@
   <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 dense flat icon="o_close" rounded @click="close" />
+        <qas-btn v-close-popup dense flat icon="sym_r_close" rounded @click="close" />
       </div>
     </template>
 
     <template #description>
-      <q-carousel v-model="imageIndexModel" animated :arrows="!$qas.screen.isSmall" control-text-color="primary" data-cy="gallery-carousel" :fullscreen="$qas.screen.isSmall" :height="carouselImageHeight" next-icon="o_chevron_right" prev-icon="o_chevron_left" swipeable :thumbnails="!isSingleImage">
+      <q-carousel v-model="imageIndexModel" animated :arrows="!$qas.screen.isSmall" control-text-color="primary" data-cy="gallery-carousel" :fullscreen="$qas.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 images" :key="index" class="bg-no-repeat bg-size-contain" :data-cy="`gallery-carousel-slide-${index}`" :img-src="image.url" :name="index">
           <div v-if="$qas.screen.isSmall" class="full-width justify-end row">
-            <qas-btn dense flat icon="o_close" @click="close" />
+            <qas-btn dense flat icon="sym_r_close" @click="close" />
           </div>
         </q-carousel-slide>
       </q-carousel>

package/src/components/header-actions/QasHeaderActions.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="items-center justify-between no-wrap q-col-gutter-x-md q-mb-xl row text-body1 text-grey-8">
+    <div :class="leftClass">
+      <slot name="left">
+        {{ text }}
+      </slot>
+    </div>
+
+    <div v-if="hasRightSide" class="col-3 col-md-3 col-sm-4 justify-end row">
+      <slot name="right">
+        <qas-actions-menu v-if="hasDefaultActionsMenu" v-bind="actionsMenuProps" />
+
+        <qas-btn v-if="hasDefaultButton" :use-label-on-small-screen="false" v-bind="buttonProps" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QasHeaderActions',
+
+  props: {
+    actionsMenuProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    buttonProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    text: {
+      type: String,
+      default: ''
+    }
+  },
+
+  computed: {
+    hasDefaultButton () {
+      return !!Object.keys(this.buttonProps).length
+    },
+
+    hasDefaultActionsMenu () {
+      return !!Object.keys(this.actionsMenuProps).length
+    },
+
+    hasRightSlot () {
+      return !!this.$slots.right
+    },
+
+    hasRightSide () {
+      return this.hasRightSlot || this.hasDefaultActionsMenu || this.hasDefaultButton
+    },
+
+    leftClass () {
+      return this.hasRightSide ? 'col-9 col-md-9 col-sm-8' : 'col-12'
+    }
+  }
+}
+</script>

package/src/components/header-actions/QasHeaderActions.yml

@@ -0,0 +1,26 @@
+type: component
+
+meta:
+  desc: Componente para cabeçalho usado com alguma descrição e ação.
+
+props:
+  actions-menu-props:
+    desc: Propriedades do QasActionsMenu.
+    default: {}
+    type: Object
+
+  button-props:
+    desc: Propriedades do QasBtn.
+    default: {}
+    type: Object
+
+  text:
+    desc: Descrição da seção a esquerda.
+    type: String
+
+slots:
+  left:
+    desc: slot para acessar seção da esquerda (descrição).
+
+  right:
+    desc: slot para acessar seção da direita (ação).