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

package/src/components/dialog-router/QasDialogRouter.vue

@@ -9,10 +9,17 @@
 </template>
 
 <script>
-import { Loading } from 'quasar'
+import { markRaw } from 'vue'
+import { Loading, extend } from 'quasar'
 import { NotifyError } from '../../plugins'
 
 export default {
+  name: 'QasDialogRouter',
+
+  emits: ['error', 'hide'],
+
+  expose: ['show', 'hide'],
+
   data () {
     return {
       component: null,
@@ -39,7 +46,7 @@ export default {
     },
 
     resolveRoute (path) {
-      return this.$router.resolve(path).route
+      return this.$router.resolve(path)
     },
 
     async show (route) {
@@ -52,9 +59,12 @@ export default {
 
       try {
         Loading.show()
-        const component = [...this.route.matched].pop().components.default
 
-        if (typeof component !== 'function') {
+        const component = markRaw(
+          extend(true, {}, [...this.route.matched].pop().components.default)
+        )
+
+        if (typeof component.value !== 'function') {
           this.component = component
           this.$refs.dialog.show()
         } else {

package/src/components/dialog-router/QasDialogRouter.yml

@@ -0,0 +1,23 @@
+type: component
+
+meta:
+  desc: Componente que abre uma pagina dentro de um "QasDialog", porém se você recarregar a pagina, ela é iniciada na pagina que foi carregada inicialmente dentro do QasDialog.
+
+events:
+  error:
+    desc: Dispara caso não consiga carregar o componente.
+    params:
+      error:
+        desc: Erro retornado.
+        type: Object
+
+  hide:
+    desc: Dispara quando o QasDialog é fechado.
+
+methods:
+  '@show (route) => undefined':
+    desc: Função para abrir o a pagina dentro do dialog.
+    route:
+      value:
+        desc: Objeto de roda, igual usado dentro do $router.push(route) por exemplo.
+        type: Object

package/src/components/field/QasField.vue

@@ -1,9 +1,8 @@
 <template>
   <div>
-    <component :is="component.is" v-bind="component" :data-cy="field.name" :value="formattedValue" v-on="events" @input="emitValue">
-      <slot v-for="(slot, key) in $slots" :slot="key" :name="key" />
-      <template v-for="(slot, key) in $scopedSlots" :slot="key" slot-scope="scope">
-        <slot :name="key" v-bind="scope" />
+    <component :is="component.is" v-bind="component" :data-cy="field.name" :model-value="formattedValue" @update:model-value="updateModel">
+      <template v-for="(_, name) in $slots" #[name]="context">
+        <slot :name="name" v-bind="context || {}" />
       </template>
     </component>
   </div>
@@ -47,9 +46,16 @@ export default {
       default: () => ({}),
       required: true,
       type: Object
+    },
+
+    modelValue: {
+      default: undefined,
+      type: [Object, Array, String, Number, Boolean]
     }
   },
 
+  emits: ['update:modelValue'],
+
   computed: {
     component () {
       const {
@@ -72,7 +78,7 @@ export default {
         maxFiles,
         searchable,
         gmt
-      } = this.formatedField
+      } = this.formattedField
 
       // Default error attributes for Quasar.
       const error = {
@@ -115,10 +121,10 @@ export default {
       // Profiles
       const profiles = {
         default: { is: 'qas-input', ...input, mask },
-        textarea: { is: 'q-input', type, ...input },
-        number: { is: 'q-input', type: 'number', ...input },
+        textarea: { is: 'qas-input', type, ...input },
+        number: { is: 'qas-input', type: 'number', ...input },
         hidden: { is: 'input', name, type },
-        email: { is: 'q-input', type, ...input },
+        email: { is: 'qas-input', type, ...input },
         password: { is: 'qas-password-input', type, pattern, hideStrengthChecker: !pattern, ...input },
 
         decimal: { ...numericInput, mode: 'decimal' },
@@ -148,13 +154,8 @@ export default {
       return Array.isArray(this.error) ? this.error.join(' ') : this.error
     },
 
-    events () {
-      const { input, ...events } = this.$listeners
-      return events
-    },
-
     // This computed will change the key name when the server sends different key.
-    formatedField () {
+    formattedField () {
       const field = {}
 
       for (const key in this.field) {
@@ -165,17 +166,15 @@ export default {
     },
 
     formattedValue () {
-      const { value } = this.$attrs
-
       if (!this.isBoolean) {
-        return value
+        return this.modelValue
       }
 
       if (this.isEmptyValue) {
-        return !!value
+        return !!this.modelValue
       }
 
-      return JSON.parse(value)
+      return JSON.parse(this.modelValue)
     },
 
     hasError () {
@@ -187,13 +186,11 @@ export default {
     },
 
     isEmptyValue () {
-      const { value } = this.$attrs
-
       if (!this.isBoolean) {
         return false
       }
 
-      return !this.value && (value === undefined || typeof value === 'string')
+      return !this.modelValue && (this.modelValue === undefined || typeof this.modelValue === 'string')
     },
 
     isNumberType () {
@@ -202,8 +199,8 @@ export default {
   },
 
   methods: {
-    emitValue (value) {
-      this.$emit('input', this.isNumberType ? Number(value) : value)
+    updateModel (value) {
+      this.$emit('update:modelValue', this.isNumberType ? Number(value) : value)
     }
   }
 }

package/src/components/field/QasField.yml

@@ -0,0 +1,31 @@
+type: component
+
+meta:
+  desc: Componente para criação de campos dinâmicos.
+
+props:
+  error:
+    desc: Array ou String contendo a mensagem de erro.
+    type: [Array, String]
+
+  field:
+    desc: Field contendo informações necessárias para a criação do campo correspondente.
+    default: {}
+    required: true
+    type: Object
+    examples: ["{ name: 'email', type: 'email', label: 'E-mail' }"]
+
+  model-value:
+    desc: Model do componente, usado para o v-model.
+    default: undefined
+    type: [Object, Array, String, Number, Boolean]
+    examples: [v-model="value"]
+    model: true
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        type: [Object, Array, String, Number, Boolean]

package/src/components/filters/QasFilters.vue

@@ -3,7 +3,7 @@
     <div v-if="showFilters" class="q-gutter-x-md row">
       <div v-if="showSearch" class="col">
         <slot :filter="filter" name="search">
-          <q-form v-if="!noSearch" @submit.prevent="filter()">
+          <q-form v-if="useSearch" @submit.prevent="filter()">
             <q-input v-model="search" :debounce="debounce" dense :placeholder="searchPlaceholder" type="search">
               <template #append>
                 <q-btn v-if="hasSearch" icon="o_clear" unelevated @click="clearSearch" />
@@ -15,7 +15,7 @@
       </div>
 
       <slot v-if="showFilterButton" :filter="filter" name="filter-button">
-        <q-btn v-if="!noFilterButton" :color="filterButtonColor" flat icon="o_filter_list" :label="filterButtonLabel">
+        <q-btn v-if="useFilterButton" :color="filterButtonColor" flat icon="o_filter_list" :label="filterButtonLabel">
           <q-menu @before-show="fetchFilters">
             <div v-if="isFetching" class="q-pa-xl text-center">
               <q-spinner color="grey" size="2em" />
@@ -40,29 +40,32 @@
       </slot>
     </div>
 
-    <div v-if="badges && hasActiveFilters" class="q-mt-md">
+    <div v-if="useChip && hasActiveFilters" class="q-mt-md">
       <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="grey-4" dense removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ filterItem.label }} = "{{ getChipValue(filterItem.value) }}"</q-chip>
     </div>
 
-    <slot :context="context" :filter="filter" :filters="activeFilters" :removeFilter="removeFilter" />
+    <slot :context="mx_context" :filter="filter" :filters="activeFilters" :remove-filter="removeFilter" />
   </section>
 </template>
 
 <script>
-import QasField from '../field/QasField'
+import QasField from '../field/QasField.vue'
 
 import { camelize, camelizeKeys } from 'humps'
-import { humanize, parseValue } from '../../helpers/filters'
-import contextMixin from '../../mixins/context'
+import { humanize, parseValue } from '../../helpers/filters.js'
+import contextMixin from '../../mixins/context.js'
 
 export default {
+  name: 'QasFilters',
+
   components: {
     QasField
   },
 
   mixins: [contextMixin],
+
   props: {
-    badges: {
+    useChip: {
       default: true,
       type: Boolean
     },
@@ -72,17 +75,17 @@ export default {
       type: String
     },
 
-    noFilterButton: {
-      default: false,
+    useFilterButton: {
+      default: true,
       type: Boolean
     },
 
-    noSearch: {
-      default: false,
+    useSearch: {
+      default: true,
       type: Boolean
     },
 
-    searchOnType: {
+    useSearchOnType: {
       default: true,
       type: Boolean
     },
@@ -98,6 +101,8 @@ export default {
     }
   },
 
+  emits: ['fetch-success', 'fetch-error'],
+
   data () {
     return {
       filters: {},
@@ -116,7 +121,7 @@ export default {
       const activeFilters = {}
 
       const fields = Object.keys(this.fields)
-      const filters = camelizeKeys(this.context.filters)
+      const filters = camelizeKeys(this.mx_context.filters)
 
       for (const key in filters) {
         const hasField = fields.includes(key)
@@ -133,7 +138,7 @@ export default {
     },
 
     debounce () {
-      return this.searchOnType ? '500' : ''
+      return this.useSearchOnType ? '500' : ''
     },
 
     fields () {
@@ -161,22 +166,24 @@ export default {
     },
 
     showFilterButton () {
-      return !!this.$scopedSlots.filterButton || !this.noFilterButton
+      return !!this.$slots.filterButton || this.useFilterButton
     },
 
     showFilters () {
-      return this.showFilterButton || this.showSearch
+      return this.useFilterButton || this.showSearch
     },
 
     showSearch () {
-      return !!this.$scopedSlots.search || !this.noSearch
+      return !!this.$slots.search || this.useSearch
     }
   },
 
   watch: {
-    $route () {
-      this.fetchFilters()
-      this.updateValues()
+    $route (to, from) {
+      if (to.name === from.name) {
+        this.fetchFilters()
+        this.updateValues()
+      }
     },
 
     search () {
@@ -193,7 +200,7 @@ export default {
 
   methods: {
     clearFilters () {
-      const { filters, ...query } = this.context
+      const { filters, ...query } = this.mx_context
 
       if (this.hasFields) {
         const fields = Object.keys(this.fields)
@@ -220,7 +227,7 @@ export default {
     },
 
     async fetchFilters () {
-      if (this.hasFields || this.noFilterButton) {
+      if (this.hasFields || !this.useFilterButton) {
         return null
       }
 
@@ -239,7 +246,7 @@ export default {
     },
 
     filter (external) {
-      const { filters, page, ...context } = this.context
+      const { filters, page, ...context } = this.mx_context
 
       const query = {
         ...filters,
@@ -266,11 +273,11 @@ export default {
     },
 
     updateValues () {
-      const { filters, search } = this.context
+      const { filters, search } = this.mx_context
       this.search = search || ''
 
       for (const key in filters) {
-        this.$set(this.filters, key, parseValue(this.normalizeValues(filters[key], this.fields[key]?.multiple)))
+        this.filters[key] = parseValue(this.normalizeValues(filters[key], this.fields[key]?.multiple))
       }
     },
 

package/src/components/filters/QasFilters.yml

@@ -0,0 +1,91 @@
+type: component
+
+meta:
+  desc: Componente para criação de filtros dinâmicos.
+
+props:
+  entity:
+    desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
+    required: true
+    type: String
+
+  use-badges:
+    desc: Habilita ou não os "chips" mostrando os filtros ativos.
+    default: true
+    type: Boolean
+
+  use-filter-button:
+    desc: Habilita ou não o botão com menu na lateral esquerda.
+    default: true
+    type: Boolean
+
+  use-search:
+    desc: Habilita ou não o campo text de busca.
+    default: true
+    type: Boolean
+
+  use-search-on-type:
+    desc: Habilita ou não o filtro de busca sempre que o usuário digita.
+    default: true
+    type: Boolean
+
+  search-placeholder:
+    desc: Placeholder do campo de busca.
+    default: Pesquisar...
+    type: String
+
+  url:
+    desc: Envia como parâmetro para a action "fetchFilters" do modulo correspondente a "entity".
+    type: String
+
+slots:
+  search:
+    desc: Slot para seção do campo de busca.
+    scope:
+      filter:
+        desc: função usada para fazer o filtro
+        type: Function
+
+  filter-button:
+    desc: Slot para seção do botão do menu lateral.
+    scope:
+      filter:
+        desc: função usada para fazer o filtro
+        type: Function
+
+  default:
+    desc: Slot para acessar o final do componente.
+    scope:
+      filter:
+        desc: Função usada para fazer o filtro
+        type: Function
+
+      filters:
+        desc: Objeto que retorna os filtros ativos
+        default: {}
+        type: Object
+
+      remove-filter:
+        desc: Função usada para remover os filtro
+        type: Function
+        examples: ["removeFilter({ name: '[nome-do-filtro]' })"]
+
+      context:
+        desc: Contexto referente a query da url.
+        default: { filters: {}, page: 1 }
+        type: Object
+
+events:
+  '@fetch-success -> function(value)':
+    desc: Dispara quando a action "fetchFilters" é executada com sucesso.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido pelo fetch.
+        type: Object
+
+  '@fetch-error -> function(value)':
+    desc: Dispara quando a action "fetchFilters" cai em uma exceção.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        type: Object

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

@@ -1,16 +1,16 @@
 <template>
   <div>
-    <div :class="classes">
-      <div v-for="(field, key) in groupedFields.visible" :key="key" :class="getFieldClass(key)">
+    <div :class="mx_classes">
+      <div v-for="(field, key) in groupedFields.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" :value="value[field.name]" v-on="fieldsEvents[field.name]" @input="emitValue(field.name, $event)" />
+          <qas-field 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 groupedFields.hidden" :key="key">
       <slot :field="field" :name="`field-${field.name}`">
-        <qas-field v-bind="fieldsProps[field.name]" :field="field" :value="value[field.name]" v-on="fieldsEvents[field.name]" @input="emitValue(field.name, $event)" />
+        <qas-field v-bind="fieldsProps[field.name]" :field="field" :model-value="modelValue[field.name]" @update:model-value="updateModelValue(field.name, $event)" />
       </slot>
     </div>
   </div>
@@ -18,10 +18,11 @@
 
 <script>
 import generatorMixin from '../../mixins/generator'
-
-import QasField from '../field/QasField'
+import QasField from '../field/QasField.vue'
 
 export default {
+  name: 'QasFormGenerator',
+
   components: {
     QasField
   },
@@ -34,11 +35,6 @@ export default {
       type: Object
     },
 
-    fieldsEvents: {
-      default: () => ({}),
-      type: Object
-    },
-
     fieldsProps: {
       default: () => ({}),
       type: Object
@@ -49,13 +45,15 @@ export default {
       type: Array
     },
 
-    value: {
+    modelValue: {
       default: () => ({}),
       required: true,
       type: Object
     }
   },
 
+  emits: ['update:modelValue'],
+
   computed: {
     groupedFields () {
       const fields = { hidden: {}, visible: {} }
@@ -80,11 +78,11 @@ export default {
   },
 
   methods: {
-    emitValue (key, value) {
-      const models = { ...this.value }
+    updateModelValue (key, value) {
+      const models = { ...this.modelValue }
       models[key] = value
 
-      this.$emit('input', models)
+      this.$emit('update:modelValue', models)
     }
   }
 }

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

@@ -0,0 +1,64 @@
+type: component
+
+meta:
+  desc: Componente para criação de múltiplos campos dinâmicos a partir do componente `QasField`.
+
+props:
+  error:
+    desc: Objeto contendo propriedades contendo a mensagem de erro.
+    default: {}
+    type: Object
+
+  fields:
+    desc: Lista de field contendo informações necessárias para a criação do campo correspondente.
+    default: {}
+    type: Object
+    examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
+
+  fields-props:
+    desc: Propriedade para repassar propriedades para cada campo individualmente.
+    default: {}
+    type: Object
+    examples: ["{ name: { dense: true, onClick: () => alert('Estou sendo clicado') } }"]
+
+  order:
+    desc: Altera ordem dos campos.
+    default: []
+    type: Array
+
+  model-value:
+    desc: Model do componente, usado para o v-model.
+    required: true
+    default: {}
+    type: Object
+    examples: [v-model="value"]
+    model: true
+
+  columns:
+    desc: Colunas do grid de cada campo.
+    default: col-6
+    type: [Array, String, Object]
+    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]"]
+
+  gutter:
+    desc: Espaçamento entre colunas.
+    default: md
+    type: String
+    examples: [xs, sm, md, lg, xl]
+
+slots:
+  'field-[nome-da-chave]':
+    desc: Acessa o slot de um campo especifico.
+    scope:
+      field:
+        desc: Payload do campo atual.
+        default: {}
+        type: Object
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        type: Object