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

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

@@ -1,5 +1,5 @@
 <template>
-  <div :id="fieldName" class="qas-nested-fields">
+  <div :id="fieldName" class="qas-nested-fields" :data-cy="`nested-fields-${fieldName}`">
     <div v-if="useSingleLabel" class="text-left">
       <qas-label :label="fieldLabel" typography="h5" />
     </div>
@@ -7,15 +7,17 @@
     <div ref="inputContent">
       <component :is="componentTag" v-bind="componentProps">
         <template v-for="(row, index) in nested" :key="`row-${index}`">
-          <div v-if="!row[destroyKey]" :id="`row-${index}`" class="full-width qas-nested-fields__field-item">
+          <div v-if="!row[destroyKey]" :id="`row-${index}`" class="full-width qas-nested-fields__field-item" data-cy="nested-fields-item">
             <header v-if="hasHeader" class="flex items-center q-pb-md" :class="headerClasses">
               <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" margin="none" typography="h5" />
               <qas-actions-menu v-if="hasBlockActions(row)" v-bind="getActionsMenuProps(index, row)" />
             </header>
 
+            <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" :model="nested[index]" name="before-fields" :update-value="updateValuesFromInput" />
+
             <div ref="formGenerator" class="col-12 justify-between q-col-gutter-x-md row">
-              <slot :errors="transformedErrors" :fields="children" :index="index" name="fields" :update-value="updateValuesFromInput">
-                <qas-form-generator v-model="nested[index]" :class="formClasses" :columns="formColumns" :disable="isDisabledRow(row)" :errors="transformedErrors[index]" :fields="children" :fields-props="fieldsProps" @update:model-value="updateValuesFromInput($event, index)">
+              <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" name="fields" :update-value="updateValuesFromInput">
+                <qas-form-generator v-model="nested[index]" :class="formClasses" :columns="formColumns" :disable="isDisabledRow(row)" :errors="transformedErrors[index]" :fields="getFields(index, row)" :fields-props="getFieldsProps(index, row)" @update:model-value="updateValuesFromInput($event, index)">
                   <template v-for="(slot, key) in $slots" #[key]="scope">
                     <slot v-bind="scope" :disabled="isDisabledRow(row)" :errors="transformedErrors" :index="index" :name="key" />
                   </template>
@@ -27,9 +29,7 @@
               </div>
             </div>
 
-            <div class="col-12">
-              <slot :fields="children" :index="index" :model="nested[index]" name="custom-fields" :update-value="updateValuesFromInput" />
-            </div>
+            <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" :model="nested[index]" name="after-fields" :update-value="updateValuesFromInput" />
           </div>
         </template>
       </component>
@@ -37,10 +37,10 @@
       <div v-if="useAdd">
         <slot :add="add" name="add-input">
           <div v-if="showAddFirstInputButton" class="text-left">
-            <qas-btn class="q-px-sm" color="primary" variant="tertiary" @click="add()">{{ addFirstInputLabel }}</qas-btn>
+            <qas-btn class="q-px-sm" color="primary" data-cy="nested-fields-add-btn" :label="addFirstInputLabel" variant="tertiary" @click="add()" />
           </div>
 
-          <div v-else-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" @click="add()">
+          <div v-else-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" data-cy="nested-fields-add-btn" @click="add()">
             <div class="col">
               <qas-input class="disabled no-pointer-events" hide-bottom-space :label="addInputLabel" outlined @focus="add()" />
             </div>
@@ -51,7 +51,7 @@
           </div>
 
           <div v-else class="text-left">
-            <qas-btn class="q-px-sm" color="primary" icon="sym_r_add" :label="addInputLabel" variant="tertiary" @click="add()" />
+            <qas-btn class="q-px-sm" color="primary" data-cy="nested-fields-add-btn" icon="sym_r_add" :label="addInputLabel" variant="tertiary" @click="add()" />
           </div>
         </slot>
       </div>
@@ -108,7 +108,7 @@ export default {
       type: Object,
       default: () => {
         return {
-          color: 'grey-9',
+          color: 'grey-10',
           icon: 'sym_r_delete',
           label: 'Excluir',
           variant: 'tertiary'
@@ -148,14 +148,19 @@ export default {
       default: () => ({})
     },
 
+    fieldsHandlerFn: {
+      type: Function,
+      default: undefined
+    },
+
     fieldsProps: {
-      type: Object,
+      type: [Object, Function],
       default: () => ({})
     },
 
     formColumns: {
-      type: Object,
-      default: () => ({})
+      type: [Array, String, Object],
+      default: () => []
     },
 
     formGutter: {
@@ -381,6 +386,24 @@ export default {
       return list
     },
 
+    getFields (index, row) {
+      const fields = this.children
+
+      if (this.fieldsHandlerFn) {
+        return this.fieldsHandlerFn({ fields, index, row })
+      }
+
+      return fields
+    },
+
+    getFieldsProps (index, row) {
+      if (typeof this.fieldsProps === 'function') {
+        return this.fieldsProps({ index, row })
+      }
+
+      return this.fieldsProps
+    },
+
     add (row = {}) {
       const payload = { ...this.rowObject, ...row }
       const hasIdentifierKey = payload[this.identifierItemKey]

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

@@ -54,17 +54,25 @@ props:
     type: Object
     examples: ["{ name: 'meuNested', type: 'nested', label: 'Campo nested', children: [...] }"]
 
+  fields-handler-fn:
+    desc: Função para controlar a visibilidade dos campos do formulário para cada linha do nested.
+    type: Function
+    examples: ["({ fields, index, row }) => fields"]
+
   fields-props:
-    desc: Propriedade para repassar propriedades para cada campo individualmente.
+    desc: Propriedade para repassar propriedades para cada campo individualmente. Ao utilizar uma função de callback, você recebe como parâmetro o "index" e "row" de cada linha do nested.
     default: {}
-    type: Object
-    examples: ["{ name: { dense: true, onClick: () => alert('Estou sendo clicado') } }"]
+    type: [Object, Function]
+    examples: [
+      "{ name: { dense: true, onClick: () => alert('Estou sendo clicado') } }",
+      "({ index, row }) => ({ name: { disable: !row.status })"
+    ]
 
   form-columns:
     desc: Colunas do grid de cada campo.
-    default: {}
-    type: Object
-    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]"]
+    default: col-6
+    type: [Array, String, Object]
+    examples: ["[{ sm: 6, md: 12 }]", "{ name: { sm: 6, md: 12 } }", "12"]
 
   form-gutter:
     desc: Espaçamento entre cada campo.
@@ -150,22 +158,49 @@ slots:
         type: Function
         examples: ["add({ name: 'novo valor' })"]
 
-  custom-fields:
-    desc: Slot para adicionar um campo customizado.
+  before-fields:
+    desc: Slot para adicionar conteúdo antes dos campos do formulário.
     scope:
+      errors:
+        desc: Erros dos campos.
+        type: Object
+
       fields:
         desc: Campos atuais.
-        default: {}
         type: Object
 
       index:
-        desc: Index atual dos campos
+        desc: Index atual dos campos.
         type: Number
 
+      model:
+        desc: Model da linha atual.
+        type: Object
+
+      'updateValue -> function(value, index)':
+        desc: Função para atualizar o model, passando o novo valor e o index.
+        type: Function
+        examples: ["updateValue({ name: 'novo valor' }, 2)"]
+
+  after-fields:
+    desc: Slot para adicionar conteúdo após os campos do formulário.
+    scope:
       errors:
-        desc: Index atual dos campos
+        desc: Erros dos campos.
+        type: Object
+
+      fields:
+        desc: Campos atuais.
+        type: Object
+
+      index:
+        desc: Index atual dos campos.
         type: Number
 
+      model:
+        desc: Model da linha atual.
+        type: Object
+
       'updateValue -> function(value, index)':
         desc: Função para atualizar o model, passando o novo valor e o index.
         type: Function
@@ -176,16 +211,15 @@ slots:
     scope:
       fields:
         desc: Campos atuais.
-        default: {}
         type: Object
 
       index:
-        desc: Index atual dos campos
+        desc: Index atual dos campos.
         type: Number
 
       errors:
-        desc: Index atual dos campos
-        type: Number
+        desc: Erros dos campos.
+        type: Object
 
       'updateValue -> function(value, index)':
         desc: Função para atualizar o model, passando o novo valor e o index.
@@ -205,14 +239,13 @@ slots:
 
       errors:
         desc: Erros dos campos
-        type: Number
+        type: Object
 
       'updateValue -> function(value, index)':
         desc: Função para atualizar o model, passando o novo valor e o index.
         type: Function
         examples: ["updateValue({ name: 'novo valor' }, 2)"]
 
-
 events:
   '@update:model-value -> function (value)':
     desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
@@ -220,3 +253,16 @@ events:
       value:
         desc: Novo valor do v-model
         type: String
+
+selectors:
+  'nested-fields-[fieldName]':
+    desc: Seletor criado a partir da propriedade "name" do campo.
+    examples: ['data-cy="nested-fields-companies"']
+
+  'nested-fields-item':
+    desc: Seletor para cada item do nested.
+    examples: ['data-cy="nested-fields-item"']
+
+  'nested-fields-add-btn':
+    desc: Seletor para os botões de adicionar itens ao nested.
+    examples: ['data-cy="nested-fields-add-btn"']

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

@@ -2,7 +2,7 @@
   <div>
     <q-toolbar class="justify-between q-mb-lg q-px-none qas-page-header">
       <div class="ellipsis">
-        <q-toolbar-title v-if="title" class="text-grey-9 text-h3">
+        <q-toolbar-title v-if="title" class="text-h3">
           {{ title }}
         </q-toolbar-title>
 
@@ -28,11 +28,8 @@
 import QasHeaderActions from '../header-actions/QasHeaderActions.vue'
 
 import { castArray } from 'lodash-es'
-import { useHistory } from '../../composables'
 import { createMetaMixin } from 'quasar'
 
-const { history } = useHistory()
-
 export default {
   name: 'QasPageHeader',
 
@@ -94,13 +91,6 @@ export default {
           item.route = { name: item.routeName }
         }
 
-        const historyList = history.list
-
-        if (historyList.length && item?.route?.name) {
-          const previous = historyList.find(history => history.name === item.route.name)
-          item.route.query = previous ? previous.query : null
-        }
-
         return item
       })
     },

package/src/components/pagination/QasPagination.vue

@@ -38,7 +38,7 @@ export default {
       tertiary,
       false,
       false,
-      grey-9
+      grey-10
     );
 
     min-width: 24px !important;

package/src/components/search-input/QasSearchInput.vue

@@ -3,11 +3,11 @@
     <qas-input ref="input" v-model="model" v-bind="$attrs" class="bg-white rounded-borders-sm" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" inputmode="search" type="search">
       <template #prepend>
         <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
-        <qas-btn v-else color="grey-9" icon="sym_r_search" variant="tertiary" @click="$emit('filter')" />
+        <qas-btn v-else color="grey-10" icon="sym_r_search" variant="tertiary" @click="$emit('filter')" />
       </template>
 
       <template #append>
-        <qas-btn v-if="hasSearch" color="grey-9" icon="sym_r_clear" variant="tertiary" @click="clear" />
+        <qas-btn v-if="hasSearch" color="grey-10" icon="sym_r_clear" variant="tertiary" @click="clear" />
 
         <slot name="after-clear" />
       </template>

package/src/components/select-list-dialog/QasSelectListDialog.vue

@@ -20,7 +20,7 @@
       v-if="hasBox"
       class="q-mt-md relative-position"
     >
-      <span class="text-grey-9 text-subtitle1">
+      <span class="text-grey-10 text-subtitle1">
         {{ props.listLabel }}
       </span>
 
@@ -184,7 +184,7 @@ const labelProps = computed(() => {
   return {
     label: props.label,
     margin: 'none',
-    color: hasError.value ? 'negative' : 'grey-9'
+    color: hasError.value ? 'negative' : 'grey-10'
   }
 })
 
@@ -268,7 +268,7 @@ function useList () {
 
   function getRemoveButtonProps ({ option }) {
     return {
-      color: 'grey-9',
+      color: 'grey-10',
       icon: 'sym_r_delete',
       variant: 'tertiary',
       disable: props.disable || !!option.disable,

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

@@ -149,7 +149,7 @@ export default {
           field: name,
           label,
           name,
-          headerClasses: 'text-grey-9'
+          headerClasses: 'text-grey-10'
         })
       }
 
@@ -333,13 +333,17 @@ export default {
 
     td {
       @include set-typography($body1);
+
+      &:before {
+        transition: background-color var(--qas-generic-transition);
+      }
     }
 
     tr {
-      transition: background-color var(--qas-generic-transition);
-
       &:hover {
-        background-color: $grey-2;
+        td:before {
+          background-color: var(--qas-background-color);
+        }
       }
     }
 

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

@@ -186,7 +186,7 @@ export default {
     }
 
     &__arrow:not(&--faded) {
-      color: $grey-9;
+      color: $grey-10;
       transition: color var(--qas-generic-transition);
 
       &:hover {

package/src/components/timeline/QasTimeline.vue

@@ -21,7 +21,7 @@
             </slot>
 
             <slot :item="item" name="description">
-              <div class="text-body1 text-grey-9">
+              <div class="text-body1 text-grey-10">
                 {{ item[descriptionKey] }}
               </div>
             </slot>
@@ -89,7 +89,7 @@ function getFormattedValue (item, mask) {
   }
 
   .q-timeline__subtitle {
-    color: $dark;
+    color: $grey-10;
     opacity: initial;
     padding-right: 0;
     position: relative;

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

@@ -9,7 +9,7 @@
 
           <span v-if="hasMenuButton(node)" class="q-ml-sm">
             <!-- TODO: rever para o uso QasActionsMenu -->
-            <qas-btn color="grey-9" icon="sym_r_more_vert" variant="tertiary" @click.stop.prevent>
+            <qas-btn color="grey-10" icon="sym_r_more_vert" variant="tertiary" @click.stop.prevent>
               <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)">

package/src/components/uploader/QasUploader.vue

@@ -621,7 +621,7 @@ export default {
 
     &__header {
       background-color: transparent;
-      color: $grey-9;
+      color: $grey-10;
     }
 
     &__list {

package/src/components/uploader/private/PvUploaderGalleryCard.vue

@@ -208,7 +208,7 @@ export default {
 
             destroy: {
               label: 'Excluir',
-              color: 'grey-9',
+              color: 'grey-10',
               icon: 'sym_r_delete',
 
               // callback

package/src/components/welcome/QasWelcome.vue

@@ -2,11 +2,11 @@
   <div class="q-mb-xl qas-welcome text-left">
     <div class="items-center justify-between row">
       <div>
-        <h3 class="text-grey-9 text-h3">
+        <h3 class="text-h3">
           {{ welcomeMessage }}<span v-if="firstName">, {{ firstName }}</span>
         </h3>
 
-        <div class="text-caption text-grey-8">{{ currentDay }}</div>
+        <div class="text-caption">{{ currentDay }}</div>
       </div>
 
       <slot name="actions">

package/src/composables/use-history.js

@@ -1,5 +1,4 @@
 import { reactive, computed } from 'vue'
-import { findLastIndex } from 'lodash-es'
 
 const history = reactive({ list: [] })
 
@@ -7,17 +6,18 @@ export default function () {
   const hasPreviousRoute = computed(() => history.list.length > 1)
 
   function getPreviousRoute (currentRoute) {
-    const index = findLastIndex(history.list, item => item.name === currentRoute.name)
+    const index = history.list.findLastIndex(item => item.name === currentRoute.name)
 
     if (~index) {
       history.list.splice(index, 1)
     }
 
-    return history.list[history.list.length - 1]
+    return history.list.at(-1)
   }
 
   function addRoute (route) {
-    const routeExistsInList = history.list?.[history.list?.length - 1]?.name === route.name
+    const lastRoute = history.list?.at(-1)
+    const routeExistsInList = lastRoute?.name === route.name
 
     if (routeExistsInList) return
 

package/src/css/components/base.scss

@@ -1,5 +1,6 @@
 body {
   background-color: $background-color;
+  color: $grey-8;
 }
 
 .material-symbols-rounded {

package/src/css/components/button.scss

@@ -61,8 +61,8 @@
       color: $grey-6 !important;
     }
 
-    &-grey-9 {
-      color: $grey-9 !important;
+    &-grey-10 {
+      color: $grey-10 !important;
     }
 
     &-primary {

package/src/css/components/checkbox.scss

@@ -0,0 +1,12 @@
+.q-checkbox {
+  &__label {
+    @include set-typography($body1);
+  }
+
+  &.disabled {
+    .q-checkbox__label,
+    .q-checkbox__inner {
+      color: $grey-6;
+    }
+  }
+}

package/src/css/components/editor.scss

@@ -0,0 +1,7 @@
+.q-editor {
+  &__content {
+    @include set-typography($body1);
+
+    color: $grey-10;
+  }
+}

package/src/css/components/field.scss

@@ -1,4 +1,24 @@
-.q-field--outlined .q-field__control {
-  background-color: white;
-  border-radius: $generic-border-radius;
+.q-field {
+  &__label,
+  &--dense &__label {
+    @include set-typography($body1);
+  }
+
+  &__native,
+  &__input,
+  &--dense &__native,
+  &--dense &__input {
+    @include set-typography($body1);
+
+    color: $grey-10;
+
+    &::placeholder {
+      color: $grey-6;
+    }
+  }
+
+  &--outlined .q-field__control {
+    background-color: white;
+    border-radius: $generic-border-radius;
+  }
 }

package/src/css/components/index.scss

@@ -1,7 +1,10 @@
 @import './base';
 @import './button';
+@import './checkbox';
+@import './editor';
 @import './field';
 @import './item';
 @import './radio';
 @import './scrollbar';
 @import './tabs';
+@import './toggle';

package/src/css/components/item.scss

@@ -26,7 +26,7 @@
   }
 
   &--clickable:not(&--active) {
-    color: $grey-9;
+    color: $grey-10;
     transition: color 300ms;
 
     &:not(&.q-router-link--active):hover {

package/src/css/components/radio.scss

@@ -1,3 +1,16 @@
-.q-radio__inner::before {
-  color: $primary;
+.q-radio {
+  &__label {
+    @include set-typography($body1);
+  }
+
+  &__inner::before {
+    color: $primary;
+  }
+
+  &.disabled {
+    .q-radio__label,
+    .q-radio__inner {
+      color: $grey-6;
+    }
+  }
 }

package/src/css/components/toggle.scss

@@ -0,0 +1,11 @@
+.q-toggle {
+  &__label {
+    @include set-typography($body1);
+  }
+
+  &.disabled {
+    .q-toggle__label {
+      color: $grey-6;
+    }
+  }
+}

package/src/css/variables/typography.scss

@@ -33,7 +33,7 @@ $h3: (
 );
 
 $h4: (
-  size: 1.125rem,
+  size: 1.25rem,
   line-height: 140%,
   letter-spacing: 0,
   weight: 600,
@@ -137,3 +137,13 @@ $h-tags: (
     margin: map.get($value, 'margin');
   }
 }
+
+// Defini as cores para os headings
+h1, .text-h1,
+h2, .text-h2,
+h3, .text-h3,
+h4, .text-h4,
+h5, .text-h5,
+h6, .text-h6 {
+  color: $grey-10;
+}

package/src/enums/Align.js

@@ -0,0 +1,7 @@
+export const FlexAlign = {
+  Start: 'start',
+  End: 'end',
+  Center: 'center',
+  Around: 'around',
+  Between: 'between'
+}

package/src/index.scss

@@ -9,7 +9,7 @@ $accent: var(--q-accent);
 
 // Asteroid variables
 :root {
-  --qas-background-color: #fbfbfb;
+  --qas-background-color: rgba(15, 83, 175, 0.03);
   --qas-border-grey: #{$grey-4};
   --qas-generic-border-radius: 4px;
   --qas-generic-transition: 300ms;
@@ -25,6 +25,9 @@ $border-grey: var(--qas-border-grey);
 // variables
 @import './css/variables/index';
 
+// mixins
+@import './css/mixins/index';
+
 // components
 @import './css/components/index';
 
@@ -33,6 +36,3 @@ $border-grey: var(--qas-border-grey);
 
 // utils
 @import './css/utils/index';
-
-// mixins
-@import './css/mixins/index';