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

package/src/components/btn/QasBtn.vue

@@ -1,43 +1,46 @@
+<template>
+  <q-btn color="primary" no-caps unelevated v-bind="attributes">
+    <slot v-if="showLabel">{{ $attrs.label }}</slot>
+
+    <template v-for="(_, name) in slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
+  </q-btn>
+</template>
+
 <script>
-import { QBtn } from 'quasar'
+import { screenMixin } from '../../mixins'
 
 export default {
-  extends: QBtn,
-
-  props: {
-    color: {
-      default: 'primary',
-      type: String
-    },
+  name: 'QasBtn',
 
-    // FIXME: Alterar para hideLabel="xs". Remover todos os "mobiles".
-    hideMobileLabel: {
-      type: Boolean
-    },
+  mixins: [screenMixin],
 
-    noCaps: {
-      default: true,
-      type: Boolean
-    },
+  inheritAttrs: false,
 
-    unelevated: {
-      default: true,
+  props: {
+    hideLabelOnSmallScreen: {
       type: Boolean
     }
   },
 
   computed: {
-    // Computada original do Quasar, modificada para esconder o rótulo em dispositivos móveis.
+    attributes () {
+      const { label, ...attributes } = this.$attrs
+      return attributes
+    },
+
     hasLabel () {
-      return !!this.label && this.mobileLabel
+      return !!(this.$attrs.label || this.$slots.default)
     },
 
-    isMobile () {
-      return this.$q.screen.xs
+    showLabel () {
+      return this.hasLabel && !(this.hideLabelOnSmallScreen && this.mx_isSmall)
     },
 
-    mobileLabel () {
-      return !(this.hideMobileLabel && this.isMobile)
+    slots () {
+      const { default: _, ...slots } = this.$slots
+      return slots
     }
   }
 }

package/src/components/btn/QasBtn.yml

@@ -0,0 +1,12 @@
+type: component
+
+mixins:
+  - quasar/dist/api/QBtn.json
+
+meta:
+  desc: O mesmo botão do Quasar (QBtn), mas com o nosso estilo.
+
+props:
+  hide-label-on-small-screen:
+    desc: Esconde o rótulo do botão quando o tamanho da tela for pequeno.
+    type: Boolean

package/src/components/card/QasCard.vue

@@ -7,8 +7,10 @@
             <template #navigation-icon="{ active, btnProps, onClick }">
               <qas-btn color="white" dense flat :icon="getNavigationIcon(active, btnProps)" round size="sm" @click="onClick" />
             </template>
-            <q-carousel-slide v-for="(item, index) in imagesList" :key="index" class="bg-no-repeat" :class="bgImagePositionClasses" :img-src="item" :name="index" />
+
+            <q-carousel-slide v-for="(item, index) in imagesList" :key="index" class="bg-no-repeat" :class="bgImagePositionClass" :img-src="item" :name="index" />
           </q-carousel>
+
           <div class="absolute-top flex items-center q-pa-md">
             <slot name="carousel-header" />
           </div>
@@ -16,12 +18,12 @@
       </div>
 
       <q-card-section class="col-grow column justify-between w-full">
-        <div class="w-full" :class="gutterClasses">
+        <div class="w-full" :class="gutterClass">
           <slot />
         </div>
       </q-card-section>
 
-      <div v-if="useActions" class="border-primary-contrast border-top overflow-hidden row">
+      <div v-if="hasActionsSlot" class="border-primary-contrast border-top overflow-hidden row">
         <slot name="actions" />
       </div>
     </q-card>
@@ -30,20 +32,26 @@
 
 <script>
 export default {
+  name: 'QasCard',
+
   props: {
     bgImagePosition: {
       type: String,
       default: 'center'
     },
 
+    formMode: {
+      type: Boolean
+    },
+
     gutter: {
       type: String,
       default: 'sm'
     },
 
     images: {
-      type: Array,
-      default: () => ([])
+      default: () => ([]),
+      type: Array
     },
 
     outlined: {
@@ -51,8 +59,8 @@ export default {
     },
 
     result: {
-      type: Object,
-      default: () => ({})
+      default: () => ({}),
+      type: Object
     },
 
     useHeader: {
@@ -67,32 +75,32 @@ export default {
   },
 
   computed: {
-    bgImagePositionClasses () {
-      return [`bg-position-${this.bgImagePosition}`]
+    bgImagePositionClass () {
+      return `bg-position-${this.bgImagePosition}`
     },
 
-    hasImages () {
-      return this.images.length > 1
+    cardClasses () {
+      return this.formMode ? 'bg-white border-primary no-shadow' : 'box-shadow-1'
     },
 
-    imagesLength () {
-      return this.images?.length
+    gutterClass () {
+      return `q-col-gutter-${this.gutter}`
     },
 
-    imagesList () {
-      return this.imagesLength && this.images.slice(0, 3)
+    hasActionsSlot () {
+      return !!this.$slots.actions
     },
 
-    cardClasses () {
-      return [this.formMode ? 'bg-white border-primary no-shadow' : 'box-shadow-1']
+    hasImages () {
+      return this.images.length > 1
     },
 
-    gutterClasses () {
-      return [`q-col-gutter-${this.gutter}`]
+    imagesLength () {
+      return this.images?.length
     },
 
-    useActions () {
-      return !!(this.$slots.actions || this.$scopedSlots.actions)
+    imagesList () {
+      return this.imagesLength && this.images.slice(0, 3)
     }
   },
 

package/src/components/checkbox-group/QasCheckboxGroup.vue

@@ -1,38 +1,36 @@
 <template>
   <div>
     <div v-for="(option, index) in options" :key="index">
-      <q-checkbox :class="hasChildren(option) ? titleClass : []" :label="option.label" :value="hasChildren(option) ? group[index] : option.value" @input="updateCheckbox($event, option, index)" />
-      <q-option-group v-if="hasChildren(option)" class="q-ml-sm" inline :options="option.children" type="checkbox" :value="value" @input="updateChildren($event, option, index)" />
+      <q-checkbox :class="getCheckboxClass(option)" :label="option.label" :model-value="getModelValue(option, index)" @update:model-value="updateCheckbox($event, option, index)" />
+      <q-option-group v-if="hasChildren(option)" class="q-ml-sm" inline :model-value="modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  name: 'QasCheckboxGroup',
+
   props: {
     options: {
       default: () => [],
       type: Array
     },
 
-    value: {
+    modelValue: {
       default: () => [],
       type: Array
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       group: {}
     }
   },
 
-  computed: {
-    titleClass () {
-      return ['text-weight-bold']
-    }
-  },
-
   watch: {
     options () {
       this.handleParent()
@@ -48,7 +46,7 @@ export default {
       for (const index in this.options) {
         const option = this.options[index]
         if (this.hasChildren(option)) {
-          this.setGroupIntersection(this.value, option, index)
+          this.setGroupIntersection(this.modelValue, option, index)
         }
       }
     },
@@ -60,25 +58,41 @@ export default {
     setGroupIntersection (value, option, index) {
       const options = option.children.map(item => item.value)
       const intersection = options.filter(item => value.includes(item))
-      this.$set(this.group, index, intersection.length ? (intersection.length === options.length ? true : null) : false)
+
+      this.group[index] = intersection.length ? (intersection.length === options.length ? true : null) : false
     },
 
     updateCheckbox (value, option, index) {
       if (!this.hasChildren(option)) {
         // Arrumar
-        return this.$emit('input', this.value)
+        return this.updateModelValue(this.modelValue)
       }
-      this.$set(this.group, index, value)
+
+      this.group[index] = value
       const groupValues = option.children.map(item => item.value)
+
       const updatedValue = value
-        ? [...this.value, ...groupValues]
-        : this.value.filter(item => !groupValues.includes(item))
-      this.$emit('input', updatedValue)
+        ? [...this.modelValue, ...groupValues]
+        : this.modelValue.filter(item => !groupValues.includes(item))
+
+      this.updateModelValue(updatedValue)
     },
 
     updateChildren (value, option, index) {
       this.setGroupIntersection(value, option, index)
-      this.$emit('input', value)
+      this.updateModelValue(value)
+    },
+
+    getCheckboxClass (option) {
+      return this.hasChildren(option) && 'text-weight-bold'
+    },
+
+    getModelValue (option, index) {
+      return this.hasChildren(option) ? this.group[index] : option.value
+    },
+
+    updateModelValue (value) {
+      this.$emit('update:modelValue', value)
     }
   }
 }

package/src/components/copy/QasCopy.vue

@@ -1,42 +1,53 @@
 <template>
   <span>
-    <slot>{{ label }}</slot>
+    <slot>{{ text }}</slot>
 
-    <q-btn class="q-ml-xs" color="grey-5" flat :icon="icon" round :size="size" @click="copy">
+    <qas-btn class="q-ml-xs" color="grey-5" flat :icon="icon" :loading="isLoading" round :size="size" @click="copy">
       <q-tooltip>Copiar</q-tooltip>
-    </q-btn>
+    </qas-btn>
   </span>
 </template>
 
 <script>
 import { copyToClipboard } from 'quasar'
-import { NotifyError, NotifySuccess } from '../../plugins'
 
 export default {
+  name: 'QasCopy',
+
   props: {
     icon: {
       default: 'o_file_copy',
       type: String
     },
 
-    label: {
-      required: true,
+    size: {
+      default: 'xs',
       type: String
     },
 
-    size: {
-      default: 'sm',
+    text: {
+      required: true,
       type: String
     }
   },
 
+  data () {
+    return {
+      isLoading: false
+    }
+  },
+
   methods: {
     async copy () {
+      this.isLoading = true
+
       try {
-        await copyToClipboard(this.label)
-        NotifySuccess('Copiado!', this.label)
+        await copyToClipboard(this.text)
+        this.$qas.success('Copiado!', this.text)
       } catch (error) {
-        NotifyError('Não foi possível copiar.', this.label)
+        this.$qas.error('Não foi possível copiar.', this.text)
+      } finally {
+        setTimeout(() => { this.isLoading = false }, 500)
       }
     }
   }

package/src/components/date-time-input/QasDateTimeInput.vue

@@ -1,20 +1,20 @@
 <template>
   <div>
-    <q-input ref="input" v-bind="attributes" v-on="events">
+    <qas-input ref="input" v-bind="attributes" v-model="currentValue" :unmasked-value="false" @update:model-value="updateModelValue">
       <template #append>
         <q-icon v-if="!timeOnly" class="cursor-pointer" name="o_event">
           <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale">
-            <q-date v-model="currentValue" v-bind="dateOptions" :mask="maskDate" @input="input" />
+            <q-date v-model="currentValue" v-bind="dateProps" :mask="maskDate" @update:model-value="updateModelValue" />
           </q-popup-proxy>
         </q-icon>
 
         <q-icon v-if="!dateOnly" class="cursor-pointer q-ml-md" name="o_access_time">
           <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale">
-            <q-time v-model="currentValue" v-bind="timeOptions" format24h :mask="maskDate" @input="input" />
+            <q-time v-model="currentValue" v-bind="timeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
           </q-popup-proxy>
         </q-icon>
       </template>
-    </q-input>
+    </qas-input>
   </div>
 </template>
 
@@ -23,6 +23,8 @@ import { date } from 'quasar'
 import { date as dateFn } from '../../helpers/filters'
 
 export default {
+  name: 'QasDateTimeInput',
+
   props: {
     dateMask: {
       default: 'DD/MM/YYYY',
@@ -33,7 +35,7 @@ export default {
       type: Boolean
     },
 
-    dateOptions: {
+    dateProps: {
       default: () => ({}),
       type: Object
     },
@@ -51,17 +53,19 @@ export default {
       type: Boolean
     },
 
-    timeOptions: {
+    timeProps: {
       default: () => ({}),
       type: Object
     },
 
-    value: {
+    modelValue: {
       default: '',
       type: String
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       currentValue: '',
@@ -71,21 +75,11 @@ export default {
 
   computed: {
     attributes () {
-      const { value, ...attributes } = this.$attrs
+      const { modelValue, ...attributes } = this.$attrs
 
       return {
         ...attributes,
-        mask: this.mask,
-        value: this.currentValue
-      }
-    },
-
-    events () {
-      const { input, ...events } = this.$listeners
-
-      return {
-        ...events,
-        input: this.input
+        mask: this.mask
       }
     },
 
@@ -121,11 +115,7 @@ export default {
   },
 
   created () {
-    this.currentValue = this.toMask(this.value)
-  },
-
-  mounted () {
-    this.$emit('mounted', this)
+    this.currentValue = this.toMask(this.modelValue)
   },
 
   methods: {
@@ -137,13 +127,13 @@ export default {
       this.inputElement.focus()
     },
 
-    input (value) {
+    updateModelValue (value) {
       this.currentValue = value
       const valueLength = value.replace(/_/g, '').length
 
       if (value === '' || valueLength === this.mask.length) {
         this.lastValue = this.timeOnly ? value : this.toISOString(value)
-        this.$emit('input', this.lastValue)
+        this.$emit('update:modelValue', this.lastValue)
       }
 
       if (this.dateOnly) {

package/src/components/debugger/QasDebugger.vue

@@ -10,6 +10,8 @@
 
 <script>
 export default {
+  name: 'QasDebugger',
+
   props: {
     inspect: {
       default: () => [],

package/src/components/debugger/QasDebugger.yml

@@ -0,0 +1,10 @@
+type: component
+
+meta:
+  desc: Este componente facilita a visualização de dados de qualquer tipo.
+
+props:
+  inspect:
+    desc: Lista com os dados que serão exibidos no depurador.
+    required: true
+    type: Array

package/src/components/delete/QasDelete.vue

@@ -1,7 +1,7 @@
 <template>
-  <component :is="tag" v-bind="$attrs" v-on="events">
+  <component :is="tag" @click="openConfirmDialog">
     <slot />
-    <qas-dialog v-model="showDialog" v-bind="dialogConfig" />
+    <qas-dialog v-model="showDialog" v-bind="defaultDialogProps" />
   </component>
 </template>
 
@@ -9,10 +9,12 @@
 import { Loading } from 'quasar'
 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'
 
 export default {
+  name: 'QasDelete',
+
   components: {
     QasBtn,
     QasDialog
@@ -24,7 +26,7 @@ export default {
       type: [Number, String]
     },
 
-    dialog: {
+    dialogProps: {
       default: () => ({}),
       type: Object
     },
@@ -45,6 +47,8 @@ export default {
     }
   },
 
+  emits: ['success', 'error'],
+
   data () {
     return {
       showDialog: false
@@ -52,7 +56,7 @@ export default {
   },
 
   computed: {
-    dialogConfig () {
+    defaultDialogProps () {
       return {
         card: {
           title: 'Confirmar',
@@ -60,26 +64,20 @@ export default {
         },
 
         ok: {
-          events: { click: this.destroy },
-          props: { label: 'Excluir' }
+          props: { label: 'Excluir', onClick: this.destroy }
         },
 
-        ...this.dialog
+        ...this.dialogProps
       }
     },
 
-    events () {
-      const { click, ...events } = this.$listeners
-      return { click: this.confirm, ...events }
-    },
-
     id () {
       return this.customId || this.$route.params.id
     }
   },
 
   methods: {
-    confirm () {
+    openConfirmDialog () {
       this.showDialog = true
     },
 
@@ -89,6 +87,7 @@ export default {
       try {
         await this.$store.dispatch(`${this.entity}/destroy`, { id: this.id, url: this.url })
         NotifySuccess('Item deletado com sucesso!')
+        this.createDeleteSuccessEvent()
         this.$emit('success')
       } catch (error) {
         NotifyError('Ops! Não foi possível deletar o item.')
@@ -96,6 +95,20 @@ export default {
       } finally {
         Loading.hide()
       }
+    },
+
+    createDeleteSuccessEvent () {
+      const event = new CustomEvent('delete-success', {
+        bubbles: false,
+        cancelable: false,
+        detail: {
+          entity: this.entity,
+          url: this.url,
+          id: this.id
+        }
+      })
+
+      window.dispatchEvent(event)
     }
   }
 }