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

package/src/components/dialog/QasDialog.vue

@@ -1,37 +1,38 @@
 <template>
-  <q-dialog ref="dialog" :persistent="persistent" v-bind="dialogProps" @update:model-value="updateModelValue">
-    <q-card v-bind="cardProps" class="q-pa-sm" :style="style">
-      <q-card-section>
+  <q-dialog ref="dialog" class="qas-dialog" :persistent="persistent" v-bind="dialogProps" @update:model-value="updateModelValue">
+    <div class="bg-white q-pa-lg" :style="style">
+      <header v-if="hasHeader" class="q-mb-lg">
         <slot name="header">
-          <div class="justify-between row">
-            <div class="text-bold text-h6">{{ card.title }}</div>
-            <qas-btn v-if="useCloseButton" v-close-popup dense flat icon="o_close" rounded />
+          <div class="items-center justify-between row">
+            <h5 class="text-grey-9 text-h5">{{ card.title }}</h5>
+
+            <qas-btn v-if="isInfoDialog" v-close-popup color="grey-9" dense flat icon="sym_r_close" rounded />
           </div>
         </slot>
-      </q-card-section>
+      </header>
 
-      <q-card-section class="q-pt-none">
+      <section class="text-body1 text-grey-8">
         <component :is="componentTag" ref="form">
           <slot name="description">
             <div v-if="card.description">{{ card.description }}</div>
           </slot>
         </component>
-      </q-card-section>
+      </section>
 
-      <q-card-section>
+      <footer v-if="!isInfoDialog" class="q-mt-xl">
         <slot name="actions">
-          <qas-actions v-bind="actionsProps">
-            <template #primary>
-              <qas-btn v-if="ok" v-close-popup="!useForm" class="full-width" v-bind="defaultOk" @click="submitHandler" />
+          <qas-actions v-bind="actionsProps" :use-equal-width="hasAllActions" :use-full-width="hasSingleAction">
+            <template v-if="hasOk" #primary>
+              <qas-btn v-close-popup="!useForm" class="full-width" v-bind="defaultOk" @click="submitHandler" />
             </template>
 
-            <template #secondary>
-              <qas-btn v-if="cancel" v-close-popup class="full-width" v-bind="defaultCancel" />
+            <template v-if="hasCancel" #secondary>
+              <qas-btn v-close-popup class="full-width" v-bind="defaultCancel" />
             </template>
           </qas-actions>
         </slot>
-      </q-card-section>
-    </q-card>
+      </footer>
+    </div>
   </q-dialog>
 </template>
 
@@ -63,11 +64,6 @@ export default {
       type: Object
     },
 
-    cardProps: {
-      default: () => ({}),
-      type: Object
-    },
-
     maxWidth: {
       default: '',
       type: String
@@ -100,10 +96,6 @@ export default {
       type: Boolean
     },
 
-    useCloseButton: {
-      type: Boolean
-    },
-
     useFullMaxWidth: {
       type: Boolean
     },
@@ -138,8 +130,8 @@ export default {
     style () {
       return {
         ...(this.useFullMaxWidth && { width: '100%' }),
-        maxWidth: this.maxWidth || (this.$qas.screen.isSmall ? '' : '600px'),
-        minWidth: this.minWidth || (this.$qas.screen.isSmall ? '' : '400px')
+        maxWidth: this.maxWidth || '470px',
+        minWidth: this.minWidth || (this.$qas.screen.isSmall ? '' : '366px')
       }
     },
 
@@ -152,6 +144,34 @@ export default {
         ...(!this.usePlugin && { modelValue: this.modelValue }),
         ...this.$attrs
       }
+    },
+
+    hasOk () {
+      return typeof this.ok === 'boolean' ? this.ok : !!Object.keys(this.ok)
+    },
+
+    hasCancel () {
+      return typeof this.cancel === 'boolean' ? this.cancel : !!Object.keys(this.cancel)
+    },
+
+    hasAllActions () {
+      return this.hasOk && this.hasCancel
+    },
+
+    hasSingleAction () {
+      return (this.hasOk && !this.hasCancel) || (!this.hasOk && this.hasCancel)
+    },
+
+    hasHeaderSlot () {
+      return !!this.$slots.header
+    },
+
+    hasHeader () {
+      return this.hasHeaderSlot || this.card.title
+    },
+
+    isInfoDialog () {
+      return !this.hasOk && !this.hasCancel
     }
   },
 
@@ -195,3 +215,11 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.qas-dialog {
+  .q-dialog__inner > div {
+    box-shadow: $shadow-2;
+  }
+}
+</style>

package/src/components/dialog/QasDialog.yml

@@ -15,11 +15,6 @@ props:
     type: [Object, Boolean]
     examples: ["{ label: 'Meu botão de cancelar', onClick: () => alert('fui clicado!') }"]
 
-  card-props:
-    desc: Props repassadas para o componente "<q-card />".
-    default: {}
-    type: Object
-
   card:
     desc: Objeto contendo as informações para serem exibidas dentro do dialog como "title" e "description".
     default: {}
@@ -52,10 +47,6 @@ props:
     default: true
     type: Boolean
 
-  use-close-button:
-    desc: Define se vai ter ou não Ícone de fechar o dialog.
-    type: Boolean
-
   use-form:
     desc: Define se a tag onde fica a descrição no dialog vai ser um "<q-form />" ou "<div />".
     type: Boolean

package/src/components/filters/QasFilters.vue

@@ -6,21 +6,21 @@
           <q-form v-if="useSearch" @submit.prevent="filter()">
             <qas-input v-model="search" class="bg-white q-px-sm qas-filters__input rounded-borders-sm shadow-2" data-cy="filters-search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" :outlined="false" :placeholder="searchPlaceholder" type="search">
               <template #prepend>
-                <q-icon v-if="useSearchOnType" color="grey-8" name="o_search" />
-                <qas-btn v-else color="grey-9" flat icon="o_search" padding="0" @click="filter()" />
+                <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
+                <qas-btn v-else color="grey-9" flat icon="sym_r_search" padding="0" @click="filter()" />
               </template>
 
               <template #append>
-                <qas-btn v-if="hasSearch" class="q-mr-sm" color="grey-9" flat icon="o_clear" padding="0" size="sm" @click="clearSearch" />
+                <qas-btn v-if="hasSearch" class="q-mr-sm" color="grey-9" flat icon="sym_r_clear" padding="0" size="sm" @click="clearSearch" />
 
-                <qas-btn v-if="useFilterButton" :color="filterButtonColor" data-cy="filters-btn" flat icon="o_tune" padding="0">
+                <qas-btn v-if="useFilterButton" :color="filterButtonColor" data-cy="filters-btn" flat icon="sym_r_tune" padding="0">
                   <q-menu anchor="center right" class="full-width" max-width="270px" self="top right">
                     <div v-if="isFetching" class="q-pa-xl text-center">
                       <q-spinner color="grey" size="2em" />
                     </div>
 
                     <div v-else-if="hasFetchError" class="q-pa-xl text-center">
-                      <q-icon color="negative" name="o_warning" size="2em" />
+                      <q-icon color="negative" name="sym_r_warning" size="2em" />
                     </div>
 
                     <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="filter()">
@@ -53,7 +53,7 @@
 
     <div v-if="hasChip" class="q-mt-md">
       <!-- TODO rever com novo estilo -->
-      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="white" :data-cy="`filters-${filterItem.value}-chip`" dense icon-remove="o_close" removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ getChipValue(filterItem.value) }}</q-chip>
+      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="white" :data-cy="`filters-${filterItem.value}-chip`" dense icon-remove="sym_r_close" removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ getChipValue(filterItem.value) }}</q-chip>
     </div>
 
     <slot :context="mx_context" :filter="filter" :filters="activeFilters" :remove-filter="removeFilter" />
@@ -162,7 +162,7 @@ export default {
     },
 
     debounce () {
-      return this.useSearchOnType ? '800' : ''
+      return this.useSearchOnType ? '1200' : ''
     },
 
     fields () {

package/src/components/form-view/QasFormView.vue

@@ -150,7 +150,6 @@ export default {
 
       defaultDialogProps: {
         card: {
-          title: 'Atenção!',
           description: 'Você está deixando a página e suas alterações serão perdidas. Tem certeza que deseja sair sem salvar?'
         },
 

package/src/components/gallery/QasGallery.vue

@@ -14,7 +14,7 @@
             <div v-if="useDestroy">
               <slot :destroy="onDestroy" :image="image" :index="index" name="destroy">
                 <qas-btn color="grey-9" dense :disabled="isDestroyDisabled(image)" flat round size="sm" @click="onDestroy(image, index)">
-                  <q-icon name="o_delete" size="xs" />
+                  <q-icon name="sym_r_delete" size="xs" />
                 </qas-btn>
               </slot>
             </div>
@@ -58,12 +58,12 @@ export default {
   props: {
     carouselNextIcon: {
       type: String,
-      default: 'o_chevron_right'
+      default: 'sym_r_chevron_right'
     },
 
     carouselPreviousIcon: {
       type: String,
-      default: 'o_chevron_left'
+      default: 'sym_r_chevron_left'
     },
 
     initialSize: {

package/src/components/gallery/private/PvGalleryCarouselDialog.vue

@@ -2,15 +2,15 @@
   <qas-dialog v-model="model" :cancel="false" class="q-pa-xl" max-width="1100px" :ok="false" :persistent="false" use-full-max-width>
     <template #header>
       <div class="text-right">
-        <qas-btn v-close-popup dense flat icon="o_close" rounded @click="close" />
+        <qas-btn v-close-popup dense flat icon="sym_r_close" rounded @click="close" />
       </div>
     </template>
 
     <template #description>
-      <q-carousel v-model="imageIndexModel" animated :arrows="!$qas.screen.isSmall" control-text-color="primary" data-cy="gallery-carousel" :fullscreen="$qas.screen.isSmall" :height="carouselImageHeight" next-icon="o_chevron_right" prev-icon="o_chevron_left" swipeable :thumbnails="!isSingleImage">
+      <q-carousel v-model="imageIndexModel" animated :arrows="!$qas.screen.isSmall" control-text-color="primary" data-cy="gallery-carousel" :fullscreen="$qas.screen.isSmall" :height="carouselImageHeight" next-icon="sym_r_chevron_right" prev-icon="sym_r_chevron_left" swipeable :thumbnails="!isSingleImage">
         <q-carousel-slide v-for="(image, index) in images" :key="index" class="bg-no-repeat bg-size-contain" :data-cy="`gallery-carousel-slide-${index}`" :img-src="image.url" :name="index">
           <div v-if="$qas.screen.isSmall" class="full-width justify-end row">
-            <qas-btn dense flat icon="o_close" @click="close" />
+            <qas-btn dense flat icon="sym_r_close" @click="close" />
           </div>
         </q-carousel-slide>
       </q-carousel>

package/src/components/header-actions/QasHeaderActions.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="items-center justify-between no-wrap q-col-gutter-x-md q-mb-xl row text-body1 text-grey-8">
+    <div :class="leftClass">
+      <slot name="left">
+        {{ text }}
+      </slot>
+    </div>
+
+    <div v-if="hasRightSide" class="col-3 col-md-3 col-sm-4 justify-end row">
+      <slot name="right">
+        <qas-actions-menu v-if="hasDefaultActionsMenu" v-bind="actionsMenuProps" />
+
+        <qas-btn v-if="hasDefaultButton" :use-label-on-small-screen="false" v-bind="buttonProps" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QasHeaderActions',
+
+  props: {
+    actionsMenuProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    buttonProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    text: {
+      type: String,
+      default: ''
+    }
+  },
+
+  computed: {
+    hasDefaultButton () {
+      return !!Object.keys(this.buttonProps).length
+    },
+
+    hasDefaultActionsMenu () {
+      return !!Object.keys(this.actionsMenuProps).length
+    },
+
+    hasRightSlot () {
+      return !!this.$slots.right
+    },
+
+    hasRightSide () {
+      return this.hasRightSlot || this.hasDefaultActionsMenu || this.hasDefaultButton
+    },
+
+    leftClass () {
+      return this.hasRightSide ? 'col-9 col-md-9 col-sm-8' : 'col-12'
+    }
+  }
+}
+</script>

package/src/components/header-actions/QasHeaderActions.yml

@@ -0,0 +1,26 @@
+type: component
+
+meta:
+  desc: Componente para cabeçalho usado com alguma descrição e ação.
+
+props:
+  actions-menu-props:
+    desc: Propriedades do QasActionsMenu.
+    default: {}
+    type: Object
+
+  button-props:
+    desc: Propriedades do QasBtn.
+    default: {}
+    type: Object
+
+  text:
+    desc: Descrição da seção a esquerda.
+    type: String
+
+slots:
+  left:
+    desc: slot para acessar seção da esquerda (descrição).
+
+  right:
+    desc: slot para acessar seção da direita (ação).

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