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

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/base.scss

@@ -1,3 +1,11 @@
 body {
   background-color: $background-color;
 }
+
+.material-symbols-rounded {
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 300,
+    'GRAD' 0,
+    'opsz' 24;
+}

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;
@@ -21,11 +25,12 @@
     }
   }
 
-  &--clickable {
+  &--clickable:not(&--active) {
+    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/mixins/index.scss

@@ -1 +1,2 @@
 @import './set-brand';
+@import './set-typography';

package/src/css/mixins/set-typography.scss

@@ -0,0 +1,8 @@
+@use 'sass:map';
+
+@mixin set-typography($name, $important: false) {
+  font-size: if($important, map.get($name, 'size') !important, map.get($name, 'size'));
+  font-weight: if($important, map.get($name, 'weight') !important, map.get($name, 'weight'));
+  letter-spacing: if($important, map.get($name, 'letter-spacing') !important, map.get($name, 'letter-spacing'));
+  line-height: if($important, map.get($name, 'line-height') !important, map.get($name, 'line-height'));
+}

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/css/variables/typography.scss

@@ -99,7 +99,7 @@ $caption: (
   size: 0.75rem,
   line-height: 1.5rem,
   letter-spacing: 0,
-  weight: 600
+  weight: 400
 );
 
 $headings: (

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/plugins/notify-error/NotifyError.js

@@ -1,7 +1,7 @@
 import { Notify } from 'quasar'
 import notifyConfig from '../../shared/notify-config.js'
 
-Notify.registerType('error', { icon: 'o_cancel', ...notifyConfig })
+Notify.registerType('error', { icon: 'sym_r_cancel', ...notifyConfig })
 
 export default (message, caption) => {
   Notify.create({

package/src/plugins/notify-success/NotifySuccess.js

@@ -1,7 +1,7 @@
 import { Notify } from 'quasar'
 import notifyConfig from '../../shared/notify-config.js'
 
-Notify.registerType('success', { icon: 'o_check_circle', ...notifyConfig })
+Notify.registerType('success', { icon: 'sym_r_check_circle', ...notifyConfig })
 
 export default (message, caption) => {
   Notify.create({

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

@@ -22,6 +22,7 @@ import QasFormGenerator from './components/form-generator/QasFormGenerator.vue'
 import QasFormView from './components/form-view/QasFormView.vue'
 import QasGallery from './components/gallery/QasGallery.vue'
 import QasGridGenerator from './components/grid-generator/QasGridGenerator.vue'
+import QasHeaderActions from './components/header-actions/QasHeaderActions.vue'
 import QasInput from './components/input/QasInput.vue'
 import QasLabel from './components/label/QasLabel.vue'
 import QasLayout from './components/layout/QasLayout.vue'
@@ -50,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'
@@ -95,6 +97,7 @@ function install (app) {
   app.component('QasFormView', QasFormView)
   app.component('QasGallery', QasGallery)
   app.component('QasGridGenerator', QasGridGenerator)
+  app.component('QasHeaderActions', QasHeaderActions)
   app.component('QasInput', QasInput)
   app.component('QasLabel', QasLabel)
   app.component('QasLayout', QasLayout)
@@ -123,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 } })
 
@@ -169,6 +173,7 @@ export {
   QasFormView,
   QasGallery,
   QasGridGenerator,
+  QasHeaderActions,
   QasInput,
   QasLabel,
   QasLayout,
@@ -197,6 +202,7 @@ export {
   QasTransfer,
   QasTreeGenerator,
   QasUploader,
+  QasWelcome,
 
   // plugins
   Dialog,