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

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,10 @@ import { date } from 'quasar'
 import { date as dateFn } from '../../helpers/filters'
 
 export default {
+  name: 'QasDateTimeInput',
+
+  inheritAttrs: false,
+
   props: {
     dateMask: {
       default: 'DD/MM/YYYY',
@@ -33,7 +37,7 @@ export default {
       type: Boolean
     },
 
-    dateOptions: {
+    dateProps: {
       default: () => ({}),
       type: Object
     },
@@ -51,17 +55,19 @@ export default {
       type: Boolean
     },
 
-    timeOptions: {
+    timeProps: {
       default: () => ({}),
       type: Object
     },
 
-    value: {
+    modelValue: {
       default: '',
       type: String
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       currentValue: '',
@@ -71,21 +77,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 +117,7 @@ export default {
   },
 
   created () {
-    this.currentValue = this.toMask(this.value)
-  },
-
-  mounted () {
-    this.$emit('mounted', this)
+    this.currentValue = this.toMask(this.modelValue)
   },
 
   methods: {
@@ -137,13 +129,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/date-time-input/QasDateTimeInput.yml

@@ -0,0 +1,54 @@
+type: component
+
+mixins:
+  - '@bildvitta/quasar-ui-asteroid/dist/api/QasInput.json'
+
+meta:
+  desc: Componente de input data e hora, implementa o "QasInput".
+
+props:
+  date-mask:
+    desc: Máscara do componente de input de data.
+    default: DD/MM/YYYY
+    type: String
+
+  date-only:
+    desc: Habilita o componente para usar somente data.
+    type: Boolean
+
+  date-props:
+    desc: Propriedades do QDate (https://quasar.dev/vue-components/date#introduction).
+    default: {}
+    type: Object
+
+  gmt:
+    desc: Utilizado para se usar junto da prop "date-only" ou "time-only", caso "gmt" for "true", o model sempre vai ser retornado no padrão ISO 8601, independente ser apenas um campo somente de data ou hora.
+    type: Boolean
+
+  time-mask:
+    desc: Máscara do componente de input de hora.
+    default: HH:mm
+    type: String
+
+  time-only:
+    desc: Habilita o componente para usar somente hora.
+    type: Boolean
+
+  time-props:
+    desc: Propriedades do QTime (https://quasar.dev/vue-components/time#introduction).
+    default: {}
+    type: Object
+
+  model-value:
+    desc: Model do componente, usado para v-model.
+    default: ''
+    type: String
+    model: true
+
+events:
+  '@update:model-value -> function (value)':
+    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
+    params:
+      value:
+        desc: Novo valor do v-model
+        type: String

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,18 +1,23 @@
 <template>
-  <component :is="tag" v-bind="$attrs" v-on="events">
-    <slot />
-    <qas-dialog v-model="showDialog" v-bind="dialogConfig" />
+  <component :is="tag" v-bind="$attrs" @click="openConfirmDialog">
+    <template v-for="(_, name) in $slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
   </component>
+
+  <qas-dialog v-model="showDialog" v-bind="defaultDialogProps" />
 </template>
 
 <script>
 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 +29,7 @@ export default {
       type: [Number, String]
     },
 
-    dialog: {
+    dialogProps: {
       default: () => ({}),
       type: Object
     },
@@ -42,9 +47,19 @@ export default {
     url: {
       default: '',
       type: String
+    },
+
+    deleting: {
+      type: Boolean
     }
   },
 
+  emits: [
+    'success',
+    'error',
+    'update:deleting'
+  ],
+
   data () {
     return {
       showDialog: false
@@ -52,7 +67,7 @@ export default {
   },
 
   computed: {
-    dialogConfig () {
+    defaultDialogProps () {
       return {
         card: {
           title: 'Confirmar',
@@ -60,42 +75,54 @@ export default {
         },
 
         ok: {
-          events: { click: this.destroy },
-          props: { label: 'Excluir' }
+          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
     },
 
     async destroy () {
       Loading.show()
+      this.$emit('update:deleting', true)
 
       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.')
         this.$emit('error', error)
       } finally {
         Loading.hide()
+        this.$emit('update:deleting', false)
       }
+    },
+
+    createDeleteSuccessEvent () {
+      const event = new CustomEvent('delete-success', {
+        bubbles: false,
+        cancelable: false,
+        detail: {
+          entity: this.entity,
+          url: this.url,
+          id: this.id
+        }
+      })
+
+      window.dispatchEvent(event)
     }
   }
 }

package/src/components/delete/QasDelete.yml

@@ -0,0 +1,52 @@
+type: component
+
+meta:
+  desc: Componente para C.R.U.D. responsável por deletar (Delete).
+
+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
+
+  custom-id:
+    desc: Por padrão, o componente vai pegar o "id" que vem como parâmetro na url, caso queira que o id seja diferente da url, use esta prop.
+    type: String
+    examples: ['my-custom-id']
+
+  dialog-props:
+    desc: Props para ser repassada para o componente "QasDialog"
+    default: {}
+    type: Object
+
+  url:
+    desc: Envia como parâmetro para a action "fetchSingle" do modulo correspondente a "entity".
+    type: String
+
+  tag:
+    desc: Tag do componente.
+    default: qas-btn
+    type: String
+    examples: [q-item]
+
+  deleting:
+    desc: Model para saber se está deletando.
+    type: Boolean
+    examples: [v-model:deleting="isDeleting"]
+    model: true
+
+
+slots:
+  default:
+    desc: 'Slot para acessar dentro do componente.'
+
+events:
+  '@success -> function()':
+    desc: Dispara quando o componente deleta com sucesso.
+
+  '@error -> function(value)':
+    desc: Dispara quando acontece algum erro na hora de deletar.
+    params:
+      value:
+        desc: Erro retornado.
+        type: Object

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" @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="actionsProps">
             <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: {
+    actionsProps: {
       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,77 @@ 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'
+  ],
+
   computed: {
     defaultCancel () {
       return {
-        events: this.cancel?.events,
-
-        props: {
-          label: 'Cancelar',
-          outline: true,
-          ...this.cancel?.props
-        }
+        label: 'Cancelar',
+        outline: true,
+        ...this.cancel
       }
     },
 
-    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?.type || this.useForm ? 'submit' : 'button',
+        ...this.ok
       }
     },
 
     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()
+    },
+
+    updateModelValue (value) {
+      this.$emit('update:modelValue', value)
     }
   }
 }

package/src/components/dialog/QasDialog.yml

@@ -0,0 +1,86 @@
+type: component
+
+meta:
+  desc: Componente de dialog.
+
+props:
+  actions-props:
+    desc: Props repassadas para o "QasActions".
+    default: {}
+    type: Object
+
+  cancel:
+    desc: Props para o botão de cancelar, pode ser objeto com as propriedades ou um boolean, caso for "false", remove o botão de cancelar.
+    default: "{ label: 'Cancelar', outline: true }"
+    type: [Object, Boolean]
+    examples: ["{ label: 'Meu botão de cancelar', onClick: () => alert('fui clicado!') }"]
+
+  card:
+    desc: Objeto contendo as informações para serem exibidas dentro do dialog como "title" e "description".
+    default: {}
+    type: Object
+    examples: ["{ title: 'Meu título', description: 'Minha descrição' }"]
+
+  card-props:
+    desc: Props repassadas para o componente "<q-card />".
+    default: {}
+    type: Object
+
+  max-width:
+    desc: Tamanho máximo do dialog.
+    type: String
+
+  min-width:
+    desc: Tamanho mínimo do dialog.
+    type: String
+
+  ok:
+    desc: Props para o botão de confirmar (ok), pode ser objeto com as propriedades ou um boolean, caso for "false", remove o botão de confirmar.
+    default: "{ label: 'Ok', outline: type: this.ok?.type || this.useForm ? 'submit' : 'button' }"
+    debugger: true
+    type: [Object, Boolean]
+    examples: ["{ label: 'Meu botão de confirmar', onClick: () => alert('fui clicado!') }"]
+
+  persistent:
+    desc: Define se o dialog vai fechar ou não após clicar fora do dialog.
+    default: true
+    type: Object
+
+  use-form:
+    desc: Define se a tag onde fica a descrição no dialog vai ser um "<q-form />" ou "<div />".
+    type: Boolean
+
+  model-value:
+    desc: Model do componente, abre ou fecha o dialog.
+    type: Boolean
+    examples: [v-model="value"]
+    model: true
+
+  use-close-icon:
+    desc: Define se vai ter ou não Ícone de fechar o dialog.
+    type: Boolean
+
+slots:
+  header:
+    desc: Slot para o título.
+
+  description:
+    desc: Slot para descrição.
+
+  actions:
+    desc: Slot para ações (botões por exemplo).
+
+events:
+  '@update:model-value -> function (value)':
+    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
+    params:
+      value:
+        desc: Novo valor do v-model
+        type: Boolean
+
+  '@validate: -> function (value)':
+    desc: Dispara se a prop "useForm" for "true" e após um submit.
+    params:
+      value:
+        desc: Retorna se os campos passou ou não na validação
+        type: Boolean