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

package/src/components/layout/QasLayout.yml

@@ -0,0 +1,38 @@
+type: component
+
+meta:
+  desc: Componente de layout que engloba o "QasAppBar" e "QasAppMenu".
+
+props:
+  app-bar-props:
+    desc: Propriedades do "QasAppBar".
+    default: {}
+    type: Object
+
+  app-menu-props:
+    desc: Propriedades do "QasAppMenu".
+    default: { animation: 500 }
+    type: Object
+
+  model-value:
+    desc: Model do componente, responsável por abrir/fechar menu lateral.
+    default: true
+    type: Boolean
+
+slots:
+  app-bar:
+    desc: Slot para substituir o "QasAppBar".
+
+  app-menu:
+    desc: Slot para substituir o "QasAppMenu".
+
+  default:
+    desc: Slot para substituir o "QPageContainer".
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Valor do mode-value.
+        type: Boolean

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

@@ -1,13 +1,13 @@
 <template>
   <div class="qas-list-items shadow-primary">
     <q-list bordered class="rounded-borders" separator>
-      <q-item v-for="(item, index) in list" :key="index" v-ripple :clickable="!useIconRedirect" :to="redirect(item)">
+      <q-item v-for="(item, index) in list" :key="index" v-ripple :clickable="!redirectOnIcon" :to="redirect(item)">
         <slot :index="index" :item="item" name="item">
           <q-item-section>
             <slot :index="index" :item="item" name="item-section-left" />
           </q-item-section>
 
-          <q-item-section side>
+          <q-item-section v-if="useSectionActions" side>
             <slot :index="index" :item="item" name="item-section-side">
               <qas-btn flat round :to="getRedirectPayload(item)">
                 <q-icon v-bind="iconProps" />
@@ -24,13 +24,15 @@
 import QasBtn from '../btn/QasBtn.vue'
 
 export default {
+  name: 'QasListItems',
+
   components: {
     QasBtn
   },
 
   props: {
     iconProps: {
-      default: () => ({ name: 'o_chevron_right', color: 'primary' }),
+      default: () => ({ color: 'primary', name: 'o_chevron_right' }),
       type: Object
     },
 
@@ -44,9 +46,9 @@ export default {
       type: String
     },
 
-    paramKey: {
-      default: 'id',
-      type: String
+    redirectOnIcon: {
+      default: true,
+      type: Boolean
     },
 
     to: {
@@ -54,21 +56,22 @@ export default {
       type: Object
     },
 
-    useIconRedirect: {
+    useSectionActions: {
+      default: true,
       type: Boolean
     }
   },
 
   methods: {
-    redirect (item) {
-      return this.useIconRedirect ? undefined : this.getRedirectPayload(item)
-    },
-
     getRedirectPayload (item) {
       return {
-        params: { [this.paramKey]: item[this.redirectKey] },
+        params: { [this.redirectKey]: item[this.redirectKey] },
         ...this.to
       }
+    },
+
+    redirect (item) {
+      return this.redirectOnIcon ? undefined : this.getRedirectPayload(item)
     }
   }
 }

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

@@ -0,0 +1,57 @@
+type: component
+
+meta:
+  desc: Componente para listagem.
+
+props:
+  icon-props:
+    desc: Props do [QIcon](https://quasar.dev/vue-components/icon#introduction)
+    default: { color: 'primary', name: 'o_chevron_right' }
+    type: Object
+
+  list:
+    desc: Lista para ser selecionada.
+    default: []
+    type: Array
+
+  redirect-key:
+    desc: Você pode enviar qualquer chave/valor dentro do array de objeto da prop "list", esta prop serve para você identificar qual vai ser a chave que vai redirecionar ao clicar no botão.
+    default: uuid
+    type: String
+
+  redirect-on-icon:
+    desc: Controla se o redirecionamento vai acontecer quando clicar no item inteiro ou somente no icon.
+    default: true
+    type: Boolean
+
+  to:
+    desc: Configuração passada para o vue-router.
+    default: {}
+    type: Object
+    examples: ["{ name: 'Root' }"]
+
+  use-section-actions:
+    desc: Controla se exibe ou não seção de actions, onde fica o Ícone de redirecionamento.
+    default: true
+    type: Boolean
+
+slots:
+  item-section-left:
+    desc: Slot para acessar seção da esquerda.
+    scope:
+      item:
+        desc: Item dentro da listagem, vai depender do que foi passado.
+        type: Object
+      index:
+        desc: Posição do item na lista.
+        type: Number
+
+  item-section-side:
+    desc: Slot para acessar seção da direita, onde fica o Ícone.
+    scope:
+      item:
+        desc: Item dentro da listagem, vai depender do que foi passado.
+        type: Object
+      index:
+        desc: Posição do item na lista.
+        type: Number

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

@@ -1,21 +1,21 @@
 <template>
-  <component :is="componentTag">
+  <component :is="mx_componentTag" :class="mx_componentClass">
     <q-pull-to-refresh :disable="disableRefresh" @refresh="refresh">
       <header v-if="hasHeaderSlot">
-        <slot :fields="fields" :metadata="metadata" name="header" :results="results" />
+        <slot name="header" />
       </header>
 
-      <slot v-if="!noFilter" :entity="entity" :errors="errors" :fields="fields" :metadata="metadata" name="filter" :results="results">
+      <slot v-if="useFilter" name="filter">
         <qas-filters v-bind="filtersProps" :entity="entity" />
       </slot>
 
       <main class="relative-position">
         <div v-if="hasResults">
-          <slot :fields="fields" :metadata="metadata" :results="results" />
+          <slot />
         </div>
 
-        <div v-else-if="!isFetching">
-          <slot :fields="fields" :metadata="metadata" name="empty-results">
+        <div v-else-if="!mx_isFetching">
+          <slot name="empty-results">
             <div class="q-my-xl text-center">
               <q-icon class="q-mb-sm text-center" color="grey-6" name="o_search" size="38px" />
               <div class="text-grey-6">Nenhum item encontrado.</div>
@@ -31,7 +31,7 @@
           <q-pagination v-model="page" boundary-links class="flex-center" direction-links :input="$q.screen.lt.sm" :max="totalPages" :max-pages="6" @click="changePage" />
         </div>
 
-        <q-inner-loading :showing="hasResults && isFetching">
+        <q-inner-loading :showing="hasResults && mx_isFetching">
           <q-spinner color="grey" size="3em" />
         </q-inner-loading>
       </main>
@@ -42,10 +42,9 @@
 </template>
 
 <script>
-import contextMixin from '../../mixins/context.js'
-import viewMixin from '../../mixins/view.js'
-
+import { viewMixin, contextMixin } from '../../mixins'
 import QasFilters from '../filters/QasFilters.vue'
+import { extend } from 'quasar'
 
 export default {
   components: {
@@ -59,17 +58,29 @@ export default {
       type: Boolean
     },
 
-    noFilter: {
-      default: false,
+    useFilter: {
+      default: true,
       type: Boolean
     },
 
     filtersProps: {
       default: () => ({}),
       type: Object
+    },
+
+    results: {
+      default: () => [],
+      type: Array
     }
   },
 
+  emits: [
+    'fetch-success',
+    'fetch-error',
+    'update:errors',
+    'update:results'
+  ],
+
   data () {
     return {
       page: 1
@@ -77,13 +88,8 @@ export default {
   },
 
   computed: {
-    context () {
-      const { limit, ordering, page, search, ...filters } = this.$route.query
-      return { filters, limit, ordering, page: page ? parseInt(page) : 1, search }
-    },
-
     hasHeaderSlot () {
-      return !!(this.$slots.header || this.$scopedSlots.header)
+      return !!this.$slots.header
     },
 
     hasPages () {
@@ -91,10 +97,10 @@ export default {
     },
 
     hasResults () {
-      return !!(this.results || []).length
+      return !!(this.resultsModel || []).length
     },
 
-    results () {
+    resultsModel () {
       return this.$store.getters[`${this.entity}/list`]
     },
 
@@ -104,9 +110,18 @@ export default {
   },
 
   watch: {
-    $route () {
-      this.fetchList()
-      this.setCurrentPage()
+    $route (to, from) {
+      if (to.name === from.name) {
+        this.fetchList()
+        this.setCurrentPage()
+      }
+    },
+
+    resultsModel: {
+      handler (value) {
+        this.$emit('update:results', extend([], true, value))
+      },
+      immediate: true
     }
   },
 
@@ -121,23 +136,34 @@ export default {
       this.$router.push({ query })
     },
 
-    async fetchList () {
-      this.isFetching = true
+    async fetchList (filters = {}) {
+      this.mx_isFetching = true
 
       try {
-        const response = await this.$store.dispatch(`${this.entity}/fetchList`, { ...this.context, url: this.url })
+        const response = await this.$store.dispatch(
+          `${this.entity}/fetchList`,
+          { ...this.mx_context, url: this.url, filters }
+        )
+
         const { errors, fields, metadata } = response.data
 
-        this.setErrors(errors)
-        this.setFields(fields)
-        this.setMetadata(metadata)
+        this.mx_setErrors(errors)
+        this.mx_setFields(fields)
+        this.mx_setMetadata(metadata)
+
+        this.mx_updateModels({
+          errors: this.mx_errors,
+          fields: this.mx_fields,
+          metadata: this.mx_metadata
+        })
 
         this.$emit('fetch-success', response)
       } catch (error) {
-        this.fetchError(error)
+        this.mx_fetchError(error)
+        this.$emit('update:errors', error)
         this.$emit('fetch-error', error)
       } finally {
-        this.isFetching = false
+        this.mx_isFetching = false
       }
     },
 

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

@@ -0,0 +1,132 @@
+type: component
+
+meta:
+  desc: Componente para C.R.U.D. responsável pela parte de listagem (Read).
+
+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
+
+  dialog:
+    desc: Este componente pode ser utilizado dentro de um dialog, neste caso o componente pai não pode ser um "QPage" e sim uma "div", esta prop cuida disto.
+    type: Boolean
+
+  url:
+    desc: Envia como parâmetro para a action "fetchList" do modulo correspondente a "entity".
+    type: String
+
+  results:
+    model: true
+    desc: Model de results, utilizado para recuperar a lista retornada pelo componente.
+    default: []
+    type: Array
+    examples: [v-model:results="results"]
+
+  fields:
+    model: true
+    desc: Model de fields, utilizado para recuperar os fields fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:fields="fields"]
+
+  errors:
+    model: true
+    desc: Model de errors, utilizado para recuperar os errors fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:errors="errors"]
+
+  metadata:
+    model: true
+    desc: Model de metadata, utilizado para recuperar os metadata fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:metadata="metadata"]
+
+  fetching:
+    model: true
+    desc: Model de fetching, utilizado para saber se o componente está fazendo fetching de dados.
+    type: Boolean
+    examples: [v-model:fetching="isFetching"]
+
+  disable-refresh:
+    desc: Desabilita o [pull-to-refresh](https://quasar.dev/vue-components/pull-to-refresh#basic).
+    type: Boolean
+
+  use-filter:
+    desc: Controla se o componente vai usar ou não o componente "QasFilters".
+    default: true
+    type: Boolean
+
+  filters-props:
+    desc: Repassa as props para o componente "QasFilters".
+    default: {}
+    type: Object
+
+slots:
+  header:
+    desc: 'Slot para acessar o header.'
+
+  filter:
+    desc: 'Slot para acessar o filtro.'
+
+  default:
+    desc: 'Slot para ter o conteúdo principal (dentro do main).'
+
+  empty-results:
+    desc: 'Slot acessar quando a listagem está vazia.'
+
+  footer:
+    desc: 'Slot para acessar o footer.'
+
+events:
+  '@update:results -> function(value)':
+    desc: Dispara quando a action "fetchList" é executada com sucesso, é chamado antes do evento "fetch-success".
+    params:
+      value:
+        desc: lista retornada no "fetchList".
+        type: Array
+
+  '@update:fields -> function(value)':
+    desc: Dispara quando a action "fetchList" é executada com sucesso, é chamado antes do evento "fetch-success".
+    params:
+      value:
+        desc: fields.
+        type: Object
+
+  '@update:errors -> function(value)':
+    desc: Dispara quando a action "fetchList" é chamada.
+    params:
+      value:
+        desc: Errors durante o fetch.
+        type: Object
+
+  '@update:metadata -> function(value)':
+    desc: Dispara quando a action "fetchList" acontece com sucesso, é chamado antes do evento "fetch-success".
+    params:
+      value:
+        desc: metadata.
+        type: Object
+
+  '@update:fetching -> function(value)':
+    desc: Dispara logo antes da action "fetchList" e ao cair no bloco "finally", ou seja, quando começar o fetching e após terminar.
+    params:
+      value:
+        desc: Retorna se está ou não fazendo fetching de dados.
+        type: Boolean
+
+  '@fetch-success -> function(value)':
+    desc: Dispara quando a action "fetchList" é 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 "fetchList" cai em uma exceção.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        type: Object

package/src/components/map/QasMap.vue

@@ -1,37 +1,24 @@
 <template>
   <div class="qas-map">
-    <!-- TODO descomentar quando implementar o input de pesquisa -->
-    <!-- <div v-if="hasSearch" class="items-center no-wrap row">
-      <gmap-autocomplete class="q-field__native q-placeholder" placeholder="Pesquisar..." />
-      <q-icon color="primary" name="o_search" size="24px" />
-    </div> -->
-    <gmap-map :center="centerPosition" class="qas-map__draw" :zoom="zoom">
-      <gmap-marker v-for="(marker, index) in markers" :key="index" :draggable="marker.draggable" :icon="marker.icon" :position="marker.position" @dragend="getPosition" @mouseout="closePopup" @mouseover="openPopup(marker, index)">
-        <gmap-info-window :opened="canShowPopup(index)">
+    <g-map-map :center="centerPosition" class="qas-map__draw" :zoom="zoom">
+      <g-map-marker v-for="(marker, index) in markers" :key="index" :draggable="marker.draggable" :icon="marker.icon" :position="marker.position" @dragend="updatePosition" @mouseout="closePopup" @mouseover="openPopup(marker, index)">
+        <g-map-info-window :opened="canShowPopup(index)">
           <div class="text-weight-bold">{{ marker.title }}</div>
           <div>{{ marker.description }}</div>
-        </gmap-info-window>
-      </gmap-marker>
-    </gmap-map>
+        </g-map-info-window>
+      </g-map-marker>
+    </g-map-map>
   </div>
 </template>
 
 <script>
-import formMixin from '../../mixins/form.js'
-
 export default {
-  mixins: [
-    formMixin
-  ],
+  name: 'QasMap',
 
   props: {
     centerPosition: {
       type: Object,
-      default: () => {}
-    },
-
-    hasSearch: {
-      type: Boolean
+      default: () => ({})
     },
 
     markers: {
@@ -39,7 +26,7 @@ export default {
       default: () => []
     },
 
-    showPopup: {
+    usePopup: {
       type: Boolean
     },
 
@@ -49,11 +36,13 @@ export default {
     }
   },
 
+  emits: ['update-position'],
+
   data () {
     return {
       isPopupDisplayed: false,
       currentPlace: null,
-      indexMarker: ''
+      indexMarker: null
     }
   },
 
@@ -64,28 +53,23 @@ export default {
     },
 
     canShowPopup (index) {
-      return this.isPopupDisplayed && this.showPopup && index === this.indexMarker
+      return this.isPopupDisplayed && this.usePopup && index === this.indexMarker
     },
 
     closePopup () {
       this.isPopupDisplayed = false
     },
 
-    getPosition (mouseEvent) {
+    updatePosition (mouseEvent) {
       this.$emit('update-position', mouseEvent.latLng.toJSON())
     }
-
-    // TODO descomentar quando implementar o input de pesquisa
-    // setPlace (place) {
-    //   this.currentPlace = place
-    // }
   }
 }
 </script>
 
 <style lang="scss">
 .qas-map {
-  &__draw{
+  &__draw {
     height: 300px;
     width: 100%;
   }

package/src/components/map/QasMap.yml

@@ -0,0 +1,33 @@
+type: component
+
+meta:
+  desc: Componente para gerar google maps.
+
+props:
+  center-position:
+    desc: Opções de localização onde o mapa vai ser centralizado.
+    default: {}
+    type: Object
+    examples: ["{ lat: -21.17663, lng: -47.820839 }"]
+
+  markers:
+    desc: Marcadores (pin) do mapa.
+    default: []
+    type: Array
+
+  use-popup:
+    desc: Controla se os markers vai ter popup ou não.
+    type: Boolean
+
+  zoom:
+    desc: Zoom do mapa.
+    default: 17
+    type: Number
+
+events:
+  '@update-position -> function(value)':
+    desc: Dispara muda a posição do marker.
+    params:
+      value:
+        desc: Nova posição.
+        type: Object