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

package/src/components/uploader/QasUploader.vue

@@ -1,24 +1,25 @@
 <template>
-  <q-field borderless :error="hasErrorMessage" :error-message="errorMessage" :hint="hintValue" no-error-icon>
-    <qas-custom-uploader v-bind="attributes" ref="uploader" auto-upload bordered :class="uploaderClasses" :factory="factory" flat :max-files="maxFiles" method="PUT" :readonly="readonly" v-on="$listeners" @factory-failed="factoryFailed" @uploaded="uploaded">
+  <q-field borderless class="qas-uploader" :error="hasErrorMessage" :error-message="errorMessage" :hint="hintValue" no-error-icon>
+    <q-uploader ref="uploader" auto-upload bordered :class="uploaderClasses" :factory="factory" flat :max-files="maxFiles" method="PUT" :readonly="readonly" v-bind="attributes" @factory-failed="factoryFailed" @uploaded="uploaded" @uploading="updateUploading(true)">
       <template #header="scope">
         <slot name="header" :scope="scope">
           <div class="flex flex-center full-width justify-between no-border no-wrap q-gutter-xs q-pa-sm text-white transparent">
             <q-spinner v-if="scope.isUploading" size="24px" />
 
             <div class="col column items-start justify-center">
-              <div v-if="scope.label" class="q-uploader__title">{{ scope.label }}</div>
-              <div v-if="scope.files.length" class="q-uploader__subtitle">{{ scope.uploadProgressLabel }} ({{ scope.uploadSizeLabel }})</div>
+              <div v-if="$attrs.label" class="q-uploader__title">{{ $attrs.label }}</div>
+              <div v-if="scope.files.length" class="q-uploader__subtitle">
+                {{ scope.uploadProgressLabel }} ({{ scope.uploadSizeLabel }})
+              </div>
             </div>
 
-            <q-btn v-if="showAddFile" ref="buttonUpload" dense flat icon="o_add" round />
-
-            <q-uploader-add-trigger v-if="showAddFile" ref="uploaderTrigger" />
+            <qas-btn v-if="showAddFile" ref="buttonUpload" color="white" dense flat icon="o_add" round @click="$refs.hiddenInput.click()" />
 
-            <q-btn ref="buttonCleanFiles" class="hidden" @click="scope.removeUploadedFiles" />
+            <input ref="hiddenInput" class="qas-uploader__input" :multiple="isMultiple" type="file">
 
-            <q-btn v-if="scope.canUpload" dense flat icon="o_cloud_upload" round @click="scope.upload" />
-            <q-btn v-if="scope.isUploading" dense flat icon="o_clear" round @click="scope.abort" />
+            <qas-btn ref="buttonCleanFiles" class="hidden" color="white" @click="scope.removeUploadedFiles" />
+            <qas-btn v-if="scope.canUpload" color="white" dense flat icon="o_cloud_upload" round @click="scope.upload" />
+            <qas-btn v-if="scope.isUploading" color="white" dense flat icon="o_clear" round @click="scope.abort" />
           </div>
         </slot>
       </template>
@@ -26,24 +27,24 @@
       <template #list="scope">
         <slot name="list" :scope="scope">
           <div class="col-12 q-col-gutter-md row">
-            <div v-for="(file, index) in filesList(scope.files, scope)" :key="index" class="row" :class="itemClass">
-              <qas-avatar class="q-mr-sm" color="grey-3" icon="o_attach_file" :image="file.image" rounded :text-color="colorFileIcon(file)" />
+            <div v-for="(file, index) in getFilesList(scope.files, scope)" :key="index" class="row" :class="itemClass">
+              <qas-avatar class="q-mr-sm" color="grey-3" icon="o_attach_file" :image="file.image" rounded :text-color="getColorFileIcon(file)" />
 
               <div class="col items-center no-wrap row">
                 <div class="column no-wrap" :class="{ col: isMultiple }">
-                  <div class="ellipsis" :class="fileNameClass(file.isFailed)">{{ file.name }}</div>
+                  <div class="ellipsis" :class="getFileNameClass(file.isFailed)">{{ file.name }}</div>
                   <div v-if="file.isUploaded" class="text-caption">{{ file.progressLabel }} ({{ file.sizeLabel }})</div>
                 </div>
                 <div class="items-center q-ml-sm row">
                   <q-icon v-if="file.isFailed" color="negative" name="o_warning" size="20px" />
-                  <q-btn v-if="!scope.readonly" dense flat icon="o_delete" round @click="removeItem(index, scope, file)" />
+                  <qas-btn v-if="!scope.readonly" dense flat icon="o_delete" round @click="removeItem(index, scope, file)" />
                 </div>
               </div>
             </div>
           </div>
         </slot>
       </template>
-    </qas-custom-uploader>
+    </q-uploader>
 
     <slot :context="self" name="custom-upload" />
 
@@ -54,24 +55,37 @@
 </template>
 
 <script>
-import QasAvatar from '../avatar/QasAvatar'
-import QasCustomUploader from '../uploader/QasCustomUploader'
-import api from 'axios'
+import QasAvatar from '../avatar/QasAvatar.vue'
+
 import { uid, extend } from 'quasar'
 import { NotifyError } from '../../plugins'
-import uploaderMixin from '../../mixins/uploader'
+import { getImageSize, getResizeDimensions } from '../../helpers/images'
+
+import Pica from 'pica'
+import api from 'axios'
 
 export default {
   name: 'QasUploader',
 
   components: {
-    QasAvatar,
-    QasCustomUploader
+    QasAvatar
   },
 
-  mixins: [uploaderMixin],
+  inheritAttrs: false,
 
   props: {
+    acceptResizeTypes: {
+      default: () => [
+        'image/jpeg',
+        'image/png',
+        'image/gif',
+        'image/bmp',
+        'image/webp',
+        'image/jpg'
+      ],
+      type: Array
+    },
+
     entity: {
       required: true,
       type: String
@@ -92,20 +106,43 @@ export default {
       type: Number
     },
 
+    picaResizeOptions: {
+      default: () => ({}),
+      type: Object
+    },
+
+    sizeLimit: {
+      default: 1280,
+      type: Number
+    },
+
+    useResize: {
+      default: true,
+      type: Boolean
+    },
+
     readonly: {
       type: Boolean
     },
 
-    value: {
+    modelValue: {
       default: '',
       type: [Array, String]
+    },
+
+    uploading: {
+      type: Boolean
     }
   },
 
+  emits: ['update:modelValue', 'update:uploading'],
+
   data () {
     return {
       isFetching: false,
-      isUploading: false
+      isUploading: false,
+      hiddenInputElement: null,
+      uploader: null
     }
   },
 
@@ -121,7 +158,7 @@ export default {
     showAddFile () {
       if (this.readonly) return
 
-      return this.maxFiles ? this.value.length < this.maxFiles : true
+      return this.maxFiles ? this.modelValue.length < this.maxFiles : true
     },
 
     isMultiple () {
@@ -129,7 +166,7 @@ export default {
     },
 
     hasCustomUpload () {
-      return this.$slots['custom-upload'] || this.$scopedSlots['custom-upload']
+      return this.$slots['custom-upload']
     },
 
     itemClass () {
@@ -141,7 +178,7 @@ export default {
     },
 
     hasHeaderSlot () {
-      return this.$slots.header || this.$scopedSlots.header
+      return this.$slots.header
     },
 
     hasErrorMessage () {
@@ -153,19 +190,37 @@ export default {
         ...this.$attrs,
         ...this.$props
       }
+    },
+
+    defaultPicaResizeOptions () {
+      return {
+        unsharpAmount: 160,
+        unsharpRadius: 0.6,
+        unsharpThreshold: 1,
+        ...this.picaResizeOptions
+      }
     }
   },
 
-  methods: {
-    NotifyError,
+  mounted () {
+    this.hiddenInputElement = this.$refs.hiddenInput
+    this.uploader = this.$refs.uploader
+
+    this.hiddenInputElement?.addEventListener?.('change', this.addFiles)
+  },
 
+  unmounted () {
+    this.hiddenInputElement?.removeEventListener?.('change', this.addFiles)
+  },
+
+  methods: {
     async factory ([file]) {
       if (!this.isMultiple && !this.hasHeaderSlot) {
         this.$refs.buttonCleanFiles.$el.click()
       }
 
       const name = `${uid()}.${file.name.split('.').pop()}`
-      const { endpoint } = await this.fetch(name)
+      const { endpoint } = await this.fetchCredentials(name)
 
       return {
         headers: [
@@ -178,16 +233,27 @@ export default {
     },
 
     factoryFailed () {
+      this.updateUploading(false)
       NotifyError('Ops! Erro ao enviar o arquivo.')
     },
 
+    dispatchUpload () {
+      this.$refs.buttonCleanFiles.$el.click()
+      this.hiddenInputElement.click()
+    },
+
     uploaded (response) {
       const fullPath = response.xhr.responseURL.split('?').shift()
 
-      this.$emit('input', this.isMultiple ? [...this.value, fullPath] : fullPath || '')
+      this.$emit(
+        'update:modelValue',
+        this.isMultiple ? [...this.modelValue, fullPath] : fullPath || ''
+      )
+
+      this.updateUploading(false)
     },
 
-    async fetch (filename) {
+    async fetchCredentials (filename) {
       this.isFetching = true
 
       try {
@@ -209,26 +275,21 @@ export default {
       if (file.isFailed) return
 
       if (!this.isMultiple) {
-        return this.$emit('input')
+        return this.$emit('update:modelValue')
       }
 
-      const clonedValue = extend(true, [], this.value)
-      const numberIndex = this.value.findIndex(file => this.fileName(file) === index)
+      const clonedValue = extend(true, [], this.modelValue)
+      const numberIndex = this.modelValue.findIndex(file => this.getFileName(file) === index)
       clonedValue.splice(numberIndex, 1)
-      this.$emit('input', clonedValue)
-    },
-
-    dispatchUpload () {
-      this.$refs.buttonCleanFiles.$el.click()
-      this.$refs.uploaderTrigger.$el.click()
+      this.$emit('update:modelValue', clonedValue)
     },
 
-    fileName (value) {
+    getFileName (value) {
       return value.split('/').pop()
     },
 
-    filesList (uploadedFiles) {
-      const pathsList = Array.isArray(this.value) ? this.value : (this.value ? [this.value] : [])
+    getFilesList (uploadedFiles) {
+      const pathsList = Array.isArray(this.modelValue) ? this.modelValue : (this.modelValue ? [this.modelValue] : [])
 
       uploadedFiles = uploadedFiles.map((file, indexToDelete) => {
         return {
@@ -253,13 +314,13 @@ export default {
         }
 
         if (typeof file === 'string') {
-          const fileName = this.fileName(file)
+          const fileName = this.getFileName(file)
           files[fileName] = { image: file, isUploaded: false, name: fileName }
           return
         }
 
         if (file.image) {
-          const fileName = this.fileName(file.image)
+          const fileName = this.getFileName(file.image)
           files[fileName] = file
         }
       })
@@ -267,7 +328,7 @@ export default {
       return files
     },
 
-    fileNameClass (isFailed) {
+    getFileNameClass (isFailed) {
       return isFailed ? 'text-negative' : 'text-grey-8'
     },
 
@@ -275,9 +336,69 @@ export default {
       return file.__status === 'failed'
     },
 
-    colorFileIcon (file) {
+    getColorFileIcon (file) {
       return this.isFailed(file) ? 'negative' : 'primary'
+    },
+
+    async addFiles () {
+      const filesList = Array.from(this.hiddenInputElement.files)
+      const processedFiles = []
+
+      filesList.forEach(file => processedFiles.push(this.resizeImage(file)))
+      this.uploader.addFiles(await Promise.all(processedFiles))
+    },
+
+    // Função para redimensionar imagens
+    async resizeImage (file) {
+      const { type } = file
+
+      if (!this.acceptResizeTypes.includes(type) || !this.useResize) return file
+
+      try {
+        const image = new Image()
+        const canvas = document.createElement('canvas')
+
+        image.src = URL.createObjectURL(file)
+
+        // Retorna largura e altura da original da imagem
+        const { width, height } = await getImageSize(image)
+
+        if (width <= this.sizeLimit) return file
+
+        // Retorna os novos tamanhos redimensionados
+        const resizedDimensions = getResizeDimensions(this.sizeLimit, width, height)
+
+        canvas.width = resizedDimensions.width
+        canvas.height = resizedDimensions.height
+
+        // Resolve problemas com cors
+        image.crossOrigin = ''
+
+        image.width = width
+        image.height = height
+
+        const pica = Pica()
+        const resizedImage = await pica.resize(image, canvas, this.defaultPicaResizeOptions)
+        const blob = await pica.toBlob(resizedImage, type, 0.90)
+
+        return new File([blob], file.name, { type })
+      } catch {
+        // Caso não consiga redimensionar retorna o arquivo original
+        return file
+      }
+    },
+
+    updateUploading (uploading) {
+      this.$emit('update:uploading', uploading)
     }
   }
 }
 </script>
+
+<style lang="scss">
+.qas-uploader {
+  &__input {
+    display: none;
+  }
+}
+</style>

package/src/components/uploader/QasUploader.yml

@@ -0,0 +1,117 @@
+type: component
+
+mixins:
+  - quasar/dist/api/QField.json
+  - quasar/dist/api/QUploader.json
+
+meta:
+  desc: Componente para upload com auto redimensionamento que implementa o "QField" e "QUploader".
+
+props:
+  accept-resize-types:
+    desc: Tipos de arquivos aceitos para fazer o redimensionamento antes de upar.
+    type: Array
+    debugger: true
+    default: [
+      'image/jpeg',
+      'image/png',
+      'image/gif',
+      'image/bmp',
+      'image/webp',
+      'image/jpg'
+    ]
+
+  entity:
+    desc: Entidade enviada para a API do `/upload-credentials/`.
+    required: true
+    type: String
+
+  error-message:
+    desc: Mensagem de erro.
+    type: String
+
+  hint:
+    desc: Mensagem de dica que aparece embaixo do campo.
+    type: String
+
+  max-files:
+    desc: Quantidade maxima de arquivos no upload.
+    default: undefined
+    type: Number
+
+  pica-resize-options:
+    desc: Opções para a biblioteca "pica" que é responsável por fazer o redimensionamento antes do upload (https://github.com/nodeca/pica).
+    type: Object
+    debugger: true
+    default:
+      unsharpAmount: 160
+      unsharpRadius: 0.6
+      unsharpThreshold: 1
+
+  size-limit:
+    desc: Se o tamanho da imagem for menor ou igual ao passado nesta prop, não será feito um redimensionamento.
+    default: 1280
+    type: Number
+
+  use-resize:
+    desc: Controla se o componente vai fazer o redimensionamento antes de upar as imagens.
+    default: true
+    type: Number
+
+  readonly:
+    desc: O componente não faz mais upload, apenas exibe.
+    default: true
+    type: Number
+
+  model-value:
+    desc: Model do componente, caso seja múltiplo, retorna um array de string, senão somente uma string.
+    default: true
+    type: [Array, String]
+    examples: [v-model="value"]
+    model: true
+
+  uploading:
+    desc: Model que retorna se o componente está fazendo algum upload.
+    type: Boolean
+    examples: [v-model:uploading="isUploading"]
+    model: true
+
+slots:
+  header:
+    desc: Acesso ao header do <q-uploader />.
+    scope:
+      scope:
+        desc: Payload repassado pelo QUploader.
+        default: {}
+        type: Object
+
+  list:
+    desc: Acesso ao conteúdo onde fica a listagem de arquivos.
+    scope:
+      scope:
+        desc: Payload repassado pelo QUploader.
+        default: {}
+        type: Object
+
+  custom-upload:
+    desc: Acesso ao conteúdo onde fica a listagem de arquivos.
+    scope:
+      context:
+        desc: Repassa todo o payload do próprio componente `QasUploader` como computada, data, props, methods, etc.
+        default: {}
+        type: Object
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        type: [Array, String]
+
+  '@update:uploading -> function(value)':
+    desc: Dispara começa e termina um upload.
+    params:
+      value:
+        desc: Retorna se está ou não fazendo um upload.
+        type: Boolean

package/src/css/background.scss

@@ -1,4 +1,4 @@
-// Reapeat
+// Repeat
 .bg-no-repeat {
   background-repeat: no-repeat !important;
 }

package/src/css/border.scss

@@ -5,17 +5,18 @@
   }
 }
 
-@mixin setBorderColor($name, $color) {
+@mixin set-border-color($name, $color) {
   .border-#{$name} {
-    @extend %border-color;
     border: 0 solid $color !important;
+
+    @extend %border-color;
   }
 }
 
-@include setBorderColor(primary, $primary);
-@include setBorderColor(primary-contrast, $primary-contrast);
-@include setBorderColor(secondary, $secondary);
-@include setBorderColor(secondary-contrast, $secondary-contrast);
+@include set-border-color(primary, $primary);
+@include set-border-color(primary-contrast, $primary-contrast);
+@include set-border-color(secondary, $secondary);
+@include set-border-color(secondary-contrast, $secondary-contrast);
 
 // Direction
 .border-top {

package/src/css/design-system.scss

@@ -2,34 +2,6 @@ body {
   background-color: $background-color;
 }
 
-// Layout
-// .q-layout {
-//   > .q-header::before,
-//   > .q-drawer-container .q-drawer__content::before {
-//     content: '';
-//     height: 100%;
-//     left: 0;
-//     position: absolute;
-//     width: 100%;
-//   }
-
-//   // Header
-//   > .q-header::before {
-//     background: linear-gradient(to right, rgba(black, 0.7), rgba(black, 0.1));
-//   }
-
-//   // Menu
-//   > .q-drawer-container .q-drawer__content {
-//     background-color: $primary;
-//     color: white;
-//     position: relative;
-
-//     &::before {
-//       background: linear-gradient(to right, rgba(black, 0.85), rgba(black, 0.4));
-//     }
-//   }
-// }
-
 // Fields
 .q-field--outlined .q-field__inner {
   background-color: white;
@@ -44,18 +16,3 @@ body {
 .q-tabs__arrow {
   color: $primary;
 }
-
-// Scrollbar
-::-webkit-scrollbar {
-  height: 7px;
-  width: 7px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: $primary;
-  border-radius: $generic-border-radius;
-}
-
-::-webkit-scrollbar-track {
-  background-color: $primary-contrast;
-}