@bildvitta/quasar-ui-asteroid 2.12.4 → 3.0.0-alpha.1

package/src/components/label/QasLabel.vue

@@ -1,17 +1,21 @@
 <template>
-  <div class="text-bold text-subtitle2" :class="labelClasses" v-bind="$attrs" v-on="$listeners">
-    <!-- TODO: Remover camelCase. -->
-    <slot :formattedLabel="formattedLabel">
-      {{ formattedLabel }}
-    </slot>
+  <div class="text-bold text-subtitle2" :class="labelClass">
+    <slot :label-with-suffix="labelWithSuffix">{{ labelWithSuffix }}</slot>
   </div>
 </template>
 
 <script>
-import formatLabel from '../../helpers/label'
+import { addCounterSuffix } from '../../helpers'
 
 export default {
+  name: 'QasLabel',
+
   props: {
+    count: {
+      default: 0,
+      type: [Number, String]
+    },
+
     label: {
       default: '',
       type: String
@@ -20,21 +24,16 @@ export default {
     margin: {
       default: 'sm',
       type: String
-    },
-
-    quantity: {
-      default: 0,
-      type: Number
     }
   },
 
   computed: {
-    formattedLabel () {
-      return formatLabel(this.quantity, this.label)
+    labelClass () {
+      return `q-mb-${this.margin}`
     },
 
-    labelClasses () {
-      return `q-mb-${this.margin}`
+    labelWithSuffix () {
+      return addCounterSuffix(this.label, parseFloat(this.count))
     }
   }
 }

package/src/components/layout/QasLayout.vue

@@ -0,0 +1,81 @@
+<template>
+  <q-layout view="hHh Lpr lFf">
+    <slot name="app-bar">
+      <qas-app-bar v-bind="appBarProps" @toggle-menu="toggleMenuDrawer" />
+    </slot>
+
+    <slot name="app-menu">
+      <qas-app-menu v-model="menuDrawer" v-bind="defaultAppMenuProps" />
+    </slot>
+
+    <slot>
+      <q-page-container>
+        <router-view />
+      </q-page-container>
+    </slot>
+  </q-layout>
+</template>
+
+<script>
+import QasAppBar from '../app-bar/QasAppBar.vue'
+import QasAppMenu from '../app-menu/QasAppMenu.vue'
+
+export default {
+  name: 'QasLayout',
+
+  components: {
+    QasAppBar,
+    QasAppMenu
+  },
+
+  props: {
+    appBarProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    appMenuProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    modelValue: {
+      default: true,
+      type: Boolean
+    }
+  },
+
+  emits: ['update:modelValue'],
+
+  data () {
+    return {
+      menuDrawer: true
+    }
+  },
+
+  computed: {
+    defaultAppMenuProps () {
+      return {
+        ...this.appMenuProps,
+        title: this.appBarProps?.title
+      }
+    }
+  },
+
+  watch: {
+    modelValue: {
+      handler (value) {
+        this.menuDrawer = value
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    toggleMenuDrawer () {
+      this.menuDrawer = !this.menuDrawer
+      this.$emit('update:modelValue', this.menuDrawer)
+    }
+  }
+}
+</script>

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,26 +46,32 @@ export default {
       type: String
     },
 
+    redirectOnIcon: {
+      default: true,
+      type: Boolean
+    },
+
     to: {
       default: () => ({}),
       type: Object
     },
 
-    useIconRedirect: {
+    useSectionActions: {
+      default: true,
       type: Boolean
     }
   },
 
   methods: {
-    redirect (item) {
-      return this.useIconRedirect ? undefined : this.getRedirectPayload(item)
-    },
-
     getRedirectPayload (item) {
       return {
         params: { [this.redirectKey]: item[this.redirectKey] },
         ...this.to
       }
+    },
+
+    redirect (item) {
+      return this.redirectOnIcon ? undefined : this.getRedirectPayload(item)
     }
   }
 }

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

@@ -1,21 +1,21 @@
 <template>
-  <component :is="componentTag">
+  <component :is="mx_componentTag">
     <q-pull-to-refresh :disable="disableRefresh" @refresh="refresh">
       <header v-if="hasHeaderSlot">
-        <slot :fields="fields" :metadata="metadata" name="header" :results="results" />
+        <slot :fields="mx_fields" :metadata="mx_metadata" name="header" :results="results" />
       </header>
 
-      <slot v-if="!noFilter" :entity="entity" :errors="errors" :fields="fields" :metadata="metadata" name="filter" :results="results">
+      <slot v-if="useFilter" :entity="entity" :errors="mx_errors" :fields="mx_fields" :metadata="mx_metadata" name="filter" :results="results">
         <qas-filters v-bind="filtersProps" :entity="entity" />
       </slot>
 
       <main class="relative-position">
         <div v-if="hasResults">
-          <slot :fields="fields" :metadata="metadata" :results="results" />
+          <slot :fields="mx_fields" :metadata="mx_metadata" :results="results" />
         </div>
 
-        <div v-else-if="!isFetching">
-          <slot :fields="fields" :metadata="metadata" name="empty-results">
+        <div v-else-if="!mx_isFetching">
+          <slot :fields="mx_fields" :metadata="mx_metadata" 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,9 +42,7 @@
 </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'
 
 export default {
@@ -59,8 +57,8 @@ export default {
       type: Boolean
     },
 
-    noFilter: {
-      default: false,
+    useFilter: {
+      default: true,
       type: Boolean
     },
 
@@ -70,6 +68,8 @@ export default {
     }
   },
 
+  emits: ['fetch-success', 'fetch-error'],
+
   data () {
     return {
       page: 1
@@ -77,13 +77,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 () {
@@ -104,9 +99,11 @@ export default {
   },
 
   watch: {
-    $route () {
-      this.fetchList()
-      this.setCurrentPage()
+    $route (to, from) {
+      if (to.name === from.name) {
+        this.fetchList()
+        this.setCurrentPage()
+      }
     }
   },
 
@@ -122,22 +119,28 @@ export default {
     },
 
     async fetchList () {
-      this.isFetching = true
+      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 })
         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: errors,
+          fields: this.mx_fields,
+          metadata: metadata
+        })
 
         this.$emit('fetch-success', response)
       } catch (error) {
-        this.fetchError(error)
+        this.mx_fetchError(error)
         this.$emit('fetch-error', error)
       } finally {
-        this.isFetching = false
+        this.mx_isFetching = false
       }
     },
 

package/src/components/map/QasMap.vue

@@ -1,25 +1,22 @@
 <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'
+import { formMixin } from '../../mixins'
 
 export default {
+  name: 'QasMap',
+
   mixins: [
     formMixin
   ],
@@ -27,11 +24,7 @@ export default {
   props: {
     centerPosition: {
       type: Object,
-      default: () => {}
-    },
-
-    hasSearch: {
-      type: Boolean
+      default: () => ({})
     },
 
     markers: {
@@ -49,11 +42,13 @@ export default {
     }
   },
 
+  emits: ['update-position'],
+
   data () {
     return {
       isPopupDisplayed: false,
       currentPlace: null,
-      indexMarker: ''
+      indexMarker: null
     }
   },
 
@@ -71,21 +66,16 @@ export default {
       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/nested-fields/QasNestedFields.vue

@@ -1,13 +1,13 @@
 <template>
   <div :id="fieldName" class="qas-nested-fields">
     <div class="text-left">
-      <qas-label v-if="useSingleLabel" :label="label" />
+      <qas-label v-if="useSingleLabel" :label="fieldLabel" />
     </div>
 
     <div>
-      <component :is="componentIs" ref="inputContent" name="fade" tag="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="componentIs" name="fade" tag="div">
+          <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">
@@ -21,16 +21,20 @@
 
                 <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-events="fieldsEvents" :fields-props="fieldsProps" @input="updateValuesFromInput($event, index)">
-                      <template v-for="(slot, key) in $scopedSlots" :slot="key" slot-scope="scope">
+                    <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 :name="key" v-bind="scope" />
                       </template>
                     </qas-form-generator>
                   </slot>
 
                   <div v-if="useInlineActions" class="flex items-center qas-nested-fields__actions">
-                    <qas-btn v-if="useDuplicate" class="col-auto" color="primary" flat icon="o_content_copy" round @click="add(row)" />
-                    <qas-btn v-if="showDestroyBtn" class="col-auto" color="negative" flat icon="o_cancel" round @click="destroy(index, row)" />
+                    <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>
 
@@ -45,15 +49,17 @@
 
       <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()">
-          <qas-input class="col disabled no-pointer-events" hide-bottom-space :label="addInputLabel" outlined @focus="add()" />
+          <div class="col">
+            <qas-input class="disabled no-pointer-events" hide-bottom-space :label="addInputLabel" outlined @focus="add()" />
+          </div>
 
-          <div>
-            <qas-btn class="col-auto" color="green" flat icon="o_add_circle_outline" round />
+          <div class="col-auto">
+            <qas-btn color="green" flat icon="o_add_circle_outline" round />
           </div>
         </div>
 
         <div v-else class="q-mt-lg">
-          <qas-btn ref="test" class="full-width q-py-sm" icon="o_add" outline @click="add()">{{ addInputLabel }}</qas-btn>
+          <qas-btn class="full-width q-py-sm" icon="o_add" outline @click="add()">{{ addInputLabel }}</qas-btn>
         </div>
       </slot>
     </div>
@@ -61,12 +67,12 @@
 </template>
 
 <script>
-import QasBtn from '../btn/QasBtn'
-import QasFormGenerator from '../form-generator/QasFormGenerator'
-import QasInput from '../input/QasInput'
-import QasLabel from '../label/QasLabel'
-import { constructObject } from '../../helpers'
+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 { constructObject } from '../../helpers'
 import { extend } from 'quasar'
 import { camelize } from 'humps'
 
@@ -126,11 +132,6 @@ export default {
       default: () => ({})
     },
 
-    fieldsEvents: {
-      type: Object,
-      default: () => ({})
-    },
-
     fieldsProps: {
       type: Object,
       default: () => ({})
@@ -191,12 +192,14 @@ export default {
       type: Boolean
     },
 
-    value: {
+    modelValue: {
       type: Array,
       default: () => []
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       nested: []
@@ -204,7 +207,7 @@ export default {
   },
 
   computed: {
-    label () {
+    fieldLabel () {
       return this.field?.label
     },
 
@@ -234,16 +237,16 @@ export default {
     },
 
     transformedErrors () {
-      return constructObject(this.fieldName, this.errors)
+      return Array.isArray(this.errors) ? this.errors : constructObject(this.fieldName, this.errors)
     },
 
-    componentIs () {
+    componentTag () {
       return this.useAnimation ? 'transition-group' : 'div'
     }
   },
 
   watch: {
-    value: {
+    modelValue: {
       handler (value) {
         this.nested = extend(true, [], value)
       },
@@ -251,8 +254,8 @@ export default {
     },
 
     field: {
-      handler (value) {
-        !this.value.length && this.setDefaultValue()
+      handler () {
+        !this.modelValue.length && this.setDefaultNestedValue()
       },
       immediate: true
     }
@@ -267,7 +270,7 @@ export default {
         this.setFocus()
       })
 
-      return this.emitter()
+      return this.updateModelValue()
     },
 
     setFocus () {
@@ -277,8 +280,8 @@ export default {
       return firstElementToBeFocused?.focus && firstElementToBeFocused.focus()
     },
 
-    emitter (value, index) {
-      return this.$emit('input', value || this.nested)
+    updateModelValue (value) {
+      return this.$emit('update:modelValue', value || this.nested)
     },
 
     destroy (index, row) {
@@ -286,22 +289,22 @@ export default {
         ? this.nested.splice(index, 1, { [this.destroyKey]: true, ...row })
         : this.nested.splice(index, 1)
 
-      return this.emitter()
+      return this.updateModelValue()
     },
 
     updateValuesFromInput (value, index) {
       this.nested.splice(index, 1, value)
 
-      return this.emitter(null, index)
+      return this.updateModelValue(null, index)
     },
 
-    setDefaultValue () {
+    setDefaultNestedValue () {
       this.nested.splice(0, 0, { ...this.rowObject })
     },
 
     setScroll () {
       const elements = this.$refs.inputContent.children
-      const element = elements[elements.length - 1].elm
+      const element = elements[elements.length - 1]
       const { top } = element.getBoundingClientRect()
       const pageOffset = window.pageYOffset
 
@@ -316,7 +319,7 @@ export default {
         return this.useIndexLabel ? `${this.rowLabel} ${rowKey + 1}` : this.rowLabel
       }
 
-      return this.label
+      return this.fieldLabel
     }
   }
 }