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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.5.0-beta.12",
+  "version": "3.5.0-beta.14",
   "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: 'sym_r_more_vert',
+    color: {
+      default: '',
       type: String
     },
 
-    label: {
-      default: 'Opções',
+    icon: {
+      default: 'sym_r_more_vert',
       type: String
     },
 
@@ -63,6 +67,11 @@ export default {
       type: Object
     },
 
+    useLabel: {
+      default: true,
+      type: Boolean
+    },
+
     useLabelOnSmallScreen: {
       type: Boolean
     }
@@ -88,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,6 +130,14 @@ export default {
 
     hasMoreThanOneAction () {
       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,6 +4,10 @@ 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: sym_r_delete
@@ -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"'

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

@@ -4,7 +4,7 @@
       <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="sym_r_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="sym_r_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="sym_r_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/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="sym_r_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/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/numeric-input/QasNumericInput.vue

@@ -117,6 +117,15 @@ export default {
       options.decimalPlaces = this.decimalPlaces
     }
 
+    if (this.mode === 'money') {
+      // TODO
+      /*
+      * adicionado manualmente por conta do espaçamento, neste formato não esta preparado para
+      * outras linguas, teria que adaptar no futuro, o que não é um problema no momento
+      */
+      options.currencySymbol = 'R$ '
+    }
+
     Object.assign(options, this.autonumericOptions)
 
     this.$nextTick(() => {

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <qas-uploader ref="uploader" v-model="model" :label="uploadLabel" :readonly="readonly" :use-resize="false" v-bind="$attrs">
+    <qas-uploader ref="uploader" v-model="model" :label="uploadLabel" v-bind="$attrs" :readonly="readonly" :use-resize="false">
       <template #header="{ scope }">
         <div class="cursor-pointer flex flex-center full-width justify-between no-border no-wrap q-gutter-xs text-white transparent" :class="headerClass" @click="openDialog">
           <div class="col column items-start justify-center">
@@ -25,11 +25,6 @@
           <qas-signature-pad ref="signaturePadModal" v-model:empty="isEmpty" :height="signaturePadHeight" />
         </div>
       </template>
-
-      <template #actions>
-        <qas-btn class="full-width" color="primary" :disable="isEmpty" label="Salvar" no-caps @click="getSignatureData" />
-        <qas-btn class="full-width q-mt-sm" color="primary" flat label="Cancelar" no-caps @click="closeSignature" />
-      </template>
     </qas-dialog>
   </div>
 </template>
@@ -111,7 +106,11 @@ export default {
     defaultDialogProps () {
       return {
         maxWidth: '620px',
-        ...this.dialogProps
+        ...this.dialogProps,
+        ok: {
+          label: 'Salvar',
+          onClick: () => this.getSignatureData()
+        }
       }
     },
 

package/src/components/text-truncate/QasTextTruncate.vue

@@ -81,7 +81,6 @@ export default {
       return {
         cancel: false,
         ok: false,
-        useCloseButton: true,
         ...this.dialogProps,
         card: {
           title: this.dialogTitle,

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

@@ -169,7 +169,6 @@ export default {
     destroyDialogConfig () {
       return {
         card: {
-          title: 'Excluir ramo da árvore?',
           description: 'Todas as informações serão perdidas. Deseja realmente continuar?'
         },
         ok: {

package/src/components/welcome/QasWelcome.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="q-mb-xl qas-welcome text-left">
+    <h3 class="text-grey-9 text-h3">
+      {{ welcomeMessage }}<span v-if="firstName">, {{ firstName }}</span>
+    </h3>
+
+    <div class="text-caption text-grey-8">{{ currentDay }}</div>
+
+    <div v-if="hasShortcuts">
+      <div class="q-mb-md q-mt-md text-grey-9 text-subtitle2">Atalhos</div>
+
+      <div class="qas-welcome__container">
+        <div ref="scrollArea" class="row" :class="contentClasses">
+          <div v-for="(shortcut, index) in shortcuts" :key="index" :class="shortcutClasses">
+            <pv-welcome-shortcut-card :shortcut="shortcut" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PvWelcomeShortcutCard from './private/PvWelcomeShortcutCard.vue'
+
+import { date } from 'quasar'
+import dateConfig from '../../shared/date-config.js'
+
+export default {
+  name: 'QasWelcome',
+
+  components: {
+    PvWelcomeShortcutCard
+  },
+
+  props: {
+    name: {
+      default: '',
+      type: String
+    },
+
+    shortcuts: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  computed: {
+    contentClasses () {
+      return this.$qas.screen.isSmall
+        ? 'no-wrap overflow-hidden-y q-gutter-x-md q-pb-md q-pt-xs qas-welcome__scroll-area'
+        : 'q-col-gutter-md'
+    },
+
+    currentDay () {
+      const timeStamp = Date.now()
+      const { daysList, monthsList } = dateConfig
+
+      // exemplo: Quarta-feira, 11 de janeiro de 2023
+      return date.formatDate(
+        timeStamp, 'dddd, DDD [de] MMMM [de] YYYY', { days: daysList, months: monthsList }
+      )
+    },
+
+    firstName () {
+      if (!this.name) return ''
+
+      return this.name.split(' ')?.[0]
+    },
+
+    hasShortcuts () {
+      return !!this.shortcuts.length
+    },
+
+    shortcutClasses () {
+      return !this.$qas.screen.isSmall && 'col-3 col-lg-2'
+    },
+
+    welcomeMessage () {
+      const today = new Date()
+      const time = date.formatDate(today, 'HH:mm')
+
+      if (time >= '05:00' && time < '11:59') return 'Bom dia'
+
+      if (time >= '12:00' && time < '18:59') return 'Boa tarde'
+
+      return 'Boa noite'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.qas-welcome {
+  &__scroll-area {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    > *:last-child {
+      margin-right: var(--qas-spacing-sm);
+    }
+  }
+}
+</style>

package/src/components/welcome/QasWelcome.yml

@@ -0,0 +1,14 @@
+type: component
+
+meta:
+  desc: Componente de boas-vindas para ser usado na Home dos sistemas.
+
+props:
+  name:
+    desc: Nome do usuário a ser mostrado na tela.
+    type: String
+
+  shortcuts:
+    desc: Lista de cards de atalhos.
+    default: []
+    type: Array

package/src/components/welcome/private/PvWelcomeShortcutCard.vue

@@ -0,0 +1,58 @@
+<template>
+  <component :is="component.is" v-bind="component.props" class="bg-white column pv-welcome-shortcut-card q-pa-md rounded-borders shadow-2 text-no-decoration text-primary">
+    <q-icon class="q-pr-xs" :name="shortcut.icon" size="md" />
+
+    <div class="q-mt-md text-subtitle1">
+      {{ shortcut.title }}
+    </div>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'PvWelcomeShortcutCard',
+
+  props: {
+    shortcut: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  computed: {
+    isExternal () {
+      return !!this.shortcut.externalLink
+    },
+
+    component () {
+      return {
+        is: this.isExternal ? 'a' : 'router-link',
+        props: {
+          ...(!this.isExternal && { to: this.shortcut.to }),
+          ...(this.isExternal && { href: this.shortcut.externalLink })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.pv-welcome-shortcut-card {
+  border: 2px solid transparent;
+  display: block;
+  height: 100%;
+  min-height: 124px;
+  transition: border-color var(--qas-generic-transition), color var(--qas-generic-transition);
+  word-wrap: break-word;
+
+  &:hover {
+    border-color: var(--q-primary-contrast);
+    color: var(--q-primary-contrast) !important;
+  }
+
+  @media (max-width: $breakpoint-xs) {
+    min-width: 154px;
+  }
+}
+</style>

package/src/css/components/item.scss

@@ -5,6 +5,10 @@
     font-weight: 600;
   }
 
+  &:not(&--clickable) {
+    color: $grey-8;
+  }
+
   &.q-router-link--active {
     background-color: transparent !important;
     font-weight: 600;
@@ -22,10 +26,11 @@
   }
 
   &--clickable {
+    color: $grey-9;
     transition: color 300ms;
 
-    &:hover {
-      color: var(--q-primary);
+    &:not(&.q-router-link--active):hover {
+      color: var(--q-primary-contrast);
     }
   }
 

package/src/css/utils/index.scss

@@ -7,4 +7,3 @@
 @import './opacity';
 @import './text';
 @import './unset';
-@import './shadow';

package/src/css/variables/index.scss

@@ -1,3 +1,4 @@
 @import './button';
+@import './shadow';
 @import './spacing';
 @import './typography';

package/src/css/variables/shadow.scss

@@ -0,0 +1,3 @@
+$shadow-2: 0 4px 8px $accent;
+
+$shadows: ($shadow-2);

package/src/css/variables/spacing.scss

@@ -47,6 +47,21 @@ $spaces: (
   xl: $space-xl
 );
 
+$flex-gutter-xs : map.get($space-xs, 'x');
+$flex-gutter-sm : map.get($space-sm, 'x');
+$flex-gutter-md : map.get($space-md, 'x');
+$flex-gutter-lg : map.get($space-lg, 'x');
+$flex-gutter-xl : map.get($space-xl, 'x');
+
+$flex-gutter: (
+  none: 0,
+  xs: $flex-gutter-xs,
+  sm: $flex-gutter-sm,
+  md: $flex-gutter-md,
+  lg: $flex-gutter-lg,
+  xl: $flex-gutter-xl
+);
+
 :root {
   @each $key, $space in $spaces {
     --qas-spacing-#{$key}: #{map.get($space, 'x')};

package/src/mixins/delete.js

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

package/src/shared/date-config.js

@@ -0,0 +1,26 @@
+export default {
+  daysList: [
+    'Domingo',
+    'Segunda-feira',
+    'Terça-feira',
+    'Quarta-feira',
+    'Quinta-feira',
+    'Sexta-feira',
+    'Sábado'
+  ],
+
+  monthsList: [
+    'janeiro',
+    'fevereiro',
+    'março',
+    'abril',
+    'maio',
+    'junho',
+    'julho',
+    'agosto',
+    'setembro',
+    'outubro',
+    'novembro',
+    'dezembro'
+  ]
+}

package/src/vue-plugin.js

@@ -51,6 +51,7 @@ import QasTextTruncate from './components/text-truncate/QasTextTruncate.vue'
 import QasTransfer from './components/transfer/QasTransfer.vue'
 import QasTreeGenerator from './components/tree-generator/QasTreeGenerator.vue'
 import QasUploader from './components/uploader/QasUploader.vue'
+import QasWelcome from './components/welcome/QasWelcome.vue'
 
 import VueGoogleMaps from '@fawmi/vue-google-maps'
 import { Notify, Quasar, Dialog as QuasarDialog } from 'quasar'
@@ -125,6 +126,7 @@ function install (app) {
   app.component('QasTransfer', QasTransfer)
   app.component('QasTreeGenerator', QasTreeGenerator)
   app.component('QasUploader', QasUploader)
+  app.component('QasWelcome', QasWelcome)
 
   app.use(Quasar, { plugins: { Notify, QuasarDialog, Dialog } })
 
@@ -200,6 +202,7 @@ export {
   QasTransfer,
   QasTreeGenerator,
   QasUploader,
+  QasWelcome,
 
   // plugins
   Dialog,

package/src/css/utils/shadow.scss

@@ -1,4 +0,0 @@
-// TODO rever
-.shadow-2 {
-  box-shadow: 0 4px 8px $accent;
-}