@bildvitta/quasar-ui-asteroid 2.17.0 → 3.0.0-alpha.3

package/src/components/select-list/QasSelectList.yml

@@ -0,0 +1,116 @@
+type: component
+
+mixins:
+  - '@bildvitta/quasar-ui-asteroid/dist/api/QasSearchBox.json'
+
+meta:
+  desc: Componente para selecionar dentro de uma lista com pesquisa utilizando o `QasSearchBox`.
+
+props:
+  delete-only:
+    desc: Caso o "modelValue" tenha valor, ele remove tudo na lista que não esteja dentro do modelValue.
+    type: Boolean
+
+  fuse-options:
+    desc: Propriedade que será repassada para o "QasSearchBox".
+    default: "{ keys: ['label'] }"
+    type: Object
+
+  list:
+    desc: Lista que será feita a seleção e pesquisa.
+    default: []
+    type: Array
+
+  model-value:
+    desc: Model do componente, que será controlado tudo que foi selecionado.
+    default: []
+    type: Array
+    examples: [v-model="value"]
+    model: true
+
+  to:
+    desc: 'Configuração do vue-router para enviar no $route.push({ ...to, params: {...} }).'
+    default: Pesquisar
+    type: String
+
+  redirect-key:
+    desc: Controla qual propriedade será a chave primaria para fazer o redirecionamento.
+    default: uuid
+    type: String
+
+  param-key:
+    desc: Controla qual parâmetro será enviado para rota.
+    default: id
+    type: String
+
+slots:
+  item:
+    desc: Acesso dentro do "<q-item />.
+    scope:
+      item:
+        desc: Item atual da lista
+        type: Object
+
+      add:
+        desc: Função para adicionar um item ao model
+        type: Function
+
+      handleClick:
+        desc: Função que controla o model adiciona ou remove do model
+        type: Function
+
+      remove:
+        desc: Função para remover um item do model
+        type: Function
+
+      updateModel:
+        desc: Função para atualizar o v-model
+        type: Function
+
+  item-action:
+    desc: Acesso dentro do "<q-item-section avatar />".
+    scope:
+      item:
+        desc: Item atual da lista
+        type: Object
+
+      add:
+        desc: Função para adicionar um item ao model
+        type: Function
+
+      handleClick:
+        desc: Função que controla o model adiciona ou remove do model
+        type: Function
+
+      remove:
+        desc: Função para remover um item do model
+        type: Function
+
+      updateModel:
+        desc: Função para atualizar o v-model
+        type: Function
+
+events:
+  '@added -> function(item)':
+    desc: Dispara toda vez que um item é adicionado no v-model.
+    params:
+      item:
+        desc: Item adicionado
+        type: String
+
+  '@removed -> function (item, index)':
+    desc: Dispara toda vez que um item é removido do v-model.
+    params:
+      item:
+        desc: Valor removido.
+        type: String
+      index:
+        desc: Index do item removido.
+        type: Number
+
+  '@update:model-value -> function (value)':
+    desc: Dispara toda vez que o campo de busca é alterado, também utilizado para v-model.
+    params:
+      value:
+        desc: Novo valor do v-model
+        type: String

package/src/components/signature-pad/QasSignaturePad.vue

@@ -1,25 +1,31 @@
 <template>
   <div ref="signatureContainer" class="qas-signature-pad relative-position">
     <canvas :id="canvasId" :ref="$attrs.ref" class="qas-signature-pad__canvas rounded-borders vertical-bottom" :height="height" />
-    <q-btn v-if="!isEmpty" class="absolute q-mb-sm q-mr-sm qas-signature-pad__clear" color="primary" dense icon="o_delete" round @click="clearSignature" />
+    <qas-btn v-if="!empty" class="absolute-bottom-right q-mb-sm q-mr-sm" color="primary" dense icon="o_delete" round @click="clearSignature" />
+  </div>
+
+  <div>
+    <slot :clear-signature="clearSignature" :get-signature-data="getSignatureData" />
   </div>
 </template>
 
 <script>
-import SignaturePad from 'signature_pad'
 import { uid } from 'quasar'
-import { isEqual } from 'lodash'
+import { isEqual } from 'lodash-es'
+import SignaturePad from 'signature_pad'
 
+import QasBtn from '../btn/QasBtn.vue'
 export default {
-  props: {
-    options: {
-      default: () => ({}),
-      type: Object
-    },
+  name: 'QasSignaturePad',
 
-    type: {
-      default: 'image/png',
-      type: String
+  components: {
+    QasBtn
+  },
+
+  props: {
+    empty: {
+      type: Boolean,
+      default: true
     },
 
     height: {
@@ -27,62 +33,81 @@ export default {
       type: String
     },
 
-    isEmpty: {
-      type: Boolean,
-      default: true
+    signatureOptions: {
+      default: () => ({}),
+      type: Object
+    },
+
+    type: {
+      default: 'image/png',
+      type: String
     }
   },
 
+  emits: ['update:empty'],
+
+  expose: ['clearSignature', 'getSignatureData'],
+
   data () {
     return {
+      canvasId: uid(),
+      hasEndStrokeEvent: false,
       signaturePad: null,
-      canvasId: uid()
+      SignaturePad: null
     }
   },
 
   watch: {
-    options (newValue, oldValue) {
+    async signatureOptions (newValue, oldValue) {
       if (isEqual(newValue, oldValue)) return
 
-      this.setupSignaturePad()
-      this.isEmptyEmitter()
+      await this.setupSignaturePad()
+      this.updateEmptyModel()
     }
   },
 
-  destroyed () {
-    window.removeEventListener('resize', this.setCanvasWidth)
-  },
-
   mounted () {
     window.addEventListener('resize', this.setCanvasWidth)
     this.setCanvasWidth()
+
     this.setupSignaturePad()
   },
 
-  methods: {
-    setupSignaturePad () {
-      this.signaturePad = new SignaturePad(document.getElementById(this.canvasId), this.options)
-      this.signaturePad.onEnd = this.isEmptyEmitter
-      this.clearSignature()
-    },
-
-    saveSignature () {
-      return this.signaturePad.toDataURL(this.type)
-    },
+  unmounted () {
+    window.removeEventListener('resize', this.setCanvasWidth)
+    this.signaturePad.off()
+  },
 
+  methods: {
     clearSignature () {
       this.signaturePad.clear()
-      this.isEmptyEmitter()
+      this.updateEmptyModel()
     },
 
-    isEmptyEmitter () {
-      this.$emit('update:isEmpty', this.signaturePad.isEmpty())
+    getSignatureData () {
+      return this.signaturePad.toDataURL(this.type)
     },
 
     setCanvasWidth () {
       const signatureContainer = this.$refs.signatureContainer
       const canvasElement = signatureContainer.querySelector('canvas')
       canvasElement.setAttribute('width', signatureContainer.offsetWidth)
+    },
+
+    setupSignaturePad () {
+      const canvasElement = document.getElementById(this.canvasId)
+      this.signaturePad = new SignaturePad(canvasElement, this.signatureOptions)
+
+      if (!this.hasEndStrokeEvent) {
+        this.signaturePad.addEventListener('endStroke', this.updateEmptyModel)
+      }
+
+      this.hasEndStrokeEvent = true
+      this.clearSignature()
+    },
+
+    updateEmptyModel () {
+      this.$emit('update:empty', this.signaturePad.isEmpty())
     }
   }
 }
@@ -90,11 +115,6 @@ export default {
 
 <style lang="scss">
 .qas-signature-pad {
-  &__clear {
-    bottom: 0;
-    right: 0;
-  }
-
   &__canvas {
     border: 1px solid $grey-3;
   }

package/src/components/signature-pad/QasSignaturePad.yml

@@ -0,0 +1,53 @@
+type: component
+
+meta:
+  desc: Componente para assinatura que gera uma imagem.
+
+props:
+  empty:
+    desc: Model que retorna se a tela está vazio ou não.
+    default: true
+    type: Boolean
+    model: true
+
+  height:
+    desc: Altura da área da assinatura.
+    default: {}
+    type: Object
+
+  signature_options:
+    desc: Opções da biblioteca signature_pad (https://github.com/szimek/signature_pad#options).
+    default: {}
+    type: Object
+
+  type:
+    desc: Tipo da imagem gerada.
+    default: image/png
+    type: String
+
+slots:
+  default:
+    desc: Usado para conseguir recuperar as função internas do componente.
+    scope:
+      'clearSignature () => undefined':
+        desc: Limpa a assinatura.
+        type: Function
+
+      'getSignatureData () => String':
+        desc: 'Obtém a assinatura em formato de imagem com "tipo" de acordo com o que foi passado para o componente (ex: "image/png"). Utiliza o HTMLCanvasElement.toDataURL()'
+        type: Function
+
+events:
+  '@update:empty -> function(value)':
+    desc: Dispara toda vez que para de desenhar na tela, usado para v-model:empty.
+    params:
+      value:
+        desc: Novo valor do model.
+        type: Boolean
+
+methods:
+  'clearSignature () => undefined':
+    desc: Limpa a assinatura.
+
+  'getSignatureData () => String':
+    desc: 'Obtém a assinatura em formato de imagem com "tipo" de acordo com o que foi passado para o componente (ex: "image/png"). Utiliza o HTMLCanvasElement.toDataURL()'

package/src/components/signature-uploader/QasSignatureUploader.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <qas-uploader ref="uploader" v-model="uploader" :label="uploadLabel" :readonly="readonly" v-bind="$attrs" :use-resize="false">
+    <qas-uploader ref="uploader" v-model="model" :label="uploadLabel" :readonly="readonly" :use-resize="false" v-bind="$attrs">
       <template #header="{ scope }">
-        <div class="cursor-pointer flex flex-center full-width justify-between no-border no-wrap q-gutter-xs text-white transparent" :class="headerClasses" @click="openDialog">
+        <div class="cursor-pointer flex flex-center full-width justify-between no-border no-wrap q-gutter-xs text-white transparent" :class="headerClass" @click="openDialog">
           <div class="col column items-start justify-center">
-            <div v-if="scope.label" class="q-uploader__title">{{ scope.label }}</div>
+            <div v-if="uploadLabel" class="q-uploader__title">{{ uploadLabel }}</div>
           </div>
 
           <q-btn v-if="!readonly" dense flat icon="o_add" round @click="openDialog" />
@@ -21,11 +21,11 @@
       </template>
 
       <template #description>
-        <qas-signature-pad ref="signaturePadModal" height="250" :is-empty.sync="isEmpty" />
+        <qas-signature-pad ref="signaturePadModal" v-model:empty="isEmpty" height="250" />
       </template>
 
       <template #actions>
-        <q-btn class="full-width" color="primary" :disable="isEmpty" label="Salvar" no-caps @click="saveSignature" />
+        <q-btn class="full-width" color="primary" :disable="isEmpty" label="Salvar" no-caps @click="getSignatureData" />
         <q-btn class="full-width q-mt-sm" color="primary" flat label="Cancelar" no-caps @click="closeSignature" />
       </template>
     </qas-dialog>
@@ -40,6 +40,8 @@ import { base64ToBlob } from '../../helpers'
 import { NotifyError } from '../../plugins'
 
 export default {
+  name: 'QasSignatureUploader',
+
   components: {
     QasDialog,
     QasUploader,
@@ -48,7 +50,7 @@ export default {
 
   props: {
     uploadLabel: {
-      default: 'Assinatura digital',
+      default: '',
       type: String
     },
 
@@ -57,7 +59,7 @@ export default {
       type: String
     },
 
-    value: {
+    modelValue: {
       default: '',
       type: String
     },
@@ -72,6 +74,8 @@ export default {
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       isOpenedDialog: false,
@@ -81,24 +85,22 @@ export default {
   },
 
   computed: {
-    uploader: {
+    model: {
       get () {
-        return this.value
+        return this.modelValue
       },
 
       set (value) {
-        this.$emit('input', value)
+        this.$emit('update:modelValue', value)
       }
     },
 
-    headerClasses () {
+    headerClass () {
       return `q-pa-${this.readonly ? 'md' : 'sm'}`
     }
   },
 
   methods: {
-    base64ToBlob,
-
     NotifyError,
 
     openDialog () {
@@ -107,9 +109,9 @@ export default {
       this.isOpenedDialog = true
     },
 
-    saveSignature () {
+    getSignatureData () {
       this.$refs.buttonCleanFiles.$el.click()
-      this.base64 = this.$refs.signaturePadModal.saveSignature()
+      this.base64 = this.$refs.signaturePadModal.getSignatureData()
       this.$refs.forceUpload.$el.click()
       this.closeSignature()
     },
@@ -120,7 +122,7 @@ export default {
 
     removeSignature () {
       this.$refs.buttonCleanFiles.$el.click()
-      this.$emit('input')
+      this.$emit('update:modelValue')
     },
 
     upload (scope) {
@@ -131,7 +133,7 @@ export default {
         const file = new File([blob], `${fileName}.${extension}`, { type: this.type })
 
         scope.addFiles([file])
-      } catch (error) {
+      } catch {
         NotifyError('Ops! Erro ao enviar sua assinatura.')
       }
     }

package/src/components/signature-uploader/QasSignatureUploader.yml

@@ -0,0 +1,36 @@
+type: component
+
+meta:
+desc: Componente que implementa o "QasUploader" e "QasSignaturePad" para fazer upload de assinatura.
+
+props:
+  upload-label:
+    desc: Rótulo do uploader.
+    type: String
+
+  signature-label:
+    desc: Rótulo do componente de assinatura.
+    default: {}
+    type: Object
+
+  model-value:
+    desc: Model do componente, retorna url da imagem upada, usando para v-model.
+    type: String
+
+  type:
+    desc: Tipo da imagem gerada.
+    default: image/png
+    type: String
+
+  readonly:
+    desc: Controla se o componente vai ser apenas para visualização ou pode também fazer upload.
+    default: image/png
+    type: String
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara toda vez que o acontece um novo upload, usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        type: String

package/src/components/single-view/QasSingleView.vue

@@ -1,23 +1,23 @@
 <template>
-  <component :is="componentTag">
-    <header v-if="hasHeaderSlot">
-      <slot :errors="errors" :fields="fields" :metadata="metadata" name="header" :result="result" />
+  <component :is="mx_componentTag" :class="mx_componentClass">
+    <header v-if="mx_hasHeaderSlot">
+      <slot name="header" />
     </header>
 
     <template v-if="hasResult">
-      <slot :errors="errors" :fields="fields" :metadata="metadata" :result="result" />
+      <slot />
     </template>
 
-    <div v-else-if="!isFetching" class="q-my-xl text-center">
+    <div v-else-if="!mx_isFetching" 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>
     </div>
 
-    <footer v-if="hasFooterSlot">
+    <footer v-if="mx_hasFooterSlot">
       <slot name="footer" />
     </footer>
 
-    <q-inner-loading :showing="isFetching">
+    <q-inner-loading :showing="mx_isFetching">
       <q-spinner color="grey" size="3em" />
     </q-inner-loading>
   </component>
@@ -25,8 +25,11 @@
 
 <script>
 import viewMixin from '../../mixins/view'
+import { markRaw } from 'vue'
 
 export default {
+  name: 'QasSingleView',
+
   mixins: [viewMixin],
 
   props: {
@@ -35,33 +38,39 @@ export default {
       type: [Number, String]
     },
 
-    value: {
+    result: {
       default: () => ({}),
       type: Object
     }
   },
 
+  emits: [
+    'update:result',
+    'fetch-success',
+    'fetch-error'
+  ],
+
   computed: {
     hasResult () {
-      return !!this.result
+      return !!this.resultModel
     },
 
     id () {
       return this.customId || this.$route.params.id
     },
 
-    result () {
+    resultModel () {
       return this.$store.getters[`${this.entity}/byId`](this.id) || {}
     }
   },
 
   watch: {
-    $route () {
-      this.fetchSingle()
+    $route (to, from) {
+      to.name === from.name && this.fetchSingle()
     },
 
-    result (value) {
-      this.$emit('input', value)
+    resultModel (value) {
+      this.$emit('update:result', markRaw({ ...value }))
     }
   },
 
@@ -70,23 +79,33 @@ export default {
   },
 
   methods: {
-    async fetchSingle () {
-      this.isFetching = true
+    async fetchSingle (params = {}) {
+      this.mx_isFetching = true
 
       try {
-        const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, { id: this.id, url: this.url })
+        const response = await this.$store.dispatch(
+          `${this.entity}/fetchSingle`,
+          { id: this.id, url: this.url, params }
+        )
+
         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: this.mx_errors,
+          fields: this.mx_fields,
+          metadata: this.mx_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
       }
     }
   }