@bildvitta/quasar-ui-asteroid 3.5.0-beta.8 → 3.5.0

package/package.json

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

package/src/components/actions/QasActions.vue

@@ -1,10 +1,10 @@
 <template>
-  <div :class="classes">
-    <div class="col-12 col-sm-auto">
+  <div class="qas-actions" :class="classes">
+    <div v-if="hasSecondarySlot" :class="columnClasses">
       <slot name="secondary" />
     </div>
 
-    <div class="col-12 col-sm-auto">
+    <div v-if="hasPrimarySlot" :class="columnClasses">
       <slot name="primary" />
     </div>
   </div>
@@ -22,9 +22,17 @@ export default {
     },
 
     gutter: {
-      default: 'md',
+      default: '',
       type: String,
-      validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      validator: value => !value || ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+    },
+
+    useFullWidth: {
+      type: Boolean
+    },
+
+    useEqualWidth: {
+      type: Boolean
     }
   },
 
@@ -32,9 +40,27 @@ export default {
     classes () {
       return [
         `justify-${this.align}`,
-        `q-col-gutter-${this.gutter}`,
+        `q-col-gutter-${this.defaultGutter}`,
         this.$qas.screen.isSmall ? 'column reverse' : 'row'
       ]
+    },
+
+    defaultGutter () {
+      return this.gutter || this.$qas.screen.isSmall ? 'md' : 'lg'
+    },
+
+    columnClasses () {
+      if (this.useEqualWidth) return 'col-12 col-sm-6'
+
+      return this.useFullWidth ? 'col-12' : 'col-12 col-sm-auto'
+    },
+
+    hasPrimarySlot () {
+      return !!this.$slots.primary
+    },
+
+    hasSecondarySlot () {
+      return !!this.$slots.secondary
     }
   }
 }

package/src/components/actions/QasActions.yml

@@ -12,10 +12,20 @@ props:
 
   gutter:
     desc: Espaçamento entre os elementos.
-    default: md
+    default: lg
     type: String
     examples: ['xs', 'sm', 'md', 'lg', 'xl']
 
+  use-full-width:
+    desc: Deixa as colunas 100%, com col-12.
+    default: false
+    type: Boolean
+
+  use-equal-width:
+    desc: Deixa as colunas 50% no desktop e 100% no mobile, col-12 col-sm-6.
+    default: false
+    type: Boolean
+
 slots:
   primary:
     desc: 'Slot para ação primaria (ex: botão de salvar), em telas menores que sm, se torna o primeiro elemento.'

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

@@ -16,6 +16,10 @@
           </slot>
         </q-list>
       </q-menu>
+
+      <q-tooltip v-if="hasTooltip" class="text-caption">
+        {{ tooltipLabel }}
+      </q-tooltip>
     </component>
   </div>
 </template>
@@ -33,13 +37,13 @@ export default {
   },
 
   props: {
-    icon: {
-      default: 'o_more_vert',
+    color: {
+      default: '',
       type: String
     },
 
-    label: {
-      default: 'Opções',
+    icon: {
+      default: 'sym_r_more_vert',
       type: String
     },
 
@@ -55,7 +59,7 @@ export default {
 
     deleteIcon: {
       type: String,
-      default: 'o_delete'
+      default: 'sym_r_delete'
     },
 
     deleteProps: {
@@ -63,9 +67,13 @@ export default {
       type: Object
     },
 
-    useLabelOnSmallScreen: {
+    useLabel: {
       default: true,
       type: Boolean
+    },
+
+    useLabelOnSmallScreen: {
+      type: Boolean
     }
   },
 
@@ -89,14 +97,15 @@ export default {
     component () {
       const props = {}
 
+      // TODO: solução do color é temporária até ser definido o novo QasBtn.
       if (this.hasMoreThanOneAction) {
-        props.label = 'Opções'
+        props.color = this.color || 'grey-9'
         props.iconRight = this.icon
-        props.textColor = 'dark'
+        props.label = this.useLabel ? 'Opções' : ''
       } else {
+        props.color = this.color || 'primary'
         props.icon = this.actions[this.firstItemKey]?.icon
-        props.label = this.actions[this.firstItemKey]?.label
-        props.color = 'primary'
+        props.label = this.useLabel ? this.tooltipLabel : ''
       }
 
       this.hasDelete && Object.assign(props, this.deleteProps)
@@ -120,7 +129,15 @@ export default {
     },
 
     hasMoreThanOneAction () {
-      return Object.keys(this.actions || {}).length > 1
+      return Object.keys(this.list || {}).length + Number(this.hasDelete) > 1
+    },
+
+    hasTooltip () {
+      return !this.hasMoreThanOneAction && !this.useLabel
+    },
+
+    tooltipLabel () {
+      return this.actions[this.firstItemKey]?.label
     }
   },
 

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

@@ -4,9 +4,13 @@ meta:
   desc: Componente para abrir um menu de ação a partir de um botão, muito utilizado em tela de edição.
 
 props:
+  color:
+    desc: Cor do ícone.
+    type: String
+
   delete-icon:
     desc: Ícone do botão de deletar.
-    default: o_delete
+    default: sym_r_delete
     type: String
 
   delete-label:
@@ -21,7 +25,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 +36,7 @@ props:
     examples: [
       "{
         delete: {
-          icon: 'o_visibility',
+          icon: 'sym_r_visibility',
           label: 'Visualizar',
           handler: () => alert('handler ativado')
         }
@@ -44,6 +48,11 @@ props:
     default: true
     type: Boolean
 
+  use-label:
+    desc: Habilita ou não o label no botão.
+    default: true
+    type: Boolean
+
 slots:
   '[nome-da-chave]':
     desc: 'Slot dinâmico gerado a partir das chaves dentro do objeto da prop "list"'
@@ -56,7 +65,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,10 +1,10 @@
 <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">
+        <router-link class="flex items-center no-wrap text-no-decoration" :class="routerLinkClass" :to="rootRoute">
           <img v-if="brand" :alt="title" class="qas-app-bar__brand" :src="brand">
           <span v-else class="ellipsis text-bold text-primary">{{ title }}</span>
           <q-badge v-if="hasDevelopmentBadge" class="q-ml-sm" color="red" :label="developmentBadgeLabel" />
@@ -97,6 +97,10 @@ export default {
 
     rootRoute () {
       return this.$router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
+    },
+
+    routerLinkClass () {
+      return this.$qas.screen.isSmall && 'justify-center'
     }
   },
 
@@ -119,7 +123,7 @@ export default {
   }
 
   &__brand {
-    height: 24px;
+    max-width: 164px;
   }
 }
 </style>

package/src/components/app-menu/QasAppMenu.vue

@@ -1,30 +1,36 @@
 <template>
-  <q-drawer v-model="model" :behavior="behavior" class="qas-app-menu" :width="280">
-    <div class="column full-height justify-between">
+  <q-drawer v-model="model" :behavior="behavior" :width="drawerWidth">
+    <div class="column full-height justify-between qas-app-menu">
       <div class="full-width">
         <!-- Brand -->
         <div v-if="!$qas.screen.untilLarge" class="q-pt-xl q-px-lg">
           <router-link class="block q-toolbar__title relative-position text-no-decoration" :to="rootRoute">
-            <img v-if="brand" :alt="title" class="full-width" :src="brand">
+            <img v-if="brand" :alt="title" class="qas-app-menu__brand" :src="brand">
             <span v-else class="ellipsis text-bold text-primary">{{ title }}</span>
             <q-badge v-if="hasDevelopmentBadge" color="red" floating :label="developmentBadgeLabel" />
           </router-link>
         </div>
 
         <!-- Module -->
-        <div v-if="displayModuleSection" class="q-mt-xl q-px-lg qas-app-menu__module">
-          <qas-select v-model="module" borderless class="q-py-xs qas-app-menu__select shadow-2" dense input-class="q-px-md" :options="defaultModules" :outlined="false" :use-search="false" @update:model-value="redirectHandler(currentModelOption)" />
+        <div v-if="displayModuleSection" class="items-center justify-between no-wrap q-mt-xl q-px-lg qas-app-menu__module row">
+          <div class="full-width">
+            <qas-select v-model="module" borderless class="q-py-xs qas-app-menu__select shadow-2" dense input-class="q-px-md" :options="defaultModules" :outlined="false" :use-search="false" @update:model-value="redirectHandler(currentModelOption)" />
+          </div>
+
+          <div v-if="$qas.screen.isSmall" class="q-ml-xl">
+            <qas-btn color="grey-9" dense flat icon="sym_r_close" rounded @click="closeDrawer" />
+          </div>
         </div>
 
         <!-- Menu -->
         <q-list v-if="items.length" class="q-mt-xl qas-app-menu__menu text-grey-9">
           <template v-for="(menuItem, index) in items">
-            <div v-if="hasChildren(menuItem)" :key="`children-${index}`">
-              <q-item class="items-center q-pb-none q-pt-md text-weight-bold">
+            <div v-if="hasChildren(menuItem)" :key="`children-${index}`" class="qas-app-menu__content">
+              <q-item class="items-center q-pb-none q-pt-md qas-app-menu__item qas-app-menu__item--label text-weight-bold">
                 {{ menuItem.label }}
               </q-item>
 
-              <q-item v-for="(menuChildItem, childIndex) in menuItem.children" :key="childIndex" :active="isActive(menuChildItem)" :to="getRouterRedirect(menuChildItem)">
+              <q-item v-for="(menuChildItem, childIndex) in menuItem.children" :key="childIndex" :active="isActive(menuChildItem)" class="qas-app-menu__children qas-app-menu__item qas-app-menu__item--children" :to="getRouterRedirect(menuChildItem)">
                 <q-item-section v-if="menuChildItem.icon" avatar>
                   <q-icon :name="menuChildItem.icon" />
                 </q-item-section>
@@ -35,7 +41,7 @@
               </q-item>
             </div>
 
-            <q-item v-else :key="index" :active="isActive(menuItem)" active-class="q-router-link--active" :to="getRouterRedirect(menuItem)">
+            <q-item v-else :key="index" :active="isActive(menuItem)" active-class="q-router-link--active" class="qas-app-menu__item" :to="getRouterRedirect(menuItem)">
               <q-item-section v-if="menuItem.icon" avatar>
                 <q-icon :name="menuItem.icon" />
               </q-item-section>
@@ -165,6 +171,10 @@ export default {
       return this.defaultModules.length
     },
 
+    drawerWidth () {
+      return this.$qas.screen.isSmall ? 320 : 280
+    },
+
     hasDevelopmentBadge () {
       return !!this.developmentBadgeLabel
     },
@@ -237,6 +247,10 @@ export default {
 
     signOut () {
       this.$emit('sign-out')
+    },
+
+    closeDrawer () {
+      this.$emit('update:modelValue', false)
     }
   }
 }
@@ -255,6 +269,11 @@ export default {
     }
   }
 
+  &__brand {
+    max-width: 208px;
+    width: 100%;
+  }
+
   &__menu .q-item {
     padding-left: var(--qas-spacing-lg);
   }
@@ -263,6 +282,32 @@ export default {
     border-radius: 4px;
   }
 
+  &__item {
+    &:not(&--label) + &:not(&--label) {
+      margin-top: var(--qas-spacing-sm);
+    }
+
+    &--label {
+      margin-bottom: var(--qas-spacing-md);
+      min-height: 0;
+      padding-top: 0;
+    }
+
+    &--children.q-item {
+      padding-left: calc(var(--qas-spacing-xl) + var(--qas-spacing-sm));
+
+      & + & {
+        margin-top: var(--qas-spacing-sm);
+      }
+    }
+  }
+
+  &__content + &__content,
+  &__item + &__content,
+  &__content + &__item {
+    margin-top: var(--qas-spacing-lg);
+  }
+
   // User
   .qas-app-user__data {
     line-height: 1.25;

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

@@ -17,10 +17,10 @@
         <div class="ellipsis qas-app-user__menu-name">{{ userName }}</div>
         <div class="ellipsis">{{ user.email }}</div>
 
-        <q-list class="q-mt-sm">
+        <q-list class="q-mt-md">
           <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" />
             </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" />
             </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" />
             </q-item-section>
 
             <q-item-section>Sair</q-item-section>
@@ -130,6 +130,10 @@ export default {
   &__menu-item {
     min-height: 36px;
     padding: 0;
+
+    & + & {
+      margin-top: var(--qas-spacing-sm);
+    }
   }
 
   @media (max-width: $breakpoint-xs) {

package/src/components/avatar/QasAvatar.vue

@@ -25,7 +25,7 @@ export default {
     },
 
     icon: {
-      default: 'o_error',
+      default: 'sym_r_error',
       type: String
     },
 
@@ -60,6 +60,14 @@ export default {
     },
 
     attributes () {
+      const {
+        rounded,
+        square,
+        fontSize,
+        textColor,
+        ...attributes
+      } = this.$attrs
+
       const colors = {
         primary: 'white',
         'secondary-contrast': 'primary'
@@ -68,7 +76,8 @@ export default {
       return {
         size: this.size,
         color: this.color,
-        textColor: colors[this.color]
+        textColor: colors[this.color],
+        ...attributes
       }
     }
   },

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/delete/QasDelete.vue

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