@bildvitta/quasar-ui-asteroid 3.2.0-beta.0 → 3.2.0-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.2.0-beta.0",
+  "version": "3.2.0-beta.2",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",
@@ -35,7 +35,7 @@
     "autoprefixer": "^10.4.2",
     "core-js": "^3.20.2",
     "postcss": "^8.4.5",
-    "quasar": "^2.0.0",
+    "quasar": "^2.10.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.66.0",
     "rollup-plugin-local-resolve": "^1.0.7",

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

@@ -1,11 +1,11 @@
 <template>
   <q-header class="bg-white qas-app-bar shadow-2" height-hint="70">
-    <q-toolbar class="qas-app-bar__toolbar" color="bg-white">
+    <q-toolbar class="q-px-md qas-app-bar__toolbar" color="bg-white">
       <q-ajax-bar color="white" position="top" size="2px" />
 
-      <qas-btn color="grey-7" dense flat icon="o_menu" round @click="toggleMenuDrawer" />
+      <qas-btn v-if="$qas.screen.untilLarge" color="grey-7" dense flat icon="o_menu" round @click="toggleMenuDrawer" />
 
-      <q-toolbar-title class="flex">
+      <q-toolbar-title class="flex" :class="toolbarTitleClass">
         <div class="cursor-pointer" @click="goToRoot">
           <img v-if="brand" :alt="title" class="q-mr-sm qas-app-bar__brand" :src="brand">
           <span v-if="showTitle" class="text-bold text-grey-9 text-subtitle1 text-uppercase">{{ title }}</span>
@@ -22,23 +22,23 @@
       <div class="items-center no-wrap q-gutter-md row">
         <slot name="tools" />
 
-        <div v-if="hasUser" class="cursor-pointer items-center q-mr-sm qas-app-bar__user rounded-borders row text-grey-9" :title="userName">
-          <qas-avatar class="rounded-borders-left" color="white" dark :image="user.photo" rounded size="42px" text-color="primary" :title="userName" />
+        <div v-if="hasUser" class="cursor-pointer items-center qas-app-bar__user-content rounded-borders row text-grey-9" :title="userName">
+          <qas-avatar color="white" dark :image="user.photo" rounded size="42px" text-color="primary" :title="userName" />
 
-          <div class="q-px-sm qas-app-bar__user-data qs-lh-lg text-caption">
-            <div class="ellipsis">{{ userName }}</div>
-            <div class="ellipsis text-bold">{{ user.email }}</div>
+          <div class="q-ml-md qas-app-bar__user-data qs-lh-lg">
+            <div class="ellipsis q-mb-xs qas-app-bar__user-name">{{ userName }}</div>
+            <div class="ellipsis qas-app-bar__user-email">{{ user.email }}</div>
           </div>
 
-          <q-menu anchor="bottom end" class="shadow-2" max-height="400px" :offset="[0, 5]" self="top end">
+          <q-menu anchor="bottom end" class="shadow-2 text-grey-9" max-height="400px" :offset="[0, 5]" self="top end">
             <div class="qas-app-bar__user-menu">
               <div class="q-pa-lg text-center">
                 <button class="unset" @click="goToProfile">
                   <qas-avatar :image="user.photo" size="145px" :title="userName" />
                 </button>
 
-                <div class="ellipsis q-mt-lg qs-lh-sm text-bold text-subtitle1">{{ userName }}</div>
-                <div class="ellipsis q-mt-xs text-caption">{{ user.email }}</div>
+                <div class="ellipsis q-mt-lg qas-app-bar__user-name qs-lh-sm">{{ userName }}</div>
+                <div class="ellipsis q-mt-xs">{{ user.email }}</div>
 
                 <div class="q-mt-sm">
                   <qas-btn flat icon="o_edit" label="Editar" :to="user.to" />
@@ -138,6 +138,10 @@ export default {
 
     userName () {
       return this.user.name || this.user.givenName
+    },
+
+    toolbarTitleClass () {
+      return !this.$qas.screen.untilLarge && 'q-pl-none'
     }
   },
 
@@ -147,7 +151,11 @@ export default {
     },
 
     goToRoot () {
-      this.$router.push({ name: 'Root' })
+      const hasRoot = this.$router.hasRoute('Root')
+
+      this.$router.push({
+        ...(hasRoot ? { name: 'Root' } : { path: '/' })
+      })
     },
 
     signOut () {
@@ -169,30 +177,31 @@ export default {
 
   &__brand {
     height: 24px;
-    margin-right: 8px;
     position: relative;
     top: 4px;
   }
 
-  &__user {
-    background-color: var(--qas-background-color);
-    transition: background-color $generic-hover-transition;
-
-    &:focus,
-    &:hover {
-      background-color: rgba(white, 0.2);
-    }
+  &__user-content {
+    width: 230px;
   }
 
   &__user-data {
     max-width: 180px;
   }
 
+  &__user-name {
+    font-weight: 600;
+  }
+
   &__user-menu {
     width: 260px;
   }
 
   @media (max-width: $breakpoint-xs) {
+    &__user-content {
+      width: auto;
+    }
+
     &__user-data {
       display: none;
     }

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

@@ -1,43 +1,45 @@
 <template>
-  <q-drawer v-model="model" class="qas-app-menu" :mini="miniMode" :width="230" @before-hide="beforeHide" @mini-state="setMiniState">
+  <q-drawer v-model="model" :behavior="behavior" bordered class="qas-app-menu" :width="288">
     <div class="column flex full-height justify-between no-wrap overflow-x-hidden">
-      <div>
-        <div v-if="displayModuleSection" class="q-ma-md">
+      <div class="q-mt-lg">
+        <div v-if="displayModuleSection" class="q-mb-lg q-mx-md">
           <div class="q-mb-sm text-caption text-grey-7 text-weight-medium">
-            Você está no modulo:
+            Você está em:
           </div>
 
           <qas-select v-model="module" :options="defaultModules" @update:model-value="redirectHandler(currentModelOption)" />
         </div>
 
-        <q-list class="text-grey-9 text-weight-medium">
-          <template v-for="(header, index) in items">
-            <q-expansion-item v-if="hasChildren(header)" :key="header.label" :ref="`item-${index}`" :active-class="activeItemClassesSecondary" :default-opened="shouldExpand(header)" expand-icon="o_keyboard_arrow_down" expand-separator group="item" :icon="header.icon" :label="header.label" :to="header.to" @click="toggleItem(index)">
-              <q-item v-for="(item, itemIndex) in header.children" :key="itemIndex" v-ripple :active-class="activeItemClasses" clickable :to="item.to">
-                <q-item-section v-if="item.icon" avatar>
-                  <q-icon :name="item.icon" />
+        <q-list v-if="items.length" class="q-mb-lg text-grey-9">
+          <template v-for="(menuItem, index) in items">
+            <div v-if="hasChildren(menuItem)" :key="`children-${index}`" class="qas-app-menu__content">
+              <q-item class="items-center">
+                {{ menuItem.label }}
+              </q-item>
+
+              <q-item v-for="(menuChildItem, childIndex) in menuItem.children" :key="childIndex" :active="isActive(menuChildItem)" class="qas-app-menu__children qas-app-menu__item-children" :to="getRouterRedirect(menuChildItem)">
+                <q-item-section v-if="menuChildItem.icon" avatar>
+                  <q-icon :name="menuChildItem.icon" />
                 </q-item-section>
+
                 <q-item-section>
-                  <q-item-label>{{ item.label }}</q-item-label>
+                  <q-item-label>{{ menuChildItem.label }}</q-item-label>
                 </q-item-section>
               </q-item>
-            </q-expansion-item>
+            </div>
 
-            <q-item v-else :key="index" v-ripple :active-class="activeItemClasses" clickable :to="header.to">
-              <q-item-section v-if="header.icon" avatar>
-                <q-icon :name="header.icon" />
+            <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>
+
               <q-item-section>
-                <q-item-label>{{ header.label }}</q-item-label>
+                <q-item-label>{{ menuItem.label }}</q-item-label>
               </q-item-section>
             </q-item>
           </template>
         </q-list>
       </div>
-
-      <div v-if="brandMenu" class="q-mx-md">
-        <img v-if="!isMini" :alt="title" class="block q-mb-md q-mx-auto" :src="brandMenu">
-      </div>
     </div>
   </q-drawer>
 </template>
@@ -64,11 +66,6 @@ export default {
       type: String
     },
 
-    brandMenu: {
-      default: '',
-      type: String
-    },
-
     modules: {
       default: () => [],
       type: Array
@@ -79,21 +76,11 @@ export default {
 
   data () {
     return {
-      miniMode: false,
-      module: '',
-      isMini: false
+      module: ''
     }
   },
 
   computed: {
-    activeItemClasses () {
-      return 'bg-primary-contrast text-primary text-weight-bold'
-    },
-
-    activeItemClassesSecondary () {
-      return 'text-primary bg-secondary-contrast'
-    },
-
     defaultModules () {
       if (!isLocalDevelopment()) return this.modules
 
@@ -125,13 +112,17 @@ export default {
     },
 
     displayModuleSection () {
-      return !this.isMini && this.defaultModules.length
+      return this.defaultModules.length
     },
 
     currentModule () {
       const hostname = window.location.hostname
 
       return this.defaultModules.find(module => module?.value.includes(hostname))?.value
+    },
+
+    behavior () {
+      return this.$qas.screen.untilLarge ? 'mobile' : 'desktop'
     }
   },
 
@@ -149,35 +140,33 @@ export default {
       return !!(children || []).length
     },
 
-    shouldExpand ({ children, to }) {
-      return children?.length && this.$route.matched.some(item => item?.path === to?.path)
-    },
-
-    beforeHide () {
-      if (this.$qas.screen.isLarge) {
-        this.model = true
-        this.miniMode = !this.miniMode
-      }
-    },
-
-    setMiniState (value) {
-      this.isMini = value
-    },
-
     redirectHandler ({ value }) {
       if (!value.includes(window.location.host)) {
         window.location.href = value
       }
     },
 
-    toggleItem (index) {
-      const component = this.getComponent(index)
+    getPathFromObject ({ path, name }) {
+      if (path) return this.getNormalizedPath(path)
+
+      const resolvedRoute = this.$router.resolve({ name })
+
+      return this.getNormalizedPath(resolvedRoute.path)
+    },
+
+    getNormalizedPath (path) {
+      return path.split('/').filter(Boolean)?.[0]
+    },
 
-      component?.to && this.isMini && component.toggle()
+    getRouterRedirect ({ to }) {
+      return to || ''
     },
 
-    getComponent (index) {
-      return this.$refs[`item-${index}`]?.[0]
+    isActive ({ to }) {
+      const currentPath = this.getNormalizedPath(this.$route.path)
+      const itemPath = typeof to === 'string' ? this.getNormalizedPath(to) : this.getPathFromObject(to)
+
+      return currentPath === itemPath
     }
   }
 }
@@ -185,8 +174,28 @@ export default {
 
 <style lang="scss">
 .qas-app-menu {
-  .q-expansion-item--expanded .q-item:not(&--active.q-item) {
-    background-color: $grey-1;
+  .q-item + .q-item {
+    margin-top: var(--qas-spacing-xs);
+  }
+
+  &__children.q-item {
+    padding-left: var(--qas-spacing-lg);
+  }
+
+  &__item-children.q-item + &__item-children.q-item {
+    margin-top: var(--qas-spacing-sm);
+  }
+
+  &__content + &__content {
+    margin-top: var(--qas-spacing-md);
+  }
+
+  &__content + &__item {
+    margin-top: var(--qas-spacing-md);
+  }
+
+  &__item + &__content {
+    margin-top: var(--qas-spacing-md);
   }
 }
 </style>

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

@@ -4,10 +4,6 @@ meta:
   desc: Menu lateral.
 
 props:
-  brand-menu:
-    desc: Imagem para ser usada como logo no menu.
-    type: String
-
   items:
     desc: Itens do menu.
     type: Array

package/src/components/avatar/QasAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-avatar class="text-bold" :class="avatarClass" rounded>
+  <q-avatar class="text-bold" :class="avatarClass" v-bind="attributes">
     <q-img v-if="hasImage" :alt="title" :ratio="1" spinner-color="primary" spinner-size="16px" :src="image" @error="onImageLoadedError" />
     <template v-else-if="hasTitle">{{ firstLetter }}</template>
     <q-icon v-else :name="icon" />
@@ -10,6 +10,8 @@
 export default {
   name: 'QasAvatar',
 
+  inheritAttrs: false,
+
   props: {
     color: {
       default: '',
@@ -76,6 +78,12 @@ export default {
 
     hasTitle () {
       return !!this.title
+    },
+
+    attributes () {
+      const { square, rounded, ...attributes } = this.$attrs
+
+      return attributes
     }
   },
 

package/src/components/layout/QasLayout.vue

@@ -65,6 +65,8 @@ export default {
   watch: {
     modelValue: {
       handler (value) {
+        if (!this.$qas.screen.untilLarge) return
+
         this.menuDrawer = value
       },
       immediate: true
@@ -72,7 +74,7 @@ export default {
   },
 
   mounted () {
-    this.menuDrawer = !this.$qas.screen.untilMedium
+    this.menuDrawer = !this.$qas.screen.untilLarge
   },
 
   methods: {

package/src/css/components/index.scss

@@ -1,4 +1,5 @@
 @import './base';
 @import './field';
+@import './item';
 @import './radio';
 @import './tabs';

package/src/css/components/item.scss

@@ -0,0 +1,35 @@
+.q-item {
+  font-size: 16px;
+
+  &.q-router-link--active {
+    background-color: transparent !important;
+    font-weight: 600;
+
+    &::before {
+      background-color: var(--q-primary);
+      bottom: 0;
+      color: var(--q-primary);
+      content: '';
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 4px;
+    }
+  }
+
+  &--clickable {
+    transition: color 300ms;
+
+    &:hover {
+      color: var(--q-primary);
+    }
+  }
+
+  &__section--avatar {
+    min-width: 0;
+  }
+
+  & .q-focus-helper {
+    display: none;
+  }
+}

package/src/css/utils/fonts.scss

@@ -1,5 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
 
 body {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: Nunito, sans-serif;
 }

package/src/css/variables/index.scss

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

package/src/css/variables/spacing.scss

@@ -0,0 +1,54 @@
+@use 'sass:map';
+
+/*
+* O único valor que de fato é alterado diferente do padrão do Quasar é o tamanho "lg"
+*/
+$space-base   : 16px;
+$space-x-base : $space-base;
+$space-y-base : $space-base;
+
+$space-none : (
+  x: 0,
+  y: 0
+);
+
+$space-xs: (
+  x: ($space-x-base * 0.25),
+  y: ($space-y-base * 0.25)
+);
+
+$space-sm: (
+  x: ($space-x-base * 0.5),
+  y: ($space-y-base * 0.5)
+);
+
+$space-md: (
+  x: $space-x-base,
+  y: $space-y-base
+);
+
+// O tamanho original seria "16px * 1.5" ou "24px", alterado para ter "32px"
+$space-lg: (
+  x: ($space-x-base * 2),
+  y: ($space-y-base * 2)
+);
+
+$space-xl: (
+  x: ($space-x-base * 3),
+  y: ($space-y-base * 3)
+);
+
+$spaces: (
+  none: $space-none,
+  xs: $space-xs,
+  sm: $space-sm,
+  md: $space-md,
+  lg: $space-lg,
+  xl: $space-xl
+);
+
+:root {
+  @each $key, $space in $spaces {
+    --qas-spacing-#{$key}: #{map.get($space, 'x')};
+  }
+}

package/dist/api/QasActions.json

@@ -1,40 +0,0 @@
-{
-  "type": "component",
-  "meta": {
-    "desc": "Área de ações para páginas que lidam com botões primários e secundários, como um formulário ou caixa de diálogo."
-  },
-  "props": {
-    "align": {
-      "desc": "Alinhamento dos elementos.",
-      "default": "end",
-      "type": "String",
-      "examples": [
-        "start",
-        "end",
-        "between",
-        "around",
-        "center"
-      ]
-    },
-    "gutter": {
-      "desc": "Espaçamento entre os elementos.",
-      "default": "md",
-      "type": "String",
-      "examples": [
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl"
-      ]
-    }
-  },
-  "slots": {
-    "primary": {
-      "desc": "Slot para ação primaria (ex: botão de salvar), em telas menores que sm, se torna o primeiro elemento."
-    },
-    "secondary": {
-      "desc": "Slot para ação secundaria (ex: botão de cancelar), em telas menores que sm, se torna o segundo elemento."
-    }
-  }
-}

package/dist/api/QasActionsMenu.json

@@ -1,64 +0,0 @@
-{
-  "type": "component",
-  "meta": {
-    "desc": "Componente para abrir um menu de ação a partir de um botão, muito utilizado em tela de edição."
-  },
-  "props": {
-    "delete-icon": {
-      "desc": "Ícone do botão de deletar.",
-      "default": "o_delete",
-      "type": "String"
-    },
-    "delete-label": {
-      "desc": "Rótulo do botão de deletar.",
-      "default": "Excluir",
-      "type": "String"
-    },
-    "delete-props": {
-      "desc": "Props para repassar para o componente \"QasDelete\", caso seja um objeto vazio, o componente não vai adicionar a opção de deletar por padrão.",
-      "default": {},
-      "type": "Object"
-    },
-    "icon": {
-      "desc": "Ícone do botão.",
-      "default": "o_settings",
-      "type": "String",
-      "examples": [
-        "start",
-        "end",
-        "between",
-        "around",
-        "center"
-      ]
-    },
-    "label": {
-      "desc": "Rotulo do botão.",
-      "default": "Configurações",
-      "type": "String"
-    },
-    "list": {
-      "desc": "Lista de items que vão ser criados dentro do menu de ações.",
-      "default": "{}",
-      "type": "Object",
-      "examples": [
-        "{ delete: { icon: 'o_visibility', label: 'Visualizar', handler: () => alert('handler ativado') } }"
-      ]
-    }
-  },
-  "slots": {
-    "[nome-da-chave]": {
-      "desc": "Slot dinâmico gerado a partir das chaves dentro do objeto da prop \"list\"",
-      "tag": "Escopo",
-      "scope": {
-        "item": {
-          "desc": "Escopo que retorna o item atual, valor depende do que foi passado na prop list.",
-          "default": "{}",
-          "type": "Object",
-          "examples": [
-            " { icon: 'o_delete', label: 'Delete', } "
-          ]
-        }
-      }
-    }
-  }
-}

package/dist/api/QasAlert.json

@@ -1,40 +0,0 @@
-{
-  "type": "component",
-  "meta": {
-    "desc": "Cria um seção para alertar sobre um conteúdo."
-  },
-  "props": {
-    "model-value": {
-      "desc": "Model do componente, controla se o componente aparece ou não.",
-      "default": true,
-      "type": "Boolean"
-    },
-    "title": {
-      "desc": "Título do componente.",
-      "type": "String"
-    },
-    "text": {
-      "desc": "Texto do componente.",
-      "type": "String"
-    }
-  },
-  "slots": {
-    "default": {
-      "desc": "Slot para acessar o conteúdo gerado pela prop \"text\""
-    },
-    "header": {
-      "desc": "Slot para acessar o conteúdo gerado pela prop \"title\""
-    }
-  },
-  "events": {
-    "@update:model-value -> function(value)": {
-      "desc": "Dispara quando o model-value altera, também usado para v-model.",
-      "params": {
-        "value": {
-          "desc": "Novo valor do model.",
-          "type": "Boolean"
-        }
-      }
-    }
-  }
-}