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

package/dist/vetur/asteroid-attributes.json

@@ -123,6 +123,10 @@
     "description": "Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno.",
     "type": "boolean"
   },
+  "qas-btn/label": {
+    "description": "Rótulo do botão.",
+    "type": "string"
+  },
   "qas-card/bg-image-position": {
     "description": "Posição da imagem \"background-position\".",
     "type": "string"
@@ -227,6 +231,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 +319,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 +356,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 +493,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 +503,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 +971,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

@@ -71,7 +71,8 @@
   },
   "qas-btn": {
     "attributes": [
-      "hide-label-on-small-screen"
+      "hide-label-on-small-screen",
+      "label"
     ],
     "description": "O mesmo botão do Quasar (QBtn), mas com o nosso estilo, tem acesso a todas propriedades do componente do quasar. Tem a função de criar gatilhos para ações. Eles podem ser utilizados isoladamente ou ​​como parte de outros componentes de padrões maiores, como formulários, caixas de diálogo e feedbacks."
   },
@@ -127,7 +128,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 +169,8 @@
       "use-search",
       "use-search-on-type",
       "search-placeholder",
-      "url"
+      "url",
+      "force-refetch"
     ],
     "description": "Componente para criação de filtros dinâmicos."
   },
@@ -237,7 +240,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 +443,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.3",
+  "version": "3.0.0-beta.3",
   "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/QasActions.vue

@@ -11,13 +11,9 @@
 </template>
 
 <script>
-import { screenMixin } from '../../mixins'
-
 export default {
   name: 'QasActions',
 
-  mixins: [screenMixin],
-
   props: {
     align: {
       default: 'end',
@@ -37,7 +33,7 @@ export default {
       return [
         `justify-${this.align}`,
         `q-col-gutter-${this.gutter}`,
-        this.mx_isSmall ? 'column reverse' : 'row'
+        this.$qas.screen.isSmall ? 'column reverse' : 'row'
       ]
     }
   }

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/app-menu/QasAppMenu.vue

@@ -44,14 +44,11 @@
 </template>
 
 <script>
-import { screenMixin } from '../../mixins'
 import { isLocalDevelopment } from '../../helpers'
 
 export default {
   name: 'QasAppMenu',
 
-  mixins: [screenMixin],
-
   props: {
     items: {
       default: () => [],
@@ -153,7 +150,7 @@ export default {
     },
 
     beforeHide () {
-      if (this.mx_isLarge) {
+      if (this.$qas.screen.isLarge) {
         this.model = true
         this.miniMode = !this.miniMode
       }

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 || {}" />
@@ -9,33 +9,34 @@
 </template>
 
 <script>
-import { screenMixin } from '../../mixins'
-
 export default {
   name: 'QasBtn',
 
-  mixins: [screenMixin],
-
-  inheritAttrs: false,
-
   props: {
     hideLabelOnSmallScreen: {
       type: Boolean
+    },
+
+    label: {
+      type: String,
+      default: ''
     }
   },
 
   computed: {
     attributes () {
-      const { label, ...attributes } = this.$attrs
-      return attributes
+      return {
+        ...(this.showLabel && { label: this.label }),
+        ...this.$attrs
+      }
     },
 
     hasLabel () {
-      return !!(this.$attrs.label || this.$slots.default)
+      return !!(this.label || this.$slots.default)
     },
 
     showLabel () {
-      return this.hasLabel && !(this.hideLabelOnSmallScreen && this.mx_isSmall)
+      return this.hasLabel && !(this.hideLabelOnSmallScreen && this.$qas.screen.isSmall)
     },
 
     slots () {

package/src/components/btn/QasBtn.yml

@@ -10,4 +10,7 @@ props:
   hide-label-on-small-screen:
     desc: Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno.
     type: Boolean
-    default: 'false'
+
+  label:
+    desc: Rótulo do botão.
+    type: String

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

@@ -39,8 +39,6 @@
 import QasBtn from '../btn/QasBtn.vue'
 import QasActions from '../actions/QasActions.vue'
 
-import screenMixin from '../../mixins/screen'
-
 export default {
   name: 'QasDialog',
 
@@ -49,8 +47,6 @@ export default {
     QasActions
   },
 
-  mixins: [screenMixin],
-
   props: {
     actionsProps: {
       default: () => ({}),
@@ -133,8 +129,8 @@ export default {
 
     style () {
       return {
-        maxWidth: this.maxWidth || (this.mx_isSmall ? '' : '600px'),
-        minWidth: this.minWidth || (this.mx_isSmall ? '' : '400px')
+        maxWidth: this.maxWidth || (this.$qas.screen.isSmall ? '' : '600px'),
+        minWidth: this.minWidth || (this.$qas.screen.isSmall ? '' : '400px')
       }
     },
 
@@ -155,12 +151,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,13 +36,13 @@ 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'
 import QasDialog from '../dialog/QasDialog.vue'
 
-import { viewMixin, screenMixin } from '../../mixins'
+import { viewMixin } from '../../mixins'
 
 export default {
   name: 'QasFormView',
@@ -52,7 +52,7 @@ export default {
     QasDialog
   },
 
-  mixins: [viewMixin, screenMixin],
+  mixins: [viewMixin],
 
   props: {
     cancelButton: {
@@ -62,7 +62,7 @@ export default {
 
     cancelRoute: {
       default: '',
-      type: [Boolean, Object, String]
+      type: [Boolean, Object, String, Function]
     },
 
     customId: {
@@ -146,7 +146,7 @@ export default {
 
   computed: {
     cancelButtonClass () {
-      return this.mx_isSmall && 'order-last'
+      return this.$qas.screen.isSmall && 'order-last'
     },
 
     fetchURL () {
@@ -174,17 +174,13 @@ export default {
     },
 
     saveButtonClass () {
-      return this.mx_isSmall && 'order-first'
+      return this.$qas.screen.isSmall && 'order-first'
     },
 
     isCancelButtonDisabled () {
       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/gallery/QasGallery.vue

@@ -17,9 +17,9 @@
           </div>
         </template>
         <template #description>
-          <q-carousel v-model="imageIndex" animated :arrows="!mx_isSmall" control-text-color="primary" :fullscreen="mx_isSmall" :height="carouselImageHeight" :next-icon="carouselNextIcon" :prev-icon="carouselPreviousIcon" swipeable :thumbnails="showThumbnails">
+          <q-carousel v-model="imageIndex" animated :arrows="!$qas.screen.isSmall" control-text-color="primary" :fullscreen="$qas.screen.isSmall" :height="carouselImageHeight" :next-icon="carouselNextIcon" :prev-icon="carouselPreviousIcon" swipeable :thumbnails="showThumbnails">
             <q-carousel-slide v-for="(image, index) in clonedImages" :key="index" class="bg-no-repeat bg-size-contain" :img-src="image" :name="index">
-              <div v-if="mx_isSmall" class="full-width justify-end row">
+              <div v-if="$qas.screen.isSmall" class="full-width justify-end row">
                 <qas-btn dense flat icon="o_close" @click="toggleCarouselDialog" />
               </div>
             </q-carousel-slide>
@@ -31,13 +31,9 @@
 </template>
 
 <script>
-import screenMixin from '../../mixins/screen'
-
 export default {
   name: 'QasGallery',
 
-  mixins: [screenMixin],
-
   props: {
     carouselNextIcon: {
       type: String,
@@ -94,13 +90,13 @@ export default {
         return this.height || 'auto'
       }
 
-      return this.mx_isSmall ? '90px' : '120px'
+      return this.$qas.screen.isSmall ? '90px' : '120px'
     },
 
     galleryColumnsClasses () {
       if (this.isSingleImage) return 'col-12'
 
-      return this.mx_isSmall ? 'col-6' : 'col-2'
+      return this.$qas.screen.isSmall ? 'col-6' : 'col-2'
     },
 
     hideShowMore () {