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

package/dist/vetur/asteroid-attributes.json

@@ -227,6 +227,10 @@
     "description": "Model para saber se está deletando.",
     "type": "boolean"
   },
+  "qas-delete/use-auto-delete-route": {
+    "description": "Controla se sempre que deletar com sucesso um item, remove todas as rotas do histórico de rotas que contenha id do item deletado.",
+    "type": "boolean"
+  },
   "qas-dialog/actions-props": {
     "description": "Props repassadas para o \"QasActions\".",
     "type": "object"
@@ -311,6 +315,10 @@
     "description": "Envia como parâmetro para a action \"fetchFilters\" do modulo correspondente a \"entity\".",
     "type": "string"
   },
+  "qas-filters/force-refetch": {
+    "description": "Força refazer o \"fetch\" mesmo caso já exista dados na store de filters.",
+    "type": "boolean"
+  },
   "qas-form-generator/error": {
     "description": "Objeto contendo propriedades contendo a mensagem de erro.",
     "type": "object"
@@ -344,8 +352,8 @@
     "type": "string"
   },
   "qas-form-view/cancel-route": {
-    "description": "Configuração do botão de \"cancelar\", caso seja \"false\", não exibe o botão, caso precise passar uma path direto use como string, e se precisar passar uma configuração como \"name\" ou \"params\" passe como objeto.",
-    "type": "boolean|object|string"
+    "description": "Configuração do botão de \"cancelar\", caso seja \"false\", não exibe o botão, caso precise passar uma path direto use como string, caso precisar passar uma configuração como \"name\" ou \"params\" passe como objeto, agora se precisar de uma logica especifica quando clicar no botão de cancelar, você pode passar uma função que ela será executado.",
+    "type": "boolean|object|string|function"
   },
   "qas-form-view/custom-id": {
     "description": "Por padrão, o componente vai pegar o \"id\" que vem como parâmetro na url, caso queira que o id seja diferente da url, use esta prop.",
@@ -481,7 +489,7 @@
   },
   "qas-input/model-value": {
     "description": "Model do componente.",
-    "type": "string"
+    "type": "string|input"
   },
   "qas-input/unmasked-value": {
     "description": "Remove a mascara do v-model.",
@@ -491,6 +499,18 @@
     "description": "Controla borda do input.",
     "type": "boolean"
   },
+  "qas-input/error": {
+    "description": "Controla cor da borda do input.",
+    "type": "boolean"
+  },
+  "qas-input/error-message": {
+    "description": "Controla mensagem de erro (apenas quando \"error\" for \"true\").",
+    "type": "string"
+  },
+  "qas-input/remove-error-on-type": {
+    "description": "Limpa os erros do campo caso os mesmos existam toda vez que o model atualiza.",
+    "type": "boolean"
+  },
   "qas-label/count": {
     "description": "Contador que vai ficar ao lado do texto.",
     "type": "number"
@@ -947,6 +967,10 @@
     "description": "Tipo da imagem gerada.",
     "type": "string"
   },
+  "qas-signature-uploader/dialog-props": {
+    "description": "Repassa propriedades para o \"QasDialog\".",
+    "type": "object"
+  },
   "qas-signature-uploader/upload-label": {
     "description": "Rótulo do uploader.",
     "type": "string"

package/dist/vetur/asteroid-tags.json

@@ -127,7 +127,8 @@
       "dialog-props",
       "url",
       "tag",
-      "deleting"
+      "deleting",
+      "use-auto-delete-route"
     ],
     "description": "Componente para C.R.U.D. responsável por deletar (Delete)."
   },
@@ -167,7 +168,8 @@
       "use-search",
       "use-search-on-type",
       "search-placeholder",
-      "url"
+      "url",
+      "force-refetch"
     ],
     "description": "Componente para criação de filtros dinâmicos."
   },
@@ -237,7 +239,10 @@
     "attributes": [
       "model-value",
       "unmasked-value",
-      "outlined"
+      "outlined",
+      "error",
+      "error-message",
+      "remove-error-on-type"
     ],
     "description": "Componente para input que implementa o \"QInput\" repassando propriedades, slots e eventos."
   },
@@ -437,6 +442,7 @@
   },
   "qas-signature-uploader": {
     "attributes": [
+      "dialog-props",
       "upload-label",
       "signature-label",
       "model-value",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-beta.2",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/asteroid.js

@@ -1,3 +1,4 @@
 export * from './helpers'
 export * from './mixins'
 export * from './vue-plugin'
+export * from './composables'

package/src/components/actions-menu/QasActionsMenu.vue

@@ -1,14 +1,12 @@
 <template>
-  <qas-btn class="qas-actions-menu" color="primary" hide-label-on-small-screen :icon="icon" :label="label" outline>
-    <span>{{ label }}</span>
-
+  <qas-btn class="qas-actions-menu" color="primary" hide-label-on-small-screen :icon="icon" :label="label" outline padding="md">
     <q-menu class="qas-actions-menu__menu">
       <q-list class="qas-actions-menu__list" separator>
         <slot v-for="(item, key) in list" :item="item" :name="key">
           <q-item :key="key" class="text-bold text-primary" clickable v-bind="item.props" @click="onClick(item)">
             <q-item-section>
               <div class="flex items-center justify-center q-gutter-x-md">
-                <q-icon :name="item.icon" :size="item.iconSize" />
+                <q-icon :name="item.icon" size="sm" />
                 <div>{{ item.label }}</div>
               </div>
             </q-item-section>
@@ -18,7 +16,7 @@
         <qas-delete v-if="hasDelete" v-bind="deleteProps" class="text-negative" clickable tag="q-item" @success="onDeleteSuccess">
           <q-item-section>
             <div class="flex items-center justify-center q-gutter-x-sm text-bold">
-              <q-icon :name="deleteIcon" />
+              <q-icon :name="deleteIcon" size="sm" />
               <div>{{ deleteLabel }}</div>
             </div>
           </q-item-section>

package/src/components/btn/QasBtn.vue

@@ -1,6 +1,6 @@
 <template>
   <q-btn color="primary" no-caps unelevated v-bind="attributes">
-    <slot v-if="showLabel">{{ $attrs.label }}</slot>
+    <slot v-if="showLabel" />
 
     <template v-for="(_, name) in slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
@@ -16,8 +16,6 @@ export default {
 
   mixins: [screenMixin],
 
-  inheritAttrs: false,
-
   props: {
     hideLabelOnSmallScreen: {
       type: Boolean
@@ -27,7 +25,11 @@ export default {
   computed: {
     attributes () {
       const { label, ...attributes } = this.$attrs
-      return attributes
+
+      return {
+        ...(this.showLabel && { label }),
+        ...attributes
+      }
     },
 
     hasLabel () {

package/src/components/delete/QasDelete.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" v-bind="$attrs" @click="openConfirmDialog">
+  <component v-bind="$attrs" :is="tag" @click="openConfirmDialog">
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
@@ -11,6 +11,7 @@
 <script>
 import { Loading } from 'quasar'
 import { NotifyError, NotifySuccess } from '../../plugins'
+import { useHistory } from '../../composables'
 
 import QasBtn from '../btn/QasBtn.vue'
 import QasDialog from '../dialog/QasDialog.vue'
@@ -51,6 +52,11 @@ export default {
 
     deleting: {
       type: Boolean
+    },
+
+    useAutoDeleteRoute: {
+      default: true,
+      type: Boolean
     }
   },
 
@@ -98,9 +104,21 @@ export default {
       this.$emit('update:deleting', true)
 
       try {
+        const { destroyRoutes, history } = useHistory()
+
         await this.$store.dispatch(`${this.entity}/destroy`, { id: this.id, url: this.url })
+
         NotifySuccess('Item deletado com sucesso!')
+
+        if (this.useAutoDeleteRoute) {
+          // remove todas rotas que possuem o id do item excluído.
+          const routesToBeDeleted = this.getRoutesToBeDeletedById(history.list)
+          destroyRoutes(routesToBeDeleted)
+        }
+
+        // cria um evento para notificar que o item foi excluído no "window".
         this.createDeleteSuccessEvent()
+
         this.$emit('success')
       } catch (error) {
         NotifyError('Ops! Não foi possível deletar o item.')
@@ -111,6 +129,10 @@ export default {
       }
     },
 
+    getRoutesToBeDeletedById (routes = []) {
+      return routes.filter(({ params }) => params.id === this.id)
+    },
+
     createDeleteSuccessEvent () {
       const event = new CustomEvent('delete-success', {
         bubbles: false,

package/src/components/delete/QasDelete.yml

@@ -35,6 +35,10 @@ props:
     examples: [v-model:deleting="isDeleting"]
     model: true
 
+  use-auto-delete-route:
+    desc: Controla se sempre que deletar com sucesso um item, remove todas as rotas do histórico de rotas que contenha id do item deletado.
+    default: true
+    type: Boolean
 
 slots:
   default:

package/src/components/dialog/QasDialog.vue

@@ -155,12 +155,12 @@ export default {
       this.useForm && this.$emit('validate', await this.$refs.form.validate())
     },
 
-    // metodo para funcionar como plugin
+    // método para funcionar como plugin
     show () {
       this.$refs.dialog.show()
     },
 
-    // metodo para funcionar como plugin
+    // método para funcionar como plugin
     hide () {
       this.$refs.dialog.hide()
     },

package/src/components/field/QasField.vue

@@ -74,7 +74,6 @@ export default {
         prefix,
         type,
         mask,
-        pattern,
         maxFiles,
         searchable,
         gmt
@@ -125,7 +124,7 @@ export default {
         number: { is: 'qas-input', type: 'number', ...input },
         hidden: { is: 'input', name, type },
         email: { is: 'qas-input', type, ...input },
-        password: { is: 'qas-password-input', type, pattern, hideStrengthChecker: !pattern, ...input },
+        password: { is: 'qas-password-input', ...input },
 
         decimal: { ...numericInput, mode: 'decimal' },
         money: { ...numericInput, mode: 'money' },

package/src/components/filters/QasFilters.vue

@@ -16,7 +16,7 @@
 
       <slot v-if="showFilterButton" :filter="filter" name="filter-button">
         <q-btn v-if="useFilterButton" :color="filterButtonColor" flat icon="o_filter_list" :label="filterButtonLabel">
-          <q-menu @before-show="fetchFilters">
+          <q-menu>
             <div v-if="isFetching" class="q-pa-xl text-center">
               <q-spinner color="grey" size="2em" />
             </div>
@@ -98,6 +98,10 @@ export default {
     url: {
       default: '',
       type: String
+    },
+
+    forceRefetch: {
+      type: Boolean
     }
   },
 
@@ -227,7 +231,7 @@ export default {
     },
 
     async fetchFilters () {
-      if (this.hasFields || !this.useFilterButton) {
+      if (!this.forceRefetch && (this.hasFields || !this.useFilterButton)) {
         return null
       }
 

package/src/components/filters/QasFilters.yml

@@ -38,6 +38,10 @@ props:
     desc: Envia como parâmetro para a action "fetchFilters" do modulo correspondente a "entity".
     type: String
 
+  force-refetch:
+    desc: Força refazer o "fetch" mesmo caso já exista dados na store de filters.
+    type: Boolean
+
 slots:
   search:
     desc: Slot para seção do campo de busca.

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

@@ -1,5 +1,5 @@
 <template>
-  <component :is="mx_componentTag">
+  <component :is="mx_componentTag" :class="mx_componentClass">
     <header v-if="mx_hasHeaderSlot">
       <slot name="header" />
     </header>
@@ -36,7 +36,7 @@ import { isEqualWith } from 'lodash-es'
 import { extend } from 'quasar'
 import { onBeforeRouteLeave } from 'vue-router'
 
-import { addRoute, history } from '../../store/history'
+import { useHistory } from '../../composables'
 import { NotifyError, NotifySuccess } from '../../plugins'
 
 import QasBtn from '../btn/QasBtn.vue'
@@ -62,7 +62,7 @@ export default {
 
     cancelRoute: {
       default: '',
-      type: [Boolean, Object, String]
+      type: [Boolean, Object, String, Function]
     },
 
     customId: {
@@ -181,10 +181,6 @@ export default {
       return this.disable || this.isSubmitting
     },
 
-    history () {
-      return history.list
-    },
-
     fieldsNameWithDefaultValue () {
       return Object.keys(this.fields).filter(field => 'default' in this.fields[field])
     }
@@ -253,7 +249,7 @@ export default {
         this.mx_updateModels({
           errors: errors,
           fields: this.mx_fields,
-          metadata: metadata
+          metadata
         })
 
         if (result) {
@@ -282,9 +278,11 @@ export default {
     },
 
     handleCancelRoute () {
-      const acceptTypes = ['string', 'object']
+      if (typeof this.cancelRoute === 'function') {
+        return this.cancelRoute()
+      }
 
-      if (this.cancelRoute && acceptTypes.includes(typeof this.cancelRoute)) {
+      if (this.cancelRoute && ['string', 'object'].includes(typeof this.cancelRoute)) {
         return this.$router.push(this.cancelRoute)
       }
 
@@ -297,6 +295,8 @@ export default {
     handleDialog (next) {
       this.openDialog()
 
+      const { addRoute } = useHistory()
+
       this.defaultDialogProps.ok.onClick = () => addRoute(this.$route)
       this.defaultDialogProps.cancel.onClick = next
     },

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

@@ -10,10 +10,15 @@ props:
     type: String
 
   cancel-route:
-    desc: Configuração do botão de "cancelar", caso seja "false", não exibe o botão, caso precise passar uma path direto use como string, e se precisar passar uma configuração como "name" ou "params" passe como objeto.
+    desc: Configuração do botão de "cancelar", caso seja "false", não exibe o botão, caso precise passar uma path direto use como string, caso precisar passar uma configuração como "name" ou "params" passe como objeto, agora se precisar de uma logica especifica quando clicar no botão de cancelar, você pode passar uma função que ela será executado.
     default: "''"
-    type: [Boolean, Object, String]
-    examples: [/users, "false", "{ name: 'UsersForm', params: { id: 'uuid-1' } }"]
+    type: [Boolean, Object, String, Function]
+    examples: [
+      /users,
+      false,
+      "{ name: 'UsersForm', params: { id: 'uuid-1' } }",
+      () => alert('Lógica especifica.')
+    ]
 
   custom-id:
     desc: Por padrão, o componente vai pegar o "id" que vem como parâmetro na url, caso queira que o id seja diferente da url, use esta prop.

package/src/components/input/QasInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-input ref="input" v-model="model" bottom-slots v-bind="$attrs" :mask="mask" :outlined="outlined" :unmasked-value="unmaskedValue">
+    <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessageData" :mask="mask" :outlined="outlined" :unmasked-value="unmaskedValue">
       <template v-for="(_, name) in $slots" #[name]="context">
         <slot :name="name" v-bind="context || {}" />
       </template>
@@ -17,7 +17,7 @@ export default {
   props: {
     modelValue: {
       default: '',
-      type: String
+      type: [String, Number]
     },
 
     unmaskedValue: {
@@ -28,11 +28,31 @@ export default {
     outlined: {
       default: true,
       type: Boolean
+    },
+
+    removeErrorOnType: {
+      type: Boolean
+    },
+
+    error: {
+      type: Boolean
+    },
+
+    errorMessage: {
+      type: String,
+      default: ''
     }
   },
 
   emits: ['update:modelValue'],
 
+  data () {
+    return {
+      errorData: false,
+      messageErrorData: ''
+    }
+  },
+
   computed: {
     hasError () {
       return this.inputReference.hasError
@@ -65,6 +85,11 @@ export default {
       },
 
       set (value) {
+        if (this.removeErrorOnType && this.error) {
+          this.errorData = false
+          this.errorMessageData = ''
+        }
+
         return this.$emit('update:modelValue', value)
       }
     }
@@ -77,6 +102,22 @@ export default {
       requestAnimationFrame(() => {
         input.selectionStart = input.value ? input.value.length : ''
       })
+    },
+
+    error: {
+      handler (value) {
+        this.errorData = value
+      },
+
+      immediate: true
+    },
+
+    errorMessage: {
+      handler (value) {
+        this.errorMessageData = value
+      },
+
+      immediate: true
     }
   },
 

package/src/components/input/QasInput.yml

@@ -9,7 +9,7 @@ meta:
 props:
   model-value:
     desc: Model do componente.
-    type: String
+    type: [String, Input]
     examples: [v-model="value"]
     model: true
 
@@ -23,6 +23,18 @@ props:
     default: true
     type: Boolean
 
+  error:
+    desc: Controla cor da borda do input.
+    type: Boolean
+
+  error-message:
+    desc: Controla mensagem de erro (apenas quando "error" for "true").
+    type: String
+
+  remove-error-on-type:
+    desc: Limpa os erros do campo caso os mesmos existam toda vez que o model atualiza.
+    type: Boolean
+
 events:
   '@update:model-value -> function (value)':
     desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.

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

@@ -4,46 +4,44 @@
       <qas-label v-if="useSingleLabel" :label="fieldLabel" />
     </div>
 
-    <div>
-      <component :is="componentTag" ref="inputContent" name="fade" tag="div">
-        <div v-for="(row, index) in nested" :id="`row-${index}`" :key="index" class="full-width">
-          <component :is="componentTag" name="fade" tag="div">
-            <div v-if="!row[destroyKey]" :key="index" class="col-12 q-mt-md">
-              <div>
-                <div class="flex items-center justify-between q-py-xs">
-                  <qas-label v-if="!useSingleLabel" :label="setRowLabel(index)" />
-
-                  <div v-if="!useInlineActions" class="q-gutter-x-sm">
-                    <qas-btn v-if="useDuplicate" v-bind="btnDuplicateProps" @click="add(row)" />
-                    <qas-btn v-if="showDestroyBtn" v-bind="btnDestroyProps" @click="destroy(index, row)" />
-                  </div>
+    <div ref="inputContent">
+      <component :is="componentTag" v-bind="componentProps">
+        <div v-for="(row, index) in nested" :id="`row-${index}`" :key="`row-${index}`" class="full-width">
+          <div v-if="!row[destroyKey]" :key="index" class="col-12 q-mt-md">
+            <div>
+              <div class="flex items-center justify-between q-py-xs">
+                <qas-label v-if="!useSingleLabel" :label="setRowLabel(index)" />
+
+                <div v-if="!useInlineActions" class="q-gutter-x-sm">
+                  <qas-btn v-if="useDuplicate" v-bind="btnDuplicateProps" @click="add(row)" />
+                  <qas-btn v-if="showDestroyBtn" v-bind="btnDestroyProps" @click="destroy(index, row)" />
                 </div>
+              </div>
 
-                <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)">
-                      <template v-for="(slot, key) in $slots" #[key]="scope">
-                        <slot v-bind="scope" :errors="transformedErrors" :index="index" :name="key" />
-                      </template>
-                    </qas-form-generator>
-                  </slot>
-
-                  <div v-if="useInlineActions" 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>
-                    <div class="col-auto">
-                      <qas-btn v-if="showDestroyBtn" color="negative" flat icon="o_cancel" round @click="destroy(index, row)" />
-                    </div>
+              <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)">
+                    <template v-for="(slot, key) in $slots" #[key]="scope">
+                      <slot v-bind="scope" :errors="transformedErrors" :index="index" :name="key" />
+                    </template>
+                  </qas-form-generator>
+                </slot>
+
+                <div v-if="useInlineActions" 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>
+                  <div class="col-auto">
+                    <qas-btn v-if="showDestroyBtn" color="negative" flat icon="o_cancel" round @click="destroy(index, row)" />
                   </div>
                 </div>
+              </div>
 
-                <div class="col-12">
-                  <slot :fields="children" :index="index" :model="nested[index]" name="custom-fields" :update-value="updateValuesFromInput" />
-                </div>
+              <div class="col-12">
+                <slot :fields="children" :index="index" :model="nested[index]" name="custom-fields" :update-value="updateValuesFromInput" />
               </div>
             </div>
-          </component>
+          </div>
         </div>
       </component>
 
@@ -60,7 +58,7 @@
           </div>
 
           <div v-else class="q-mt-lg">
-            <qas-btn class="full-width q-py-sm" icon="o_add" outline @click="add()">{{ addInputLabel }}</qas-btn>
+            <qas-btn class="full-width q-py-md" icon="o_add" outline @click="add()">{{ addInputLabel }}</qas-btn>
           </div>
         </slot>
       </div>
@@ -73,6 +71,7 @@ import QasBtn from '../btn/QasBtn.vue'
 import QasFormGenerator from '../form-generator/QasFormGenerator.vue'
 import QasInput from '../input/QasInput.vue'
 import QasLabel from '../label/QasLabel.vue'
+import { TransitionGroup } from 'vue'
 
 import { constructObject } from '../../helpers'
 import { extend } from 'quasar'
@@ -85,7 +84,10 @@ export default {
     QasBtn,
     QasFormGenerator,
     QasInput,
-    QasLabel
+    QasLabel,
+
+    // vue
+    TransitionGroup
   },
 
   props: {
@@ -249,6 +251,16 @@ export default {
 
     componentTag () {
       return this.useAnimation ? 'transition-group' : 'div'
+    },
+
+    componentProps () {
+      if (!this.useAnimation) return {}
+
+      return {
+        tag: 'div',
+        enterActiveClass: 'animated slideInDown',
+        leaveActiveClass: 'animated slideOutUp'
+      }
     }
   },