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

package/src/components/tabs-generator/QasTabsGenerator.vue

@@ -1,52 +1,46 @@
 <template>
-  <q-tabs v-model="model" :active-color="activeColor" :indicator-color="indicatorColor" outside-arrows>
-    <slot v-for="(tab, key) in formattedTabs" :item="tab" :name="`tab-${tab.value}`">
-      <q-tab :key="key" v-bind="tab" :class="tabClass" :label="tab.label" :name="tab.value">
-        <slot :item="tab" :name="`tab-after-${tab.value}`">
-          <q-badge v-if="counters[tab.value]" :label="counters[tab.value]" v-bind="defaultCounterProps" />
-        </slot>
-      </q-tab>
-    </slot>
-  </q-tabs>
+  <div class="qas-tabs-generator">
+    <q-tabs v-model="model" active-color="primary" align="left" :breakpoint="0" content-class="text-grey-8" dense inline-label left-icon="sym_r_chevron_left" outside-arrows right-icon="sym_r_chevron_right">
+      <slot v-for="(tab, key) in formattedTabs" :item="tab" :name="`tab-${tab.value}`">
+        <q-tab :key="key" v-bind="getTabProps(tab)" class="text-body1" :name="tab.value" no-caps :ripple="false">
+          <slot :item="tab" :name="`tab-after-${tab.value}`">
+            <q-icon v-if="tab.icon" :name="tab.icon" size="sm" />
+
+            <qas-status v-if="tab.status" :color="tab.status" />
+
+            <div class="q-ml-xs">
+              {{ getFormattedLabel(tab) }}
+            </div>
+          </slot>
+        </q-tab>
+      </slot>
+    </q-tabs>
+  </div>
 </template>
 
 <script>
+import QasStatus from '../status/QasStatus.vue'
+
 import { extend } from 'quasar'
 
 export default {
   name: 'QasTabsGenerator',
 
-  props: {
-    activeColor: {
-      default: 'primary',
-      type: String
-    },
-
-    counterProps: {
-      default: () => ({}),
-      type: Object
-    },
+  components: {
+    QasStatus
+  },
 
+  props: {
     counters: {
       default: () => ({}),
       type: Object
     },
 
-    indicatorColor: {
-      default: 'primary',
-      type: String
-    },
-
     modelValue: {
       default: '',
       type: [String, Number]
     },
 
-    tabClass: {
-      default: 'text-primary',
-      type: String
-    },
-
     tabs: {
       default: () => ({}),
       required: true,
@@ -57,14 +51,6 @@ export default {
   emits: ['update:modelValue'],
 
   computed: {
-    defaultCounterProps () {
-      return {
-        color: 'negative',
-        floating: true,
-        ...this.counterProps
-      }
-    },
-
     formattedTabs () {
       const tabs = extend(true, {}, this.tabs)
 
@@ -83,9 +69,126 @@ export default {
       },
 
       set (value) {
+        const currentTab = Array.isArray(this.tabs)
+          ? this.tabs.find(tab => tab?.value === value)
+          : this.formattedTabs[value]
+
+        if (currentTab?.disabled) return
+
         this.$emit('update:modelValue', value)
       }
     }
+  },
+
+  methods: {
+    getFormattedLabel ({ label, counter, value }) {
+      const normalizedCount = this.counters[value] || counter
+
+      if (!normalizedCount) return label
+
+      const countString = String(normalizedCount)
+
+      return `${label} (${countString.padStart(2, '0')})`
+    },
+
+    getTabProps (tab) {
+      const { icon, label, ...payload } = tab
+      return payload
+    }
   }
 }
 </script>
+
+<style lang="scss">
+.qas-tabs-generator {
+  .q-tabs {
+    &--scrollable {
+      .q-tab {
+        &:first-child {
+          padding-left: var(--qas-spacing-xs);
+        }
+
+        &:last-child {
+          padding-right: var(--qas-spacing-xs);
+        }
+      }
+    }
+
+    .q-tab {
+      &--inactive {
+        opacity: 1;
+      }
+
+      &__content {
+        position: relative;
+
+        &::before {
+          background: var(--q-primary);
+          bottom: 0;
+          content: '';
+          height: 2px;
+          left: 0;
+          position: absolute;
+          right: 0;
+          transform: scale(0);
+          transition: transform var(--qas-generic-transition);
+        }
+      }
+
+      &--active {
+        font-weight: 600;
+
+        .q-tab__content {
+          position: relative;
+
+          &::before {
+            transform: scale(100%);
+          }
+        }
+      }
+
+      &:not(.q-tabs--scrollable .q-tab):first-child {
+        padding-left: 0;
+      }
+
+      &:not(.q-tabs--scrollable .q-tab):last-child {
+        padding-right: 0;
+      }
+
+      &:not(&--active) {
+        transition: color var(--qas-generic-transition);
+
+        &:not([disabled]):hover {
+          color: var(--q-primary-contrast) !important;
+        }
+      }
+
+      &__icon {
+        font-size: 24px;
+      }
+
+      &__arrow--faded {
+        color: $grey-6;
+        opacity: 1 !important;
+      }
+
+      &__indicator {
+        display: none;
+      }
+    }
+
+    &__arrow:not(&--faded) {
+      color: $grey-9;
+      transition: color var(--qas-generic-transition);
+
+      &:hover {
+        color: var(--q-primary-contrast);
+      }
+    }
+  }
+
+  .q-focus-helper {
+    display: none;
+  }
+}
+</style>

package/src/components/tabs-generator/QasTabsGenerator.yml

@@ -4,40 +4,20 @@ mixins:
   - quasar/dist/api/QTabs.json
 
 meta:
-  desc: Componente para gerar tab dinamicamente, implementa o QTab e Qtabs.
+  desc: Componente para gerar tabs dinamicamente, implementa o QTab e QTabs.
 
 props:
-  active-color:
-    desc: Cor da tab quando ela está ativa.
-    type: String
-    examples: ['primary', 'negative', 'positive']
-
-  counter-props:
-    desc: Contador de cada tags, funciona como um "notificação"
+  counters:
+    desc: Contador que ficará junto a label "Todos (24)"
     default: {}
     type: Object
-    examples: ["{ tab: 2 }"]
-
-  fuse-options:
-    desc: Configurações do [fuse.js](https://fusejs.io/api/options.html).
-    default: { keys: ['label'] }
-    type: Object
-
-  indicator-color:
-    desc: Cor do indicador.
-    default: primary
-    type: String
+    examples: ["{ all: 24 }"]
 
   model-value:
     desc: Model do componente, controla qual é a tab atual selecionada.
     type: [String, Number]
     model: true
 
-  tab-class:
-    desc: Classe do QTab
-    default: text-primary
-    type: String
-
   tabs:
     desc: Objeto ou Array contendo todas as tabs a serem geradas.
     default: {}

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

@@ -4,16 +4,13 @@
       <div ref="truncate" :class="truncateTextClass">
         <slot>{{ text }}</slot>
       </div>
-      <div v-if="isTruncated" class="cursor-pointer text-primary" @click.stop="toggleDialog">{{ seeMoreLabel }}</div>
+
+      <div v-if="isTruncated" class="cursor-pointer text-primary" @click.stop="toggleDialog">
+        {{ seeMoreLabel }}
+      </div>
     </div>
 
-    <qas-dialog v-model="showDialog" v-bind="defaultDialogProps">
-      <template #description>
-        <slot>
-          <div>{{ text }}</div>
-        </slot>
-      </template>
-    </qas-dialog>
+    <qas-dialog v-model="showDialog" v-bind="defaultDialogProps" aria-label="Diálogo de texto completo" role="dialog" />
   </div>
 </template>
 
@@ -60,7 +57,8 @@ export default {
     return {
       maxPossibleWidth: '',
       showDialog: false,
-      textWidth: ''
+      textWidth: '',
+      observer: null
     }
   },
 
@@ -81,7 +79,6 @@ export default {
       return {
         cancel: false,
         ok: false,
-        useCloseButton: true,
         ...this.dialogProps,
         card: {
           title: this.dialogTitle,
@@ -99,6 +96,11 @@ export default {
 
   mounted () {
     this.truncateText()
+    this.observeContentChange()
+  },
+
+  unmounted () {
+    this.observer.disconnect()
   },
 
   methods: {
@@ -111,6 +113,18 @@ export default {
 
     toggleDialog () {
       this.showDialog = !this.showDialog
+    },
+
+    observeContentChange () {
+      const element = this.$refs.truncate
+      const config = { childList: true, subtree: true, characterData: true }
+
+      const callback = mutationList => {
+        mutationList.forEach(() => this.truncateText())
+      }
+
+      this.observer = new MutationObserver(callback)
+      this.observer.observe(element, config)
     }
   }
 }

package/src/components/transfer/QasTransfer.vue

@@ -19,12 +19,12 @@
 
     <div class="col-12 col-sm-auto items-center justify-center q-col-gutter-md row" :class="actionsClass">
       <div>
-        <qas-btn :class="iconClass" dense :disabled="!firstQueue.length" flat icon="o_arrow_circle_down" rounded @click="setSelectedFromClick(true)" />
+        <qas-btn :class="iconClass" dense :disabled="!firstQueue.length" flat icon="sym_r_arrow_circle_down" rounded @click="setSelectedFromClick(true)" />
         <q-tooltip anchor="top middle" self="center middle">Selecionar</q-tooltip>
       </div>
       <div>
         <div>
-          <qas-btn :class="iconClass" dense :disabled="!secondQueue.length" flat icon="o_arrow_circle_up" rounded @click="setSelectedFromClick()" />
+          <qas-btn :class="iconClass" dense :disabled="!secondQueue.length" flat icon="sym_r_arrow_circle_up" rounded @click="setSelectedFromClick()" />
           <q-tooltip anchor="bottom middle" self="center middle">Remover</q-tooltip>
         </div>
       </div>

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

@@ -8,12 +8,12 @@
           </span>
 
           <span v-if="hasMenuButton(node)" class="q-ml-sm">
-            <qas-btn dense flat icon="o_more_vert" round @click.stop>
+            <qas-btn dense flat icon="sym_r_more_vert" round @click.stop>
               <q-menu auto-close>
                 <q-list separator>
                   <q-item v-if="useAddButton" v-ripple class="qas-tree-generator__item" clickable @click="handleTreeFormDialog(node, true, tree)">
                     <q-item-section avatar>
-                      <q-icon name="o_add_circle_outline" />
+                      <q-icon name="sym_r_add_circle_outline" />
                     </q-item-section>
 
                     <q-item-section>Adicionar subnível</q-item-section>
@@ -21,7 +21,7 @@
 
                   <q-item v-if="useEditButton" v-ripple class="qas-tree-generator__item" clickable @click="handleTreeFormDialog(node)">
                     <q-item-section avatar>
-                      <q-icon name="o_edit" />
+                      <q-icon name="sym_r_edit" />
                     </q-item-section>
 
                     <q-item-section>Editar</q-item-section>
@@ -29,7 +29,7 @@
 
                   <q-item v-if="hasDestroyButton(node)" v-ripple class="qas-tree-generator__item" clickable @click="onDestroy(node)">
                     <q-item-section avatar>
-                      <q-icon name="o_highlight_off" />
+                      <q-icon name="sym_r_highlight_off" />
                     </q-item-section>
 
                     <q-item-section>Excluir</q-item-section>
@@ -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/uploader/QasUploader.vue

@@ -13,13 +13,13 @@
               </div>
             </div>
 
-            <qas-btn v-if="showAddFile" ref="buttonUpload" color="white" dense flat icon="o_add" round @click="$refs.hiddenInput.click()" />
+            <qas-btn v-if="showAddFile" ref="buttonUpload" color="white" dense flat icon="sym_r_add" round @click="$refs.hiddenInput.click()" />
 
             <input ref="hiddenInput" :accept="attributes.accept" class="qas-uploader__input" :multiple="isMultiple" type="file">
 
             <qas-btn ref="buttonCleanFiles" class="hidden" color="white" @click="scope.removeUploadedFiles" />
-            <qas-btn v-if="scope.canUpload" color="white" dense flat icon="o_cloud_upload" round @click="scope.upload" />
-            <qas-btn v-if="scope.isUploading" color="white" dense flat icon="o_clear" round @click="scope.abort" />
+            <qas-btn v-if="scope.canUpload" color="white" dense flat icon="sym_r_cloud_upload" round @click="scope.upload" />
+            <qas-btn v-if="scope.isUploading" color="white" dense flat icon="sym_r_clear" round @click="scope.abort" />
           </div>
         </slot>
       </template>
@@ -28,7 +28,7 @@
         <slot name="list" :scope="scope">
           <div class="col-12 q-col-gutter-md row">
             <div v-for="(file, index) in getFilesList(scope.files, scope)" :key="index" class="row" :class="itemClass">
-              <qas-avatar class="q-mr-sm" color="contrast-primary" icon="o_attach_file" :image="file.url" rounded :text-color="getColorFileIcon(file)" />
+              <qas-avatar class="q-mr-sm" color="primary" icon="sym_r_attach_file" :image="file.url" rounded :text-color="getColorFileIcon(file)" />
 
               <div class="col items-center no-wrap row">
                 <div class="column no-wrap" :class="{ col: isMultiple }">
@@ -36,8 +36,8 @@
                   <div v-if="file.isUploaded" class="text-caption">{{ file.progressLabel }} ({{ file.sizeLabel }})</div>
                 </div>
                 <div class="items-center q-ml-sm row">
-                  <q-icon v-if="file.isFailed" color="negative" name="o_warning" size="20px" />
-                  <qas-btn v-if="!scope.readonly" dense flat icon="o_delete" round @click="removeItem(index, scope, file)" />
+                  <q-icon v-if="file.isFailed" color="negative" name="sym_r_warning" size="20px" />
+                  <qas-btn v-if="!scope.readonly" dense flat icon="sym_r_delete" round @click="removeItem(index, scope, file)" />
                 </div>
               </div>
             </div>
@@ -49,7 +49,7 @@
     <slot :context="self" name="custom-upload" />
 
     <template v-if="hasErrorMessage" #after>
-      <q-icon color="negative" name="o_error" />
+      <q-icon color="negative" name="sym_r_error" />
     </template>
   </q-field>
 </template>
@@ -370,7 +370,7 @@ export default {
     },
 
     getColorFileIcon (file) {
-      return this.isFailed(file) ? 'negative' : 'primary'
+      return this.isFailed(file) ? 'negative' : 'white'
     },
 
     async addFiles () {

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';