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

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,

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 })
       }
     },
 

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/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 {

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" />
+
+            <pv-tabs-generator-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 PvTabsGeneratorStatus from './private/PvTabsGeneratorStatus.vue'
+
 import { extend } from 'quasar'
 
 export default {
   name: 'QasTabsGenerator',
 
-  props: {
-    activeColor: {
-      default: 'primary',
-      type: String
-    },
-
-    counterProps: {
-      default: () => ({}),
-      type: Object
-    },
+  components: {
+    PvTabsGeneratorStatus
+  },
 
+  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/tabs-generator/private/PvTabsGeneratorStatus.vue

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

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

@@ -81,7 +81,6 @@ export default {
       return {
         cancel: false,
         ok: false,
-        useCloseButton: true,
         ...this.dialogProps,
         card: {
           title: this.dialogTitle,

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 () {