@bildvitta/quasar-ui-asteroid 3.0.0 → 3.1.0-beta.2

package/dist/vetur/asteroid-attributes.json

@@ -335,6 +335,10 @@
     "description": "Colunas do grid de cada campo.",
     "type": "array|string|object"
   },
+  "qas-form-generator/disable": {
+    "description": "Deixa os campos desabilitados enviando a prop \"disable\" para cada campo.",
+    "type": "boolean"
+  },
   "qas-form-generator/error": {
     "description": "Objeto contendo propriedades contendo a mensagem de erro.",
     "type": "object"
@@ -671,6 +675,10 @@
     "description": "Quando excluímos uma \"row\" e propriedade \"useRemoveOnDestroy\" for \"false\", adicionamos uma propriedade para saber que é para ser deletada, com esta prop você escolhe como se chamará essa chave.",
     "type": "string"
   },
+  "qas-nested-fields/disabled-rows": {
+    "description": "Com esta propriedade é possível desabilitar rows (linhas) especificas passando um array com chaves identificadoras, ou caso queira desativar todas passando um boolean \"true\" (isto vai remover todos os botões da linha, duplicar e excluir).",
+    "type": "array|boolean"
+  },
   "qas-nested-fields/errors": {
     "description": "Propriedade de erros para mostrar nos campos gerados.",
     "type": "array|object"
@@ -707,6 +715,10 @@
     "description": "Objeto contendo valores iniciais do model de cada linha (row).",
     "type": "object"
   },
+  "qas-nested-fields/use-add": {
+    "description": "Controla quando vai ter seção de \"adicionar\" novas rows (linhas).",
+    "type": "boolean"
+  },
   "qas-nested-fields/use-animation": {
     "description": "Controla a animação na hora de setar o scroll.",
     "type": "boolean"

package/dist/vetur/asteroid-tags.json

@@ -179,6 +179,7 @@
   "qas-form-generator": {
     "attributes": [
       "columns",
+      "disable",
       "error",
       "fields-props",
       "fields",
@@ -313,6 +314,7 @@
       "button-destroy-props",
       "button-duplicate-props",
       "destroy-key",
+      "disabled-rows",
       "errors",
       "field",
       "fields-props",
@@ -322,6 +324,7 @@
       "model-value",
       "row-label",
       "row-object",
+      "use-add",
       "use-animation",
       "use-destroy-always",
       "use-duplicate",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.0.0",
+  "version": "3.1.0-beta.2",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",
@@ -45,6 +45,7 @@
     "sass": "^1.49.0"
   },
   "dependencies": {
+    "@bildvitta/store-adapter": "^1.0.0-beta.22",
     "@fawmi/vue-google-maps": "^0.9.4",
     "autonumeric": "^4.6.0",
     "axios": "^0.21.1",

package/src/components/app-bar/QasAppBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-header class="bg-white qas-app-bar shadow-14" height-hint="70">
+  <q-header class="bg-white qas-app-bar shadow-2" height-hint="70">
     <q-toolbar class="qas-app-bar__toolbar" color="bg-white">
       <q-ajax-bar color="white" position="top" size="2px" />
 
@@ -30,7 +30,7 @@
             <div class="ellipsis text-bold">{{ user.email }}</div>
           </div>
 
-          <q-menu anchor="bottom end" class="shadow-14" max-height="400px" :offset="[0, 5]" self="top end">
+          <q-menu anchor="bottom end" class="shadow-2" max-height="400px" :offset="[0, 5]" self="top end">
             <div class="qas-app-bar__user-menu">
               <div class="q-pa-lg text-center">
                 <button class="unset" @click="goToProfile">

package/src/components/box/QasBox.vue

@@ -22,7 +22,7 @@ export default {
     boxClass () {
       return {
         'border-primary-contrast': this.outlined,
-        'shadow-14': !this.unelevated
+        'shadow-2': !this.unelevated
       }
     }
   }

package/src/components/card/QasCard.vue

@@ -76,7 +76,7 @@ export default {
 
     cardClasses () {
       return {
-        'shadow-14': !this.unelevated,
+        'shadow-2': !this.unelevated,
         'border-primary': this.outlined,
         'no-shadow': this.outlined,
         'bg-white': this.outlined

package/src/components/delete/QasDelete.vue

@@ -10,6 +10,7 @@
 
 <script>
 import { Loading } from 'quasar'
+import { getAction } from '@bildvitta/store-adapter'
 import { NotifyError, NotifySuccess } from '../../plugins'
 import { useHistory } from '../../composables'
 
@@ -112,7 +113,11 @@ export default {
           `QasDelete - destroy -> Payload do parâmetro do ${this.entity}/destroy`, [payload]
         )
 
-        await this.$store.dispatch(`${this.entity}/destroy`, payload)
+        await getAction.call(this, {
+          entity: this.entity,
+          key: 'destroy',
+          payload
+        })
 
         NotifySuccess('Item deletado com sucesso!')
 

package/src/components/filters/QasFilters.vue

@@ -4,7 +4,7 @@
       <div v-if="showSearch" class="col">
         <slot :filter="filter" name="search">
           <q-form v-if="useSearch" @submit.prevent="filter()">
-            <qas-input v-model="search" :debounce="debounce" dense hide-bottom-space :outlined="false" :placeholder="searchPlaceholder" type="search">
+            <qas-input v-model="search" data-cy="filters-search-input" :debounce="debounce" dense hide-bottom-space :outlined="false" :placeholder="searchPlaceholder" type="search">
               <template #append>
                 <qas-btn v-if="hasSearch" color="grey-9" flat icon="o_clear" unelevated @click="clearSearch" />
                 <qas-btn v-if="!debounce" color="grey-9" flat icon="o_search" type="submit" unelevated @click="filter()" />
@@ -15,7 +15,7 @@
       </div>
 
       <slot v-if="showFilterButton" :filter="filter" name="filter-button">
-        <qas-btn v-if="useFilterButton" :color="filterButtonColor" flat icon="o_filter_list" :label="filterButtonLabel">
+        <qas-btn v-if="useFilterButton" :color="filterButtonColor" data-cy="filters-btn" flat icon="o_filter_list" :label="filterButtonLabel">
           <q-menu class="full-width" max-width="240px">
             <div v-if="isFetching" class="q-pa-xl text-center">
               <q-spinner color="grey" size="2em" />
@@ -27,12 +27,12 @@
 
             <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="filter()">
               <div v-for="(field, index) in fields" :key="index">
-                <qas-field v-model="filters[field.name]" dense :field="field" />
+                <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" dense :field="field" />
               </div>
 
               <div class="text-right">
-                <qas-btn class="q-mr-sm" flat label="Limpar" :no-caps="false" size="12px" unelevated @click="clearFilters" />
-                <qas-btn color="primary" label="Filtrar" :no-caps="false" size="12px" type="submit" unelevated />
+                <qas-btn class="q-mr-sm" data-cy="filters-clear-btn" flat label="Limpar" :no-caps="false" size="12px" unelevated @click="clearFilters" />
+                <qas-btn color="primary" data-cy="filters-submit-btn" label="Filtrar" :no-caps="false" size="12px" type="submit" unelevated />
               </div>
             </q-form>
           </q-menu>
@@ -41,7 +41,7 @@
     </div>
 
     <div v-if="useChip && hasActiveFilters" class="q-mt-md">
-      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="primary" dense removable size="md" text-color="white" @remove="removeFilter(filterItem)">{{ filterItem.label }} = "{{ getChipValue(filterItem.value) }}"</q-chip>
+      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="primary" :data-cy="`filters-${filterItem.value}-chip`" dense removable size="md" text-color="white" @remove="removeFilter(filterItem)">{{ filterItem.label }} = "{{ getChipValue(filterItem.value) }}"</q-chip>
     </div>
 
     <slot :context="mx_context" :filter="filter" :filters="activeFilters" :remove-filter="removeFilter" />
@@ -55,6 +55,7 @@ import QasBtn from '../btn/QasBtn.vue'
 import { camelize, camelizeKeys } from 'humps'
 import { humanize, parseValue } from '../../helpers/filters.js'
 import contextMixin from '../../mixins/context.js'
+import { getState, getAction } from '@bildvitta/store-adapter'
 
 export default {
   name: 'QasFilters',
@@ -148,7 +149,7 @@ export default {
     },
 
     fields () {
-      return this.$store.getters[`${this.entity}/filters`]
+      return getState.call(this, { entity: this.entity, key: 'filters' })
     },
 
     filterButtonColor () {
@@ -164,7 +165,7 @@ export default {
     },
 
     hasFields () {
-      return !!Object.keys(this.fields).length
+      return !!Object.keys(this.fields || {}).length
     },
 
     hasSearch () {
@@ -246,7 +247,12 @@ export default {
           [{ url: this.url }]
         )
 
-        const response = await this.$store.dispatch(`${this.entity}/fetchFilters`, { url: this.url })
+        const response = await getAction.call(this, {
+          entity: this.entity,
+          key: 'fetchFilters',
+          payload: { url: this.url }
+        })
+
         this.$emit('fetch-success', response)
 
         this.$qas.logger.group(

package/src/components/form-generator/QasFormGenerator.vue

@@ -9,14 +9,14 @@
         <div :class="mx_classes">
           <div v-for="(field, key) in fieldsetItem.fields.visible" :key="key" :class="mx_getFieldClass(key)">
             <slot :field="field" :name="`field-${field.name}`">
-              <qas-field v-bind="fieldsProps[field.name]" :error="errors[key]" :field="field" :model-value="modelValue[field.name]" @update:model-value="updateModelValue(field.name, $event)" />
+              <qas-field :disable="disable" v-bind="fieldsProps[field.name]" :error="errors[key]" :field="field" :model-value="modelValue[field.name]" @update:model-value="updateModelValue(field.name, $event)" />
             </slot>
           </div>
         </div>
 
         <div v-for="(field, key) in fieldsetItem.fields.hidden" :key="key">
           <slot :field="field" :name="`field-${field.name}`">
-            <qas-field v-bind="fieldsProps[field.name]" :field="field" :model-value="modelValue[field.name]" @update:model-value="updateModelValue(field.name, $event)" />
+            <qas-field :disable="disable" v-bind="fieldsProps[field.name]" :field="field" :model-value="modelValue[field.name]" @update:model-value="updateModelValue(field.name, $event)" />
           </slot>
         </div>
       </div>
@@ -70,6 +70,10 @@ export default {
       validator: value => {
         return typeof value === 'boolean' || ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
       }
+    },
+
+    disable: {
+      type: Boolean
     }
   },
 

package/src/components/form-generator/QasFormGenerator.yml

@@ -10,6 +10,11 @@ props:
     type: [Array, String, Object]
     examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]"]
 
+  disable:
+    desc: Deixa os campos desabilitados enviando a prop "disable" para cada campo.
+    default: "false"
+    type: Boolean
+
   error:
     desc: Objeto contendo propriedades contendo a mensagem de erro.
     default: {}

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

@@ -34,6 +34,7 @@
 
 <script>
 import { isEqualWith } from 'lodash-es'
+import { getAction } from '@bildvitta/store-adapter'
 import { extend } from 'quasar'
 import { onBeforeRouteLeave } from 'vue-router'
 
@@ -269,7 +270,11 @@ export default {
           `QasFormView - fetchSingle -> payload do parâmetro do ${this.entity}/fetchSingle`, [payload]
         )
 
-        const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, payload)
+        const response = await getAction.call(this, {
+          entity: this.entity,
+          key: 'fetchSingle',
+          payload
+        })
 
         const { errors, fields, metadata, result } = response.data
 
@@ -404,7 +409,11 @@ export default {
           `QasFormView - submit -> payload do ${this.entity}/${this.mode}`, [payload]
         )
 
-        const response = await this.$store.dispatch(`${this.entity}/${this.mode}`, payload)
+        const response = await getAction.call(this, {
+          entity: this.entity,
+          key: this.mode,
+          payload
+        })
 
         if (this.useDialogOnUnsavedChanges) {
           this.cachedResult = extend(true, {}, this.modelValue)

package/src/components/grid-generator/QasGridGenerator.vue

@@ -3,11 +3,11 @@
     <div v-for="(field, key) in formattedFields" :key="key" :class="mx_getFieldClass(key, true)">
       <slot :field="slotValue[key]" :name="`field-${field.name}`">
         <slot :field="slotValue[key]" name="header">
-          <header :class="headerClass">{{ field.label }}</header>
+          <header :class="headerClass" :data-cy="`grid-generator-${field.name}-field`">{{ field.label }}</header>
         </slot>
 
         <slot :field="slotValue[key]" name="content">
-          <div :class="contentClass">{{ resultsByFields[key] }}</div>
+          <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`">{{ resultsByFields[key] }}</div>
         </slot>
       </slot>
     </div>

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="qas-list-items shadow-14">
-    <q-list bordered class="rounded-borders" separator>
+  <qas-box class="qas-list-items">
+    <q-list separator>
       <q-item v-for="(item, index) in list" :key="index" v-ripple :clickable="useClickableItem" @click="onClick({ item, index }, true)">
         <slot :index="index" :item="item" name="item">
           <q-item-section>
@@ -17,16 +17,18 @@
         </slot>
       </q-item>
     </q-list>
-  </div>
+  </qas-box>
 </template>
 
 <script>
 import QasBtn from '../btn/QasBtn.vue'
+import QasBox from '../box/QasBox.vue'
 
 export default {
   name: 'QasListItems',
 
   components: {
+    QasBox,
     QasBtn
   },
 

package/src/components/list-view/QasListView.vue

@@ -45,6 +45,7 @@
 import { viewMixin, contextMixin } from '../../mixins'
 import QasFilters from '../filters/QasFilters.vue'
 import { extend } from 'quasar'
+import { getState, getAction } from '@bildvitta/store-adapter'
 
 export default {
   components: {
@@ -106,11 +107,11 @@ export default {
     },
 
     resultsModel () {
-      return this.$store.getters[`${this.entity}/list`]
+      return getState.call(this, { entity: this.entity, key: 'list' })
     },
 
     totalPages () {
-      return this.$store.getters[`${this.entity}/totalPages`]
+      return getState.call(this, { entity: this.entity, key: 'totalPages' })
     },
 
     showResults () {
@@ -161,7 +162,11 @@ export default {
           `QasListView - fetchList -> Payload do parâmetro do ${this.entity}/fetchList`, [payload]
         )
 
-        const response = await this.$store.dispatch(`${this.entity}/fetchList`, payload)
+        const response = await getAction.call(this, {
+          entity: this.entity,
+          key: 'fetchList',
+          payload
+        })
 
         const { errors, fields, metadata } = response.data
 

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

@@ -12,7 +12,7 @@
               <div class="flex items-center justify-between q-py-xs">
                 <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" />
 
-                <div v-if="!useInlineActions" class="q-gutter-x-sm">
+                <div v-if="hasBlockActions(row)" class="q-gutter-x-sm">
                   <qas-btn v-if="useDuplicate" v-bind="buttonDuplicateProps" @click="add(row)" />
                   <qas-btn v-if="showDestroyBtn" v-bind="buttonDestroyProps" @click="destroy(index, row)" />
                 </div>
@@ -20,14 +20,14 @@
 
               <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" :errors="transformedErrors[index]" :fields="children" :fields-props="fieldsProps" @update:model-value="updateValuesFromInput($event, index)">
+                  <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)">
                     <template v-for="(slot, key) in $slots" #[key]="scope">
-                      <slot v-bind="scope" :errors="transformedErrors" :index="index" :name="key" />
+                      <slot v-bind="scope" :disabled="isDisabledRow(row)" :errors="transformedErrors" :index="index" :name="key" />
                     </template>
                   </qas-form-generator>
                 </slot>
 
-                <div v-if="useInlineActions" class="flex items-center qas-nested-fields__actions">
+                <div v-if="hasInlineActions(row)" class="flex items-center qas-nested-fields__actions">
                   <div class="col-auto">
                     <qas-btn v-if="useDuplicate" color="primary" flat icon="o_content_copy" round @click="add(row)" />
                   </div>
@@ -45,7 +45,7 @@
         </div>
       </component>
 
-      <div class="q-mt-md">
+      <div v-if="useAdd" class="q-mt-md">
         <slot :add="add" name="add-input">
           <div v-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" @click="add()">
             <div class="col">
@@ -125,6 +125,11 @@ export default {
       default: 'destroyed'
     },
 
+    disabledRows: {
+      type: [Array, Boolean],
+      default: false
+    },
+
     errors: {
       type: [Array, Object],
       default: () => ({})
@@ -174,6 +179,11 @@ export default {
       default: () => ({})
     },
 
+    useAdd: {
+      type: Boolean,
+      default: true
+    },
+
     useAnimation: {
       type: Boolean,
       default: true
@@ -347,6 +357,22 @@ export default {
       }
 
       return this.fieldLabel
+    },
+
+    isDisabledRow (row) {
+      if (!this.disabledRows) return false
+
+      if (typeof this.disabledRows === 'boolean') return true
+
+      return this.disabledRows.includes(row[this.identifierItemKey])
+    },
+
+    hasBlockActions (row) {
+      return !this.useInlineActions && !this.isDisabledRow(row)
+    },
+
+    hasInlineActions (row) {
+      return this.useInlineActions && !this.isDisabledRow(row)
     }
   }
 }

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

@@ -26,6 +26,12 @@ props:
     default: destroyed
     type: String
 
+  disabled-rows:
+    desc: Com esta propriedade é possível desabilitar rows (linhas) especificas passando um array com chaves identificadoras, ou caso queira desativar todas passando um boolean "true" (isto vai remover todos os botões da linha, duplicar e excluir).
+    default: "false"
+    type: [Array, Boolean]
+    examples: ["['my-uuid-from-row-1']", true]
+
   errors:
     desc: Propriedade de erros para mostrar nos campos gerados.
     default: {}
@@ -79,6 +85,11 @@ props:
     type: Object
     examples: ["{ name: '', cities: [] }"]
 
+  use-add:
+    desc: Controla quando vai ter seção de "adicionar" novas rows (linhas).
+    default: true
+    type: Boolean
+
   use-animation:
     desc: Controla a animação na hora de setar o scroll.
     default: true
@@ -164,12 +175,16 @@ slots:
   'field-[nome-da-chave]':
     desc: Repassa todos os slots e escopos do "QasFormGenerator".
     scope:
+      disabled:
+        desc: Retorna se a linha esta desabilitada
+        type: boolean
+
       index:
         desc: Index atual dos campos
         type: Number
 
       errors:
-        desc: Index atual dos campos
+        desc: Erros dos campos
         type: Number
 
       'updateValue -> function(value, index)':

package/src/components/single-view/QasSingleView.vue

@@ -26,6 +26,7 @@
 <script>
 import viewMixin from '../../mixins/view'
 import { markRaw } from 'vue'
+import { getGetter, getAction } from '@bildvitta/store-adapter'
 
 export default {
   name: 'QasSingleView',
@@ -60,7 +61,7 @@ export default {
     },
 
     resultModel () {
-      return this.$store.getters[`${this.entity}/byId`](this.id) || {}
+      return getGetter.call(this, { entity: this.entity, key: 'byId' })(this.id) || {}
     }
   },
 
@@ -92,7 +93,11 @@ export default {
           [payload]
         )
 
-        const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, payload)
+        const response = await getAction.call(this, {
+          entity: this.entity,
+          key: 'fetchSingle',
+          payload
+        })
 
         const { errors, fields, metadata } = response.data
 

package/src/components/sortable/QasSortable.vue

@@ -7,6 +7,7 @@
 <script>
 import { Loading, extend } from 'quasar'
 import Sortable from 'sortablejs'
+import { getAction } from '@bildvitta/store-adapter'
 
 import { NotifyError } from '../../plugins'
 
@@ -109,9 +110,13 @@ export default {
       Loading.show()
 
       try {
-        const response = await this.$store.dispatch(`${this.entity}/replace`, {
-          payload: { order: this.identifiers },
-          url: this.url || `${this.entity}/sort`
+        const response = await getAction.call(this, {
+          entity: this.entity,
+          key: 'replace',
+          payload: {
+            payload: { order: this.identifiers },
+            url: this.url || `${this.entity}/sort`
+          }
         })
 
         this.$emit('success', response)

package/src/css/variables/index.scss

@@ -1,3 +1,2 @@
 @import './button';
-@import './shadow';
 @import './typography';

package/src/mixins/search-filter.js

@@ -1,6 +1,7 @@
 import { decamelize } from 'humps'
 import { isEqual } from 'lodash'
 import { getNormalizedOptions } from '../helpers'
+import { getAction } from '@bildvitta/store-adapter'
 
 export default {
   props: {
@@ -148,13 +149,17 @@ export default {
 
         const { url, params, decamelizeFieldName } = this.mx_defaultLazyLoadingProps
 
-        const { data } = await this.$store.dispatch(`${this.entity}/fetchFieldOptions`, {
-          url,
-          field: decamelizeFieldName ? decamelize(this.name, { separator: '-' }) : this.name,
-          params: {
-            ...params,
-            search: this.mx_search,
-            offset: (this.mx_pagination.page - 1) * params.limit
+        const { data } = await getAction.call(this, {
+          entity: this.entity,
+          key: 'fetchFieldOptions',
+          payload: {
+            url,
+            field: decamelizeFieldName ? decamelize(this.name, { separator: '-' }) : this.name,
+            params: {
+              ...params,
+              search: this.mx_search,
+              offset: (this.mx_pagination.page - 1) * params.limit
+            }
           }
         })
 

package/src/css/variables/shadow.scss

@@ -1,33 +0,0 @@
-$shadow-color: $accent;
-
-$elevation-umbra: $shadow-color;
-$elevation-penumbra: $shadow-color;
-$elevation-ambient: $shadow-color;
-
-// Embossed
-$shadow-2: (
-  0 1px 5px $elevation-umbra,
-  0 2px 2px $elevation-penumbra,
-  0 3px 1px -2px $elevation-ambient
-);
-
-// Shallow
-$shadow-6: (
-  0 3px 5px -1px $elevation-umbra,
-  0 6px 10px $elevation-penumbra,
-  0 1px 18px $elevation-ambient
-);
-
-// Overhead
-$shadow-14: (
-  0 7px 9px -4px $elevation-umbra,
-  0 14px 21px 2px $elevation-penumbra,
-  0 5px 26px 4px $elevation-ambient
-);
-
-// levite
-$shadow-20: (
-  0 10px 13px -6px $elevation-umbra,
-  0 20px 31px 3px $elevation-penumbra,
-  0 8px 38px 7px $elevation-ambient
-);