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

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

@@ -1,13 +1,13 @@
 <template>
-  <component :is="componentTag">
-    <header v-if="hasHeaderSlot">
-      <slot :errors="errors" :fields="fields" :metadata="metadata" name="header" />
+  <component :is="mx_componentTag">
+    <header v-if="mx_hasHeaderSlot">
+      <slot :errors="mx_errors" :fields="mx_fields" :metadata="mx_metadata" name="header" />
     </header>
 
     <q-form ref="form" @submit="submit">
-      <slot :errors="errors" :fields="fields" :metadata="metadata" />
+      <slot :errors="mx_errors" :fields="mx_fields" :metadata="mx_metadata" />
 
-      <slot v-if="!readOnly" :errors="errors" :fields="fields" :metadata="metadata" name="actions">
+      <slot v-if="!readOnly" :errors="mx_errors" :fields="mx_fields" :metadata="mx_metadata" name="actions">
         <div class="justify-end q-col-gutter-md q-my-lg row">
           <div v-if="hasCancelButton" class="col-12 col-sm-2" :class="cancelButtonClass">
             <qas-btn v-close-popup="dialog" class="full-width" :data-cy="`btnCancel-${entity}`" :disable="isCancelButtonDisabled" :label="cancelButton" outline type="button" @click="cancel" />
@@ -19,37 +19,40 @@
       </slot>
     </q-form>
 
-    <footer v-if="hasFooterSlot">
-      <slot :errors="errors" :fields="fields" :metadata="metadata" name="footer" />
+    <footer v-if="mx_hasFooterSlot">
+      <slot :errors="mx_errors" :fields="mx_fields" :metadata="mx_metadata" name="footer" />
     </footer>
 
-    <qas-dialog v-model="showDialog" v-bind="dialogConfig" />
+    <qas-dialog v-model="showDialog" v-bind="defaultDialogProps" />
 
-    <q-inner-loading :showing="isFetching">
+    <q-inner-loading :showing="mx_isFetching">
       <q-spinner color="grey" size="3em" />
     </q-inner-loading>
   </component>
 </template>
 
 <script>
-import { get, isEqual, cloneDeep } from 'lodash'
+import { isEqualWith } from 'lodash-es'
 import { extend } from 'quasar'
+import { onBeforeRouteLeave } from 'vue-router'
 
-import { handleHistory } from '../../helpers/historyHandler'
+import { addRoute, history } from '../../store/history'
 import { NotifyError, NotifySuccess } from '../../plugins'
 
-import QasBtn from '../btn/QasBtn'
-import QasDialog from '../dialog/QasDialog'
+import QasBtn from '../btn/QasBtn.vue'
+import QasDialog from '../dialog/QasDialog.vue'
 
-import viewMixin from '../../mixins/view'
+import { viewMixin, screenMixin } from '../../mixins'
 
 export default {
+  name: 'QasFormView',
+
   components: {
     QasBtn,
     QasDialog
   },
 
-  mixins: [viewMixin],
+  mixins: [viewMixin, screenMixin],
 
   props: {
     cancelButton: {
@@ -90,46 +93,60 @@ export default {
       type: Boolean
     },
 
+    ignoreKeysInUnsavedChanges: {
+      default: () => [],
+      type: Array
+    },
+
     submitButton: {
       default: 'Salvar',
       type: String
     },
 
-    value: {
+    modelValue: {
       default: () => ({}),
       type: Object
+    },
+
+    submiting: {
+      type: Boolean
     }
   },
 
+  emits: [
+    'submit-success',
+    'submit-error',
+    'fetch-success',
+    'fetch-error',
+    'update:modelValue',
+    'update:submiting',
+    'update:errors'
+  ],
+
   data () {
     return {
       cachedResult: {},
       hasResult: false,
       isSubmiting: false,
       showDialog: false,
+      ignoreRouterGuard: false,
 
-      dialogConfig: {
+      defaultDialogProps: {
         card: {
           title: 'Atenção!',
           description: 'Você está deixando a página e suas alterações serão perdidas. Tem certeza que deseja sair sem salvar?'
         },
 
-        ok: {
-          props: { label: 'Continuar editando' },
-          events: null
-        },
+        ok: { props: { label: 'Continuar editando' } },
 
-        cancel: {
-          props: { label: 'Sair' },
-          events: null
-        }
+        cancel: { props: { label: 'Sair' } }
       }
     }
   },
 
   computed: {
     cancelButtonClass () {
-      return this.isMobile && 'order-last'
+      return this.mx_isSmall && 'order-last'
     },
 
     fetchURL () {
@@ -148,10 +165,6 @@ export default {
       return this.mode === 'create'
     },
 
-    isMobile () {
-      return this.$q.screen.xs
-    },
-
     resolvedRoute () {
       if (this.route && Object.keys(this.route).length) {
         return this.route
@@ -161,40 +174,56 @@ export default {
     },
 
     saveButtonClass () {
-      return this.isMobile && 'order-first'
+      return this.mx_isSmall && 'order-first'
     },
 
     isCancelButtonDisabled () {
-      return this.disable || this.isSubmitting
+      return this.disable || this.isSubmiting
+    },
+
+    history () {
+      return history.list
     }
   },
 
   watch: {
-    fields (fields) {
-      const models = { ...this.getModelsByFields(fields), ...this.value }
-      this.$emit('input', models)
+    mx_fields (fields) {
+      const models = { ...this.getModelsByFields(fields), ...this.modelValue }
 
       if (!this.hasResult && this.showDialogOnUnsavedChanges) {
-        this.cachedResult = cloneDeep(models)
+        this.cachedResult = extend(true, {}, models)
       }
+    },
+
+    isSubmiting (value) {
+      this.$emit('update:submiting', value)
     }
   },
 
   created () {
+    onBeforeRouteLeave(this.beforeRouteLeave)
+    window.addEventListener('delete-success', this.setIgnoreRouterGuard)
     this.fetch()
   },
 
-  methods: {
-    beforeRouteLeave (to, from, next, fromDelete) {
-      if (!this.showDialogOnUnsavedChanges) {
-        return null
-      }
+  onUnmounted () {
+    window.removeEventListener('delete-success', this.setIgnoreRouterGuard)
+  },
 
-      if (fromDelete || isEqual(this.value, this.cachedResult)) {
+  methods: {
+    beforeRouteLeave (to, from, next) {
+      if (
+        !this.showDialogOnUnsavedChanges ||
+        this.ignoreRouterGuard ||
+        isEqualWith(this.modelValue, this.cachedResult, this.handleIgnoreKeysInUnsavedChanges)
+      ) {
         return next()
       }
 
-      this.handleDialog(next)
+      this.handleDialog(() => {
+        this.ignoreRouterGuard = true
+        next()
+      })
     },
 
     cancel () {
@@ -204,7 +233,7 @@ export default {
     },
 
     async fetch (params) {
-      this.isFetching = true
+      this.mx_isFetching = true
 
       try {
         const response = await this.$store.dispatch(
@@ -213,22 +242,28 @@ export default {
 
         const { errors, fields, metadata, result } = 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
+        })
 
         if (result) {
           this.hasResult = true
-          this.$emit('input', { ...this.value, ...result })
+          this.$emit('update:modelValue', { ...this.modelValue, ...result })
           this.cachedResult = this.showDialogOnUnsavedChanges && extend(true, {}, result)
         }
 
-        this.$emit('fetch-success', response, this.value)
+        this.$emit('fetch-success', response, this.modelValue)
       } catch (error) {
-        this.fetchError(error)
+        this.mx_fetchError(error)
         this.$emit('fetch-error', error)
       } finally {
-        this.isFetching = false
+        this.mx_isFetching = false
       }
     },
 
@@ -243,27 +278,39 @@ export default {
     },
 
     handleCancelRoute () {
-      if (this.cancelRoute) {
+      const acceptTypes = ['string', 'object']
+
+      if (this.cancelRoute && acceptTypes.includes(typeof this.cancelRoute)) {
         return this.$router.push(this.cancelRoute)
       }
 
       const [, path] = this.$route.path.split('/')
-      const resolvedPath = this.$router.resolve(`/${path}`).route.path
+      const resolvedPath = this.$router.resolve(`/${path}`)
 
       this.$router.push(resolvedPath)
     },
 
-    handleDialog (fn) {
+    handleDialog (next) {
       this.openDialog()
 
-      this.dialogConfig.ok.events = { click: () => handleHistory().push(this.$route) }
-      this.dialogConfig.cancel.events = { click: fn }
+      this.defaultDialogProps.ok.props.onClick = () => addRoute(this.$route)
+      this.defaultDialogProps.cancel.props.onClick = next
     },
 
     openDialog () {
       this.showDialog = true
     },
 
+    // ignora chaves na hora de validar quando usuário está saindo da página
+    handleIgnoreKeysInUnsavedChanges (firstValue, secondValue) {
+      if (!this.ignoreKeysInUnsavedChanges.length) return
+
+      this.ignoreKeysInUnsavedChanges.forEach(key => {
+        delete firstValue[key]
+        delete secondValue[key]
+      })
+    },
+
     async submit (event) {
       if (event) {
         event.preventDefault()
@@ -278,31 +325,35 @@ export default {
       try {
         const response = await this.$store.dispatch(
           `${this.entity}/${this.mode}`,
-          { id: this.id, payload: this.value, url: this.url }
+          { id: this.id, payload: this.modelValue, url: this.url }
         )
 
         if (this.showDialogOnUnsavedChanges) {
-          this.cachedResult = cloneDeep(this.value)
+          this.cachedResult = extend(true, {}, this.modelValue)
         }
 
-        this.setErrors()
+        this.mx_setErrors()
         NotifySuccess(response.data.status.text || 'Item salvo com sucesso!')
-        this.$emit('submit-success', response, this.value)
+        this.$emit('submit-success', response, this.modelValue)
       } catch (error) {
-        const errors = get(error, 'response.data.errors')
-        const message = get(error, 'response.data.status.text')
+        const errors = error?.response?.data?.errors
+        const message = error?.response?.data?.status?.text
+        const exceptionResponse = error?.response?.data?.exception
+        const exception = errors ? 'Existem erros de validação no formulário.' : exceptionResponse || error.message
 
-        const exception = errors
-          ? 'Existem erros de validação no formulário.'
-          : get(error, 'response.data.exception') || error.message
+        this.mx_setErrors(errors)
+        this.$emit('update:errors', this.mx_errors)
 
-        this.setErrors(errors)
         NotifyError(message || 'Ops! Erro ao salvar item.', exception)
 
         this.$emit('submit-error', error)
       } finally {
         this.isSubmiting = false
       }
+    },
+
+    setIgnoreRouterGuard ({ detail: { id, entity } }) {
+      this.ignoreRouterGuard = this.id === id && this.entity === entity
     }
   }
 }

package/src/components/gallery/QasGallery.vue

@@ -1,8 +1,9 @@
+
 <template>
-  <qas-box class="col-12 gallery">
+  <qas-box class="gallery">
     <div class="q-col-gutter-md row">
-      <div v-for="(item, index) in initialitems()" :key="index" :class="galleryColumnsClasses">
-        <q-img class="cursor-pointer rounded-borders" :height="itemHeight" :src="item" @click="toggleCarouselDialog(index)" @error="onError(item)" />
+      <div v-for="(image, index) in initialImages()" :key="index" :class="galleryColumnsClasses">
+        <q-img class="cursor-pointer rounded-borders" :height="imageHeight" :src="image" @click="toggleCarouselDialog(index)" @error="onError(image)" />
       </div>
       <slot name="default">
         <div v-if="!hideShowMore" class="full-width text-center">
@@ -16,9 +17,9 @@
           </div>
         </template>
         <template #description>
-          <q-carousel v-model="itemIndex" animated :arrows="!$_isSmall" control-text-color="primary" :fullscreen="$_isSmall" :height="carouselitemHeight" :next-icon="carouselNextIcon" :prev-icon="carouselPreviousIcon" swipeable :thumbnails="showThumbnails">
-            <q-carousel-slide v-for="(item, index) in items" :key="index" class="bg-no-repeat bg-size-contain" :img-src="item" :name="index">
-              <div v-if="$_isSmall" class="full-width justify-end row">
+          <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-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">
                 <qas-btn dense flat icon="o_close" @click="toggleCarouselDialog" />
               </div>
             </q-carousel-slide>
@@ -33,6 +34,8 @@
 import screenMixin from '../../mixins/screen'
 
 export default {
+  name: 'QasGallery',
+
   mixins: [screenMixin],
 
   props: {
@@ -56,7 +59,7 @@ export default {
       default: 6
     },
 
-    items: {
+    images: {
       type: Array,
       default: () => []
     },
@@ -75,64 +78,74 @@ export default {
   data () {
     return {
       carouselDialog: false,
-      itemIndex: [],
-      displayeditems: this.initialLength
+      clonedImages: [],
+      imageIndex: [],
+      displayedImages: this.initialLength
     }
   },
 
   computed: {
-    itemHeight () {
-      if (this.isSingleItem) {
+    imageHeight () {
+      if (this.isSingleImage) {
         return this.height || 'auto'
       }
 
-      return this.$_isSmall ? '90px' : '120px'
+      return this.mx_isSmall ? '90px' : '120px'
     },
 
     galleryColumnsClasses () {
-      if (this.isSingleItem) return 'col-12'
+      if (this.isSingleImage) return 'col-12'
 
-      return this.$_isSmall ? 'col-6' : 'col-2'
+      return this.mx_isSmall ? 'col-6' : 'col-2'
     },
 
     hideShowMore () {
-      return this.items.length <= this.displayeditems
+      return this.clonedImages.length <= this.displayedImages
     },
 
-    carouselitemHeight () {
+    carouselImageHeight () {
       return 'calc((500/976) * 100vh)'
     },
 
     showThumbnails () {
-      return !this.isSingleItem
+      return !this.isSingleImage
     },
 
-    isSingleItem () {
-      return this.items.length === 1
+    isSingleImage () {
+      return this.clonedImages.length === 1
+    }
+  },
+
+  watch: {
+    images: {
+      handler (value) {
+        this.clonedImages = [...value]
+      },
+      immediate: true
     }
   },
 
   methods: {
-    toggleCarouselDialog (item) {
-      this.itemIndex = item
+    toggleCarouselDialog (image) {
+      this.imageIndex = image
       this.carouselDialog = !this.carouselDialog
     },
 
     showMore () {
-      this.displayeditems += this.loadLength
+      this.displayedImages += this.loadLength
     },
 
     onError (error) {
-      const index = this.items.findIndex(item => item === error)
+      const index = this.clonedImages.findIndex(image => image === error)
 
       if (~index) {
-        this.$delete(this.items, index)
+        this.clonedImages.splice(index, 1)
         this.$forceUpdate()
       }
     },
 
-    initialitems () {
-      return this.items.slice(0, this.displayeditems)
+    initialImages () {
+      return this.clonedImages.slice(0, this.displayedImages)
     }
   }
 }

package/src/components/grid-generator/QasGridGenerator.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :class="classes">
-    <div v-for="(field, key) in formattedFields" :key="key" :class="getFieldClass(key, true)">
+  <div :class="mx_classes">
+    <div v-for="(field, key) in formattedFields" :key="key" :class="mx_getFieldClass(key, true)">
       <slot :field="slotValue[key]" :name="`field-${field.name}`">
         <slot :field="slotValue[key]" name="header">
           <div :class="headerClass">{{ field.label }}</div>
@@ -15,12 +15,14 @@
 </template>
 
 <script>
-import generatorMixin from '../../mixins/generator'
+import { generatorMixin } from '../../mixins'
 import { humanize } from '../../helpers/filters'
 import { extend } from 'quasar'
-import { isObject } from 'lodash'
+import { isObject } from 'lodash-es'
 
 export default {
+  name: 'QasGridGenerator',
+
   mixins: [generatorMixin],
 
   props: {
@@ -74,14 +76,18 @@ export default {
     },
 
     resultsByFields () {
+      return this.getResultsByFields()
+    }
+  },
+
+  methods: {
+    getResultsByFields () {
       const formattedResult = {}
       const result = extend(true, {}, this.result)
 
       for (const key in result) {
         if (this.formattedFields[key]?.type) {
           formattedResult[key] = humanize(this.formattedFields[key], result[key])
-          // TODO: Rever.
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
           this.slotValue[key] = { ...this.formattedFields[key], formattedResult: formattedResult[key] }
         }
       }

package/src/components/input/QasInput.vue

@@ -1,9 +1,8 @@
 <template>
   <div>
-    <q-input ref="mask" v-model="model" v-bind="$attrs" bottom-slots :mask="mask" unmasked-value v-on="listeners">
-      <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" />
+    <q-input ref="input" v-model="model" bottom-slots v-bind="$attrs" :mask="mask" :unmasked-value="unmaskedValue">
+      <template v-for="(_, name) in $slots" #[name]="context">
+        <slot :name="name" v-bind="context || {}" />
       </template>
     </q-input>
   </div>
@@ -13,43 +12,36 @@
 export default {
   name: 'QasInput',
 
+  inheritAttrs: false,
+
   props: {
-    value: {
+    modelValue: {
       default: '',
       type: String
+    },
+
+    unmaskedValue: {
+      default: true,
+      type: Boolean
     }
   },
 
-  computed: {
-    model: {
-      get () {
-        return this.value
-      },
-
-      set (value) {
-        return this.$emit('input', value)
-      }
-    },
+  emits: ['update:modelValue'],
 
-    listeners () {
-      const { input, ...listeners } = this.$listeners
-      return listeners
+  computed: {
+    hasError () {
+      return this.inputReference.hasError
     },
 
     inputReference () {
-      return this.$refs.mask
-    },
-
-    hasError () {
-      return this.inputReference.hasError
+      return this.$refs.input
     },
 
     mask () {
       const { mask } = this.$attrs
+      const hasDefaultMask = Object.prototype.hasOwnProperty.call(this.masks, mask)
 
-      return Object.prototype.hasOwnProperty.call(this.masks, mask)
-        ? this.masks[mask]()
-        : mask
+      return hasDefaultMask ? this.masks[mask]() : mask
     },
 
     masks () {
@@ -60,12 +52,22 @@ export default {
         phone: () => this.toggleMask('(##) ####-#####', '(##) #####-####'),
         'postal-code': () => '#####-###'
       }
+    },
+
+    model: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        return this.$emit('update:modelValue', value)
+      }
     }
   },
 
   watch: {
     mask () {
-      const input = this.$refs.mask.$refs.input
+      const input = this.inputReference.$el?.querySelector('input')
 
       requestAnimationFrame(() => {
         input.selectionStart = input.value ? input.value.length : ''
@@ -74,21 +76,21 @@ export default {
   },
 
   methods: {
-    toggleMask (first, second) {
-      const length = first.split('#').length - 2
-      return this.value?.length > length ? second : first
-    },
-
-    validate (value) {
-      return this.inputReference.validate(value)
-    },
-
     focus () {
       return this.inputReference.focus()
     },
 
     resetValidation () {
       return this.inputReference.resetValidation()
+    },
+
+    toggleMask (first, second) {
+      const length = first.split('#').length - 2
+      return this.modelValue?.length > length ? second : first
+    },
+
+    validate (value) {
+      return this.inputReference.validate(value)
     }
   }
 }