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

package/src/components/list-items/QasListItems.vue

@@ -34,7 +34,7 @@ export default {
 
   props: {
     iconProps: {
-      default: () => ({ color: 'primary', name: 'o_chevron_right' }),
+      default: () => ({ color: 'primary', name: 'sym_r_chevron_right' }),
       type: Object
     },
 

package/src/components/list-items/QasListItems.yml

@@ -6,7 +6,7 @@ meta:
 props:
   icon-props:
     desc: Props do [QIcon](https://quasar.dev/vue-components/icon#introduction)
-    default: { color: 'primary', name: 'o_chevron_right' }
+    default: { color: 'primary', name: 'sym_r_chevron_right' }
     type: Object
 
   list:

package/src/components/nested-fields/QasNestedFields.vue

@@ -48,12 +48,12 @@
             </div>
 
             <div class="col-auto">
-              <qas-btn color="dark" flat icon="o_add_circle_outline" round />
+              <qas-btn color="dark" flat icon="sym_r_add_circle_outline" round />
             </div>
           </div>
 
           <div v-else class="text-left">
-            <qas-btn class="q-px-sm" color="dark" flat icon="o_add" @click="add()">{{ addInputLabel }}</qas-btn>
+            <qas-btn class="q-px-sm" color="dark" flat icon="sym_r_add" @click="add()">{{ addInputLabel }}</qas-btn>
           </div>
         </slot>
       </div>
@@ -107,7 +107,7 @@ export default {
       default: () => {
         return {
           label: 'Excluir',
-          icon: 'o_delete',
+          icon: 'sym_r_delete',
           flat: true,
           dense: true
         }
@@ -119,7 +119,7 @@ export default {
       default: () => {
         return {
           label: 'Duplicar',
-          icon: 'o_content_copy',
+          icon: 'sym_r_content_copy',
           flat: true,
           useLabelOnSmallScreen: false,
           dense: true

package/src/components/nested-fields/QasNestedFields.yml

@@ -21,13 +21,13 @@ props:
 
   button-destroy-props:
     desc: Props do botão de excluir linha contendo os campos.
-    default: "{ label: 'Excluir', icon: 'o_delete', flat: true, dense: true }"
+    default: "{ label: 'Excluir', icon: 'sym_r_delete', flat: true, dense: true }"
     debugger: true
     type: Object
 
   button-duplicate-props:
     desc: Props do botão de duplicar linha contendo os campos.
-    default: "{ label: 'Duplicar', o_content_copy, flat: true, dense: true, useLabelOnSmallScreen: false }"
+    default: "{ label: 'Duplicar', sym_r_content_copy, flat: true, dense: true, useLabelOnSmallScreen: false }"
     debugger: true
     type: Object
 

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/page-header/QasPageHeader.vue

@@ -1,19 +1,32 @@
 <template>
-  <q-toolbar class="justify-between q-mb-xl q-px-none">
-    <div class="ellipsis">
-      <q-toolbar-title v-if="title" class="text-bold text-h5">
-        {{ title }}
-      </q-toolbar-title>
-
-      <q-breadcrumbs v-if="useBreadcrumbs" class="text-caption" separator-color="grey-7">
-        <q-breadcrumbs-el v-for="(item, index) in transformedBreadcrumbs" :key="item.label" :class="getBreadcrumbsClass(index)" :label="item.label" :to="item.route" />
-      </q-breadcrumbs>
+  <div>
+    <q-toolbar class="justify-between q-mb-xl q-px-none qas-page-header">
+      <div class="ellipsis">
+        <q-toolbar-title v-if="title" class="text-grey-9 text-h3">
+          {{ title }}
+        </q-toolbar-title>
+
+        <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>
+      </div>
+
+      <slot />
+    </q-toolbar>
+
+    <div>
+      <slot name="bottom">
+        <qas-header-actions v-if="hasHeaderActions" v-bind="headerActionsProps" />
+      </slot>
     </div>
-    <slot />
-  </q-toolbar>
+  </div>
 </template>
 
 <script>
+import QasHeaderActions from '../header-actions/QasHeaderActions.vue'
+
 import { castArray } from 'lodash-es'
 import { useHistory } from '../../composables'
 import { createMetaMixin } from 'quasar'
@@ -23,6 +36,10 @@ const { history } = useHistory()
 export default {
   name: 'QasPageHeader',
 
+  components: {
+    QasHeaderActions
+  },
+
   mixins: [
     createMetaMixin(function () {
       return {
@@ -37,6 +54,11 @@ export default {
       type: [Array, String]
     },
 
+    headerActionsProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     root: {
       default: '',
       type: [Object, String]
@@ -50,6 +72,11 @@ export default {
     useBreadcrumbs: {
       default: true,
       type: Boolean
+    },
+
+    useHomeIcon: {
+      default: true,
+      type: Boolean
     }
   },
 
@@ -76,15 +103,63 @@ export default {
 
         return item
       })
-    }
-  },
+    },
+
+    normalizedBreadcrumbs () {
+      const breadcrumbsSize = this.transformedBreadcrumbs.length
+
+      if (breadcrumbsSize < 5) return this.transformedBreadcrumbs
+
+      const [first, second] = this.transformedBreadcrumbs
+      const last = this.transformedBreadcrumbs.at(-1)
+
+      const beforeLast = {
+        ...this.transformedBreadcrumbs.at(-2),
+        label: '...'
+      }
+
+      return [
+        first,
+        second,
+        beforeLast,
+        last
+      ]
+    },
+
+    hasHeaderActions () {
+      return !!Object.keys(this.headerActionsProps).length
+    },
 
-  methods: {
-    getBreadcrumbsClass (index) {
-      const lastIndex = this.transformedBreadcrumbs.length - 1
+    homeRoute () {
+      const hasRoot = this.$router.hasRoute('Root')
 
-      return lastIndex === index ? 'text-grey-7' : 'text-primary'
+      return hasRoot ? { name: 'Root' } : '/'
     }
   }
 }
 </script>
+
+<style lang="scss">
+.qas-page-header {
+  &__breadcrumbs-el {
+    transition: color var(--qas-generic-transition);
+
+    &.q-breadcrumbs__el:not(.q-router-link--exact-active):hover {
+      color: var(--qas-primary-contrast) !important;
+    }
+
+    .q-breadcrumbs__el-icon {
+      font-size: 16px;
+    }
+  }
+
+  // aplica cor "grey-8" a todos os .q-breadcrumbs__el que não uma classe .q-breadcrumbs--last como pai
+  .q-breadcrumbs__el:not(.q-breadcrumbs--last .q-breadcrumbs__el) {
+    color: $grey-8;
+  }
+
+  .q-breadcrumbs--last {
+    color: var(--q-primary);
+  }
+}
+</style>

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

@@ -15,10 +15,28 @@ props:
     desc: Título do cabeçalho.
     type: String
 
+  header-actions-props:
+    desc: Propriedades do QasHeaderActions.
+    default: {}
+    type: Object
+
   root:
     desc: Rota raiz do breadcrumbs.
     type: [Object, String]
 
   use-breadcrumbs:
     desc: Habilita ou não o breadcrumbs.
-    type: [Array, String]
+    default: true
+    type: Boolean
+
+  use-home-icon:
+    desc: Habilita o ícone de início como primeiro nível do breadcrumbs.
+    default: true
+    type: Boolean
+
+slots:
+  bottom:
+    desc: slot para acessar abaixo do titulo e breadcrumbs.
+
+  default:
+    desc: slot para acessar lado direito do titulo e breadcrumbs.

package/src/components/pagination/QasPagination.vue

@@ -14,8 +14,11 @@ export default {
         activeColor: 'primary',
         activeDesign: 'flat',
         boundaryNumbers: true,
-        color: 'grey-7',
+        class: 'qas-pagination',
+        color: 'grey-8',
         directionLinks: true,
+        iconNext: 'sym_r_chevron_right',
+        iconPrev: 'sym_r_chevron_left',
         maxPages: modelValue < 3 ? 3 : 6,
         modelValue,
 
@@ -25,3 +28,11 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.qas-pagination {
+  .q-icon {
+    color: $grey-9;
+  }
+}
+</style>

package/src/components/password-input/QasPasswordInput.vue

@@ -58,7 +58,7 @@ export default {
 
   computed: {
     icon () {
-      return this.toggleType ? 'o_visibility_off' : 'o_visibility'
+      return this.toggleType ? 'sym_r_visibility_off' : 'sym_r_visibility'
     },
 
     model: {

package/src/components/search-box/QasSearchBox.vue

@@ -2,7 +2,7 @@
   <qas-box>
     <qas-input v-bind="attributes" ref="search" v-model="mx_search">
       <template #append>
-        <q-icon color="primary" name="o_search" />
+        <q-icon color="primary" name="sym_r_search" />
       </template>
     </qas-input>
 
@@ -19,7 +19,7 @@
 
       <slot v-if="showEmptyResult" name="empty-result">
         <div class="absolute-center text-center">
-          <q-icon class="q-mb-sm text-center" color="primary" name="o_search" size="38px" />
+          <q-icon class="q-mb-sm text-center" color="primary" name="sym_r_search" size="38px" />
           <div>{{ emptyResultText }}</div>
         </div>
       </slot>
@@ -112,7 +112,7 @@ export default {
       return {
         clearable: true,
         disable: this.isDisabled,
-        debounce: this.useLazyLoading ? 800 : 0,
+        debounce: this.useLazyLoading ? 1200 : 0,
         outlined: true,
         placeholder: this.placeholder,
         hideBottomSpace: true,
@@ -153,7 +153,6 @@ export default {
 
     defaultFuseOptions () {
       return {
-        threshold: 0.1,
         ignoreLocation: true,
 
         ...this.fuseOptions

package/src/components/search-box/QasSearchBox.yml

@@ -34,7 +34,7 @@ props:
     examples: ["{ keys: ['label'] }"]
     default:
       ignoreLocation: true
-      threshold: 0.1
+      threshold: 0.6
 
   height:
     desc: Define altura do box quando a lista não está vazia.

package/src/components/select/QasSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <q-select v-model="model" v-bind="attributes">
     <template v-if="isSearchable" #prepend>
-      <q-icon name="o_search" />
+      <q-icon name="sym_r_search" />
     </template>
 
     <template #no-option>
@@ -91,12 +91,13 @@ export default {
         outlined: true,
         ...this.$attrs,
 
-        options: this.mx_filteredOptions,
-        useInput: this.isSearchable,
         error: this.hasError,
+        inputDebounce: this.useLazyLoading ? 1200 : 0,
         loading: this.hasLoading,
-        ...(this.useLazyLoading && { onVirtualScroll: this.mx_onVirtualScroll }),
-        ...(this.isSearchable && { onFilter: this.onFilter })
+        options: this.mx_filteredOptions,
+        useInput: this.isSearchable,
+        ...(this.isSearchable && { onFilter: this.onFilter }),
+        ...(this.useLazyLoading && { onVirtualScroll: this.mx_onVirtualScroll })
       }
     },
 
@@ -104,7 +105,6 @@ export default {
       return {
         ignoreLocation: true,
         keys: ['label', 'value'],
-        threshold: 0.1,
 
         ...this.fuseOptions
       }

package/src/components/select/QasSelect.yml

@@ -27,7 +27,7 @@ props:
     default:
       ignoreLocation: true
       keys: [label, value]
-      threshold: 0.1
+      threshold: 0.6
 
   label-key:
     desc: O componente internamente espera receber na propriedade "options" um array de objeto contendo "label" e "value", caso o seu objeto não tenha "label" mas um "name" por exemplo, você pode definir esta prop "label-key" como "name".

package/src/components/select-list/QasSelectList.vue

@@ -130,7 +130,7 @@ export default {
       return {
         dense: this.$qas.screen.isSmall,
         useLabelOnSmallScreen: false,
-        icon: !this.$qas.screen.isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
+        icon: !this.$qas.screen.isSmall ? undefined : isSelected ? 'sym_r_close' : 'sym_r_add',
         label: isSelected ? 'Remover' : 'Adicionar',
         outline: isSelected,
         size: 'sm'

package/src/components/signature-pad/QasSignaturePad.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="signatureContainer" class="qas-signature-pad relative-position">
     <canvas :id="canvasId" :ref="$attrs.ref" class="qas-signature-pad__canvas rounded-borders vertical-bottom" :height="height" />
-    <qas-btn v-if="!empty" class="absolute-bottom-right q-mb-sm q-mr-sm" color="primary" dense icon="o_delete" round @click="clearSignature" />
+    <qas-btn v-if="!empty" class="absolute-bottom-right q-mb-sm q-mr-sm" color="primary" dense icon="sym_r_delete" round @click="clearSignature" />
   </div>
 
   <div>

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

@@ -1,13 +1,13 @@
 <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">
             <div v-if="uploadLabel" class="q-uploader__title">{{ uploadLabel }}</div>
           </div>
 
-          <qas-btn v-if="!readonly" color="white" dense flat icon="o_add" round @click="openDialog" />
+          <qas-btn v-if="!readonly" color="white" dense flat icon="sym_r_add" round @click="openDialog" />
 
           <qas-btn ref="forceUpload" class="hidden" @click="upload(scope)" />
           <qas-btn ref="buttonCleanFiles" class="hidden" @click="scope.removeUploadedFiles" />
@@ -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/single-view/QasSingleView.vue

@@ -9,7 +9,7 @@
     </template>
 
     <div v-else-if="!mx_isFetching" class="q-my-xl text-center">
-      <q-icon class="q-mb-sm text-center" color="grey-7" name="o_search" size="38px" />
+      <q-icon class="q-mb-sm text-center" color="grey-7" name="sym_r_search" size="38px" />
       <div class="text-grey-7">Nenhum item encontrado.</div>
     </div>
 

package/src/components/status/QasStatus.vue

@@ -0,0 +1,32 @@
+<template>
+  <div aria-live="polite" class="qas-status" :class="backgroundClass" role="status" />
+</template>
+
+<script>
+export default {
+  name: 'QasStatus',
+
+  inheritAttrs: false,
+
+  props: {
+    color: {
+      type: String,
+      default: 'light-blue-2'
+    }
+  },
+
+  computed: {
+    backgroundClass () {
+      return `bg-${this.color}`
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.qas-status {
+  border-radius: 100%;
+  height: 16px;
+  width: 16px;
+}
+</style>

package/src/components/status/QasStatus.yml

@@ -0,0 +1,10 @@
+type: component
+
+meta:
+  desc: Componente que gera um status circular com a cor do status.
+
+props:
+  color:
+    desc: cor dos status.
+    default: light-blue-2
+    type: String

package/src/components/table-generator/QasTableGenerator.vue

@@ -1,6 +1,6 @@
 <template>
   <qas-box class="q-px-lg q-py-md">
-    <q-table ref="table" class="bg-transparent qas-table-generator" :class="tableClass" v-bind="attributes">
+    <q-table ref="table" class="bg-white qas-table-generator text-grey-8" :class="tableClass" v-bind="attributes">
       <template v-for="(_, name) in $slots" #[name]="context">
         <slot v-if="hasBodySlot" name="body" :props="context" />
 
@@ -94,7 +94,7 @@ export default {
           field: name,
           label,
           name,
-          headerClasses: 'text-primary'
+          headerClasses: 'text-grey-9'
         })
       }
 
@@ -246,8 +246,33 @@ export default {
 
 <style lang="scss">
 .qas-table-generator {
-  .q-table th {
-    font-weight: bold;
+  .q-table {
+    th {
+      @include set-typography($subtitle1);
+    }
+
+    td,
+    th,
+    thead,
+    tr {
+      border-color: $grey-4;
+    }
+
+    td {
+      @include set-typography($body1);
+    }
+
+    tr {
+      transition: background-color var(--qas-generic-transition);
+
+      &:hover {
+        background-color: $grey-2;
+      }
+    }
+
+    thead tr:hover {
+      background-color: white;
+    }
   }
 
   &--mobile {