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

package/src/components/dialog/QasDialog.vue

@@ -1,9 +1,12 @@
 <template>
-  <q-dialog ref="dialog" v-model="model" v-bind="$attrs" :persistent="persistent" v-on="$listeners">
+  <q-dialog ref="dialog" :persistent="persistent" v-bind="dialogProps" @hide="onDialogHide" @update:model-value="updateModelValue">
     <q-card v-bind="cardProps" class="q-pa-sm" :style="style">
       <q-card-section>
         <slot name="header">
-          <div class="text-bold text-h6">{{ card.title }}</div>
+          <div class="justify-between row">
+            <div class="text-bold text-h6">{{ card.title }}</div>
+            <qas-btn v-if="useCloseIcon" v-close-popup dense flat icon="o_close" rounded />
+          </div>
         </slot>
       </q-card-section>
 
@@ -17,14 +20,15 @@
 
       <q-card-section>
         <slot name="actions">
-          <qas-btn-actions v-bind="btnActions">
+          <qas-actions v-bind="btnActionsProps">
             <template #primary>
-              <qas-btn v-if="ok" v-close-popup="!useForm" class="full-width" v-bind="defaultOk.props" v-on="defaultOk.events" @click="submitHandler" />
+              <qas-btn v-if="ok" v-close-popup="!useForm" class="full-width" v-bind="defaultOk" @click="submitHandler" />
             </template>
+
             <template #secondary>
-              <qas-btn v-if="cancel" v-close-popup class="full-width" v-bind="defaultCancel.props" v-on="defaultCancel.events" />
+              <qas-btn v-if="cancel" v-close-popup class="full-width" v-bind="defaultCancel" />
             </template>
-          </qas-btn-actions>
+          </qas-actions>
         </slot>
       </q-card-section>
     </q-card>
@@ -33,23 +37,29 @@
 
 <script>
 import QasBtn from '../btn/QasBtn.vue'
-import QasBtnActions from '../btn-actions/QasBtnActions.vue'
+import QasActions from '../actions/QasActions.vue'
+
+import screenMixin from '../../mixins/screen'
 
 export default {
+  name: 'QasDialog',
+
   components: {
     QasBtn,
-    QasBtnActions
+    QasActions
   },
 
+  mixins: [screenMixin],
+
   props: {
-    btnActions: {
+    btnActionsProps: {
       default: () => ({}),
       type: Object
     },
 
     cancel: {
       default: () => ({}),
-      type: [Boolean, Object]
+      type: [Object, Boolean]
     },
 
     card: {
@@ -74,7 +84,7 @@ export default {
 
     ok: {
       default: () => ({}),
-      type: [Boolean, Object]
+      type: [Object, Boolean]
     },
 
     persistent: {
@@ -86,91 +96,85 @@ export default {
       type: Boolean
     },
 
-    value: {
+    modelValue: {
       type: Boolean
-    }
-  },
+    },
 
-  data () {
-    return {
-      dialogMethods: {
-        focus: null,
-        hide: null,
-        shake: null,
-        show: null,
-        toggle: null
-      }
+    usePlugin: {
+      type: Boolean
+    },
+
+    useCloseIcon: {
+      type: Boolean
     }
   },
 
+  emits: [
+    'update:modelValue',
+    'validate',
+    'ok',
+    'hide',
+    'update:open'
+  ],
+
   computed: {
     defaultCancel () {
       return {
-        events: this.cancel?.events,
-
-        props: {
-          label: 'Cancelar',
-          outline: true,
-          ...this.cancel?.props
-        }
+        label: 'Cancelar',
+        outline: true,
+        ...this.cancel?.props
       }
     },
 
-    defaultDialogMethods () {
-      return this.dialogMethods
-    },
-
     defaultOk () {
       return {
-        events: this.ok?.events,
-
-        props: {
-          label: 'Ok',
-          type: this.ok?.props.type || this.useForm ? 'submit' : 'button',
-          ...this.ok?.props
-        }
-      }
-    },
-
-    isSmallScreen () {
-      return this.$q.screen.xs
-    },
-
-    model: {
-      get () {
-        return this.value
-      },
-
-      set (value) {
-        return this.$emit('input', value)
+        label: 'Ok',
+        type: this.ok?.props?.type || this.useForm ? 'submit' : 'button',
+        ...this.ok?.props
       }
     },
 
     style () {
       return {
-        maxWidth: this.maxWidth || (this.isSmallScreen ? '' : '600px'),
-        minWidth: this.minWidth || (this.isSmallScreen ? '' : '400px')
+        maxWidth: this.maxWidth || (this.mx_isSmall ? '' : '600px'),
+        minWidth: this.minWidth || (this.mx_isSmall ? '' : '400px')
       }
     },
 
     componentTag () {
       return this.useForm ? 'q-form' : 'div'
-    }
-  },
+    },
 
-  mounted () {
-    this.setDialogMethods()
+    dialogProps () {
+      return {
+        ...(!this.usePlugin && { modelValue: this.modelValue }),
+        ...this.$attrs
+      }
+    }
   },
 
   methods: {
-    setDialogMethods () {
-      for (const key in this.dialogMethods) {
-        this.dialogMethods[key] = this.$refs.dialog[key]
-      }
-    },
-
     async submitHandler () {
       this.useForm && this.$emit('validate', await this.$refs.form.validate())
+    },
+
+    // metodo para funcionar como plugin
+    show () {
+      this.$refs.dialog.show()
+    },
+
+    // metodo para funcionar como plugin
+    hide () {
+      this.$refs.dialog.hide()
+    },
+
+    // metodo para funcionar como plugin
+    onDialogHide () {
+      this.$emit('hide')
+    },
+
+    updateModelValue (value) {
+      this.$emit('update:modelValue', value)
     }
   }
 }

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

@@ -9,10 +9,15 @@
 </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'],
+
   data () {
     return {
       component: null,
@@ -39,7 +44,7 @@ export default {
     },
 
     resolveRoute (path) {
-      return this.$router.resolve(path).route
+      return this.$router.resolve(path)
     },
 
     async show (route) {
@@ -52,9 +57,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/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 {
@@ -148,11 +154,6 @@ 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 () {
       const 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/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="useBadges && 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: {
+    useBadges: {
       default: true,
       type: Boolean
     },
@@ -72,13 +75,13 @@ export default {
       type: String
     },
 
-    noFilterButton: {
-      default: false,
+    useFilterButton: {
+      default: true,
       type: Boolean
     },
 
-    noSearch: {
-      default: false,
+    useSearch: {
+      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)
@@ -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/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)
     }
   }
 }