@bildvitta/quasar-ui-asteroid 3.5.0-beta.11 → 3.5.0-beta.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.5.0-beta.11",
+  "version": "3.5.0-beta.12",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/actions-menu/QasActionsMenu.vue

@@ -34,7 +34,7 @@ export default {
 
   props: {
     icon: {
-      default: 'o_more_vert',
+      default: 'sym_r_more_vert',
       type: String
     },
 
@@ -55,7 +55,7 @@ export default {
 
     deleteIcon: {
       type: String,
-      default: 'o_delete'
+      default: 'sym_r_delete'
     },
 
     deleteProps: {
@@ -64,7 +64,6 @@ export default {
     },
 
     useLabelOnSmallScreen: {
-      default: true,
       type: Boolean
     }
   },

package/src/components/actions-menu/QasActionsMenu.yml

@@ -6,7 +6,7 @@ meta:
 props:
   delete-icon:
     desc: Ícone do botão de deletar.
-    default: o_delete
+    default: sym_r_delete
     type: String
 
   delete-label:
@@ -21,7 +21,7 @@ props:
 
   icon:
     desc: Ícone do botão.
-    default: o_more_vert
+    default: sym_r_more_vert
     type: String
     examples: [start, end, between, around, center]
 
@@ -32,7 +32,7 @@ props:
     examples: [
       "{
         delete: {
-          icon: 'o_visibility',
+          icon: 'sym_r_visibility',
           label: 'Visualizar',
           handler: () => alert('handler ativado')
         }
@@ -56,7 +56,7 @@ slots:
         examples: [
           "
           {
-            icon: 'o_delete',
+            icon: 'sym_r_delete',
             label: 'Delete',
             }
           "

package/src/components/alert/QasAlert.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="model" class="bg-white q-pa-lg qas-alert relative-position rounded-borders" :class="classes">
-    <qas-btn class="absolute-top-right q-mr-md q-mt-sm" :color="color" dense flat icon="o_close" rounded @click="close" />
+    <qas-btn class="absolute-top-right q-mr-md q-mt-sm" :color="color" dense flat icon="sym_r_close" rounded @click="close" />
 
     <div class="q-gutter-md q-mr-lg">
       <slot name="header">

package/src/components/app-bar/QasAppBar.vue

@@ -1,7 +1,7 @@
 <template>
   <q-header class="qas-app-bar shadow-2" height-hint="56">
     <q-toolbar class="bg-white qas-app-bar__toolbar text-grey-9">
-      <qas-btn color="grey-7" dense flat icon="o_menu" round @click="toggleMenuDrawer" />
+      <qas-btn color="grey-7" dense flat icon="sym_r_menu" round @click="toggleMenuDrawer" />
 
       <q-toolbar-title>
         <router-link class="flex items-center no-wrap text-no-decoration" :to="rootRoute">

package/src/components/app-user/QasAppUser.vue

@@ -20,7 +20,7 @@
         <q-list class="q-mt-sm">
           <q-item v-close-popup :active="false" class="qas-app-user__menu-item" clickable :to="user.to">
             <q-item-section avatar>
-              <q-icon name="o_person" size="20px" />
+              <q-icon name="sym_r_person" size="20px" />
             </q-item-section>
 
             <q-item-section>Editar</q-item-section>
@@ -28,7 +28,7 @@
 
           <q-item v-if="hasNotifications" v-close-popup class="qas-app-user__menu-item" clickable>
             <q-item-section avatar>
-              <q-icon name="o_notifications" size="20px" />
+              <q-icon name="sym_r_notifications" size="20px" />
             </q-item-section>
 
             <q-item-section>Notificações</q-item-section>
@@ -40,7 +40,7 @@
 
           <q-item v-close-popup class="qas-app-user__menu-item" clickable @click="signOut">
             <q-item-section avatar>
-              <q-icon name="o_logout" size="20px" />
+              <q-icon name="sym_r_logout" size="20px" />
             </q-item-section>
 
             <q-item-section>Sair</q-item-section>

package/src/components/avatar/QasAvatar.vue

@@ -25,7 +25,7 @@ export default {
     },
 
     icon: {
-      default: 'o_error',
+      default: 'sym_r_error',
       type: String
     },
 

package/src/components/avatar/QasAvatar.yml

@@ -18,7 +18,7 @@ props:
 
   icon:
     desc: Ícone de fundo do avatar que vai aparecer caso não tenha imagem nem título.
-    default: o_error
+    default: sym_r_error
     type: String
 
   image:

package/src/components/card/QasCard.vue

@@ -3,7 +3,7 @@
     <q-card class="border-radius-lg column full-height overflow-hidden" :class="cardClasses">
       <header v-if="useHeader" class="overflow-hidden relative-position w-full">
         <slot name="header">
-          <q-carousel v-model="slideImage" animated class="cursor-pointer" height="205px" infinite :navigation="hasImages" navigation-icon="o_fiber_manual_record" swipeable>
+          <q-carousel v-model="slideImage" animated class="cursor-pointer" height="205px" infinite :navigation="hasImages" navigation-icon="sym_r_fiber_manual_record" swipeable>
             <template #navigation-icon="{ active, btnProps, onClick }">
               <qas-btn color="white" dense flat :icon="getNavigationIcon(active, btnProps)" round size="sm" @click="onClick" />
             </template>
@@ -106,7 +106,7 @@ export default {
 
   methods: {
     getNavigationIcon (active, { icon }) {
-      return active ? 'o_radio_button_checked' : icon
+      return active ? 'sym_r_radio_button_checked' : icon
     }
   }
 }

package/src/components/copy/QasCopy.vue

@@ -16,7 +16,7 @@ export default {
 
   props: {
     icon: {
-      default: 'o_file_copy',
+      default: 'sym_r_file_copy',
       type: String
     },
 

package/src/components/copy/QasCopy.yml

@@ -7,7 +7,7 @@ props:
   icon:
     desc: Ícone para mostrar no botão.
     type: String
-    default: o_file_copy
+    default: sym_r_file_copy
 
   text:
     desc: Texto a ser copiado.

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

@@ -1,13 +1,13 @@
 <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">
+      <q-icon v-if="!useTimeOnly" class="cursor-pointer" name="sym_r_event">
         <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-popup-proxy>
       </q-icon>
 
-      <q-icon v-if="!useDateOnly" class="cursor-pointer q-ml-md" name="o_access_time">
+      <q-icon v-if="!useDateOnly" class="cursor-pointer q-ml-md" name="sym_r_access_time">
         <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-popup-proxy>
@@ -69,6 +69,9 @@ export default {
   data () {
     return {
       currentValue: '',
+      error: false,
+      errorMessage: '',
+      hasInvalidDate: false,
       lastValue: ''
     }
   },
@@ -78,6 +81,8 @@ export default {
       const { modelValue, ...attributes } = this.$attrs
 
       return {
+        error: this.error,
+        errorMessage: this.errorMessage,
         ...attributes,
         mask: this.mask
       }
@@ -131,6 +136,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 +161,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 +185,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/dialog/QasDialog.vue

@@ -5,7 +5,7 @@
         <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 />
+            <qas-btn v-if="useCloseButton" v-close-popup dense flat icon="sym_r_close" rounded />
           </div>
         </slot>
       </q-card-section>

package/src/components/filters/QasFilters.vue

@@ -6,21 +6,21 @@
           <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()" />
+                <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="o_clear" padding="0" size="sm" @click="clearSearch" />
+                <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="o_tune" padding="0">
+                <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 v-else-if="hasFetchError" class="q-pa-xl text-center">
-                      <q-icon color="negative" name="o_warning" size="2em" />
+                      <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()">
@@ -53,7 +53,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 +162,7 @@ export default {
     },
 
     debounce () {
-      return this.useSearchOnType ? '800' : ''
+      return this.useSearchOnType ? '1200' : ''
     },
 
     fields () {

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).

package/src/components/list-items/QasListItems.vue

@@ -34,7 +34,7 @@ export default {
 
   props: {
     iconProps: {
-      default: () => ({ color: 'primary', name: 'o_chevron_right' }),
+      default: () => ({ color: 'primary', name: 'sym_r_chevron_right' }),
       type: Object
     },
 

package/src/components/list-items/QasListItems.yml

@@ -6,7 +6,7 @@ meta:
 props:
   icon-props:
     desc: Props do [QIcon](https://quasar.dev/vue-components/icon#introduction)
-    default: { color: 'primary', name: 'o_chevron_right' }
+    default: { color: 'primary', name: 'sym_r_chevron_right' }
     type: Object
 
   list:

package/src/components/nested-fields/QasNestedFields.vue

@@ -48,12 +48,12 @@
             </div>
 
             <div class="col-auto">
-              <qas-btn color="dark" flat icon="o_add_circle_outline" round />
+              <qas-btn color="dark" flat icon="sym_r_add_circle_outline" round />
             </div>
           </div>
 
           <div v-else class="text-left">
-            <qas-btn class="q-px-sm" color="dark" flat icon="o_add" @click="add()">{{ addInputLabel }}</qas-btn>
+            <qas-btn class="q-px-sm" color="dark" flat icon="sym_r_add" @click="add()">{{ addInputLabel }}</qas-btn>
           </div>
         </slot>
       </div>
@@ -107,7 +107,7 @@ export default {
       default: () => {
         return {
           label: 'Excluir',
-          icon: 'o_delete',
+          icon: 'sym_r_delete',
           flat: true,
           dense: true
         }
@@ -119,7 +119,7 @@ export default {
       default: () => {
         return {
           label: 'Duplicar',
-          icon: 'o_content_copy',
+          icon: 'sym_r_content_copy',
           flat: true,
           useLabelOnSmallScreen: false,
           dense: true

package/src/components/nested-fields/QasNestedFields.yml

@@ -21,13 +21,13 @@ props:
 
   button-destroy-props:
     desc: Props do botão de excluir linha contendo os campos.
-    default: "{ label: 'Excluir', icon: 'o_delete', flat: true, dense: true }"
+    default: "{ label: 'Excluir', icon: 'sym_r_delete', flat: true, dense: true }"
     debugger: true
     type: Object
 
   button-duplicate-props:
     desc: Props do botão de duplicar linha contendo os campos.
-    default: "{ label: 'Duplicar', o_content_copy, flat: true, dense: true, useLabelOnSmallScreen: false }"
+    default: "{ label: 'Duplicar', sym_r_content_copy, flat: true, dense: true, useLabelOnSmallScreen: false }"
     debugger: true
     type: Object