@bildvitta/quasar-ui-asteroid 3.11.0-beta.16 → 3.11.0-beta.18

package/package.json

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

package/src/assets/icon-loading.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#90a4ae" height="48" viewBox="0 -960 960 960" width="48"><path d="M480-80q-84 0-157-31t-127-85q-54-54-85-127T80-480q0-84 31-157t85-127q54-54 127-85t157-31q12 0 21 9t9 21q0 12-9 21t-21 9q-141 0-240.5 99.5T140-480q0 141 99.5 240.5T480-140q141 0 240.5-99.5T820-480q0-12 9-21t21-9q12 0 21 9t9 21q0 84-31 157t-85 127q-54 54-127 85T480-80Z"/></svg>

package/src/components/form-generator/QasFormGenerator.vue

@@ -3,6 +3,7 @@
     <div v-for="(fieldsetItem, fieldsetItemKey) in normalizedFields" :key="fieldsetItemKey" class="full-width">
       <slot v-if="fieldsetItem.label" :name="`legend-${fieldsetItemKey}`">
         <qas-label :label="fieldsetItem.label" />
+        <div v-if="fieldsetItem.description" class="q-mb-md text-body1 text-grey-8">{{ fieldsetItem.description }}</div>
       </slot>
 
       <div>
@@ -123,6 +124,7 @@ const normalizedFields = computed(() => {
 
     fields[fieldsetKey] = {
       label: fieldsetItem.label,
+      description: fieldsetItem.description,
       fields: { hidden: {}, visible: {} }
     }
 

package/src/components/form-generator/QasFormGenerator.yml

@@ -36,7 +36,7 @@ props:
     desc: Lista para agrupar elementos por rótulo (label).
     default: {}
     type: Object
-    examples: ["{ personalInformation: { label: 'Informações pessoais', fields: [name, email] } }"]
+    examples: ["{ personalInformation: { label: 'Informações pessoais', description: 'Descrição dos campos', fields: ['name', 'email'] } }"]
 
   fieldset-gutter:
     desc: Espaçamento entre rótulos (label).

package/src/components/page-header/QasPageHeader.vue

@@ -9,7 +9,7 @@
         <q-breadcrumbs v-if="useBreadcrumbs" class="text-caption" gutter="xs" separator-color="grey-8">
           <q-breadcrumbs-el v-if="useHomeIcon" class="qas-page-header__breadcrumbs-el text-grey-8" icon="sym_r_home" :to="homeRoute" />
 
-          <q-breadcrumbs-el v-for="(item, index) in normalizedBreadcrumbs" :key="index" class="qas-page-header__breadcrumbs-el" :label="item.label" :to="item.route" />
+          <q-breadcrumbs-el v-for="(item, index) in normalizedBreadcrumbs" :key="index" class="ellipsis inline-block qas-page-header__breadcrumbs-el" :label="item.label" :to="item.route" />
         </q-breadcrumbs>
       </div>
 
@@ -142,6 +142,7 @@ export default {
 <style lang="scss">
 .qas-page-header {
   &__breadcrumbs-el {
+    max-width: 180px;
     transition: color var(--qas-generic-transition);
 
     &.q-breadcrumbs__el:not(.q-router-link--exact-active):hover {

package/src/components/welcome/QasWelcome.vue

@@ -1,13 +1,21 @@
 <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="items-center justify-between row">
+      <div>
+        <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 class="text-caption text-grey-8">{{ currentDay }}</div>
+      </div>
+
+      <slot name="actions">
+        <qas-actions-menu v-if="hasActionsMenuProps" v-bind="actionsMenuProps" />
+      </slot>
+    </div>
 
     <div v-if="hasShortcuts">
-      <div class="q-mb-md q-mt-md text-grey-9 text-subtitle2">Atalhos</div>
+      <qas-label class="q-mt-lg" label="Atalhos" />
 
       <div class="qas-welcome__container">
         <div ref="scrollArea" class="row" :class="contentClasses">
@@ -34,6 +42,11 @@ export default {
   },
 
   props: {
+    actionsMenuProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     name: {
       default: '',
       type: String
@@ -68,6 +81,10 @@ export default {
       return this.name.split(' ')?.[0]
     },
 
+    hasActionsMenuProps () {
+      return !!Object.keys(this.actionsMenuProps).length
+    },
+
     hasShortcuts () {
       return !!this.shortcuts.length
     },

package/src/components/welcome/QasWelcome.yml

@@ -4,6 +4,11 @@ meta:
   desc: Componente de boas-vindas para ser usado na Home dos sistemas.
 
 props:
+  actions-menu-props:
+    desc: Propriedades repassadas para o QasActionsMenu.
+    default: {}
+    type: Object
+
   name:
     desc: Nome do usuário a ser mostrado na tela.
     type: String
@@ -12,3 +17,7 @@ props:
     desc: Lista de cards de atalhos.
     default: []
     type: Array
+
+slots:
+  actions:
+    desc: Slot para substituir o QasActionsMenu.

package/src/css/base/font-face.scss

@@ -0,0 +1,28 @@
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+.icons-is-loading {
+  .material-symbols-rounded {
+    position: relative;
+    color: transparent;
+
+    &::before {
+      content: '';
+      background-image: url('~@bildvitta/quasar-ui-asteroid/src/assets/icon-loading.svg');
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      animation: rotation 1s infinite linear;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+}

package/src/css/base/index.scss

@@ -0,0 +1 @@
+@import './font-face';

package/src/index.scss

@@ -19,6 +19,9 @@ $background-color: var(--qas-background-color);
 $generic-border-radius: var(--qas-generic-border-radius);
 $border-grey: var(--qas-border-grey);
 
+// base
+@import './css/base/index';
+
 // variables
 @import './css/variables/index';