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

package/src/components/transfer/QasTransfer.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="qas-transfer row" :class="gutterClass">
+    <div class="col-12" />
     <div class="col-12 col-sm">
       <qas-label :label="label" :quantity="optionsList.length" />
 
       <qas-search-box form-mode :list="optionsList" v-bind="searchBoxProps">
         <template #default="{ results }">
           <q-list separator>
-            <q-item v-for="(item, index) in results" :key="index" :class="itemClass(item, true)" clickable @click="onSelectQueue(item, true)">
+            <q-item v-for="(item, index) in results" :key="index" :class="getItemClass(item, true)" clickable @click="onSelectQueue(item, true)">
               <slot name="item-first-column">
-                <q-item-section>{{ item[labelKey] }}</q-item-section>
+                <q-item-section>{{ getItemLabel(item) }}</q-item-section>
               </slot>
             </q-item>
           </q-list>
@@ -18,10 +19,8 @@
 
     <div class="col-12 col-sm-auto items-center justify-center q-col-gutter-md row" :class="actionsClass">
       <div>
-        <div>
-          <qas-btn :class="iconClass" dense :disabled="!firstQueue.length" flat icon="o_arrow_circle_down" rounded @click="setSelectedFromClick(true)" />
-          <q-tooltip anchor="top middle" self="center middle">Selecionar</q-tooltip>
-        </div>
+        <qas-btn :class="iconClass" dense :disabled="!firstQueue.length" flat icon="o_arrow_circle_down" rounded @click="setSelectedFromClick(true)" />
+        <q-tooltip anchor="top middle" self="center middle">Selecionar</q-tooltip>
       </div>
       <div>
         <div>
@@ -34,12 +33,12 @@
     <div class="col-12 col-sm">
       <qas-label label="Selecionadas" :quantity="selectedList.length" />
 
-      <qas-search-box v-bind="searchBoxProps" empty-list-height="300px" form-mode label="Selecionadas" :list="selectedList" :quantity="selectedList.length">
+      <qas-search-box v-bind="searchBoxProps" empty-list-height="300px" form-mode label="Selecionadas" :list="selectedList">
         <template #default="{ results }">
           <q-list separator>
-            <q-item v-for="(item, index) in results" :key="index" :class="itemClass(item)" clickable @click="onSelectQueue(item)">
+            <q-item v-for="(item, index) in results" :key="index" :class="getItemClass(item)" clickable @click="onSelectQueue(item)">
               <slot name="item-second-column">
-                <q-item-section>{{ item[labelKey] }}</q-item-section>
+                <q-item-section>{{ getItemLabel(item) }}</q-item-section>
               </slot>
             </q-item>
           </q-list>
@@ -50,19 +49,24 @@
 </template>
 
 <script>
+import { screenMixin } from '../../mixins'
 import { extend } from 'quasar'
 
-import QasBtn from '../btn/QasBtn'
-import QasLabel from '../label/QasLabel'
-import QasSearchBox from '../search-box/QasSearchBox'
+import QasBtn from '../btn/QasBtn.vue'
+import QasLabel from '../label/QasLabel.vue'
+import QasSearchBox from '../search-box/QasSearchBox.vue'
 
 export default {
+  name: 'QasTransfer',
+
   components: {
     QasBtn,
     QasLabel,
     QasSearchBox
   },
 
+  mixins: [screenMixin],
+
   props: {
     emitValue: {
       type: Boolean
@@ -73,12 +77,6 @@ export default {
       type: Object
     },
 
-    hideEmptySlot: {
-      default: true,
-      type: Boolean
-    },
-
-    // TODO: Criar o "toLabel" para o slugar de selecionados.
     label: {
       default: '',
       required: true,
@@ -90,22 +88,29 @@ export default {
       type: String
     },
 
-    options: {
+    modelValue: {
       default: () => [],
       type: Array
     },
 
-    value: {
+    options: {
       default: () => [],
       type: Array
     },
 
+    useEmptySlot: {
+      default: true,
+      type: Boolean
+    },
+
     valueKey: {
       default: 'value',
       type: String
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       firstQueue: [],
@@ -117,50 +122,46 @@ export default {
 
   computed: {
     actionsClass () {
-      return !this.isSmall && 'column'
+      return !this.mx_isSmall && 'column'
     },
 
     gutterClass () {
-      return `q-col-gutter-${this.isMedium ? 'md' : 'xl'}`
+      return `q-col-gutter-${this.mx_untilLarge ? 'md' : 'xl'}`
     },
 
     iconClass () {
-      return !this.isSmall && 'qas-transfer__icon'
-    },
-
-    isMedium () {
-      return this.$q.screen.lt.md
-    },
-
-    // TODO: Small seria se fosse sm.
-    isSmall () {
-      return this.$q.screen.xs
+      return !this.mx_isSmall && 'qas-transfer__icon'
     },
 
     searchBoxProps () {
       return {
         fuseOptions: this.fuseOptions,
-        hideEmptySlot: this.hideEmptySlot,
-        list: this.options
+        useEmptySlot: this.useEmptySlot
       }
     }
   },
 
   watch: {
-    options: {
-      handler (value) {
-        this.optionsList = extend(true, [], value)
+    modelValue: {
+      handler () {
+        this.setSelectedFromValue(true)
       },
 
       immediate: true
     },
 
-    value: {
-      handler (value, oldValue) {
-        this.setSelectedFromValue(true)
+    options: {
+      handler (value) {
+        this.optionsList = extend(true, [], value)
       },
 
       immediate: true
+    },
+
+    selectedList: {
+      handler () {
+        this.updateModelValue()
+      }
     }
   },
 
@@ -178,7 +179,18 @@ export default {
       })
     },
 
-    handleEmit () {
+    getItemClass (object, isFirst) {
+      return this[isFirst
+        ? 'firstQueue'
+        : 'secondQueue'
+      ].some(item => item[this.valueKey] === object[this.valueKey]) && 'bg-secondary'
+    },
+
+    getItemLabel (item) {
+      return item?.[this.labelKey]
+    },
+
+    getModelValue () {
       const selectedList = extend(true, [], this.selectedList)
       return this.emitValue ? selectedList.map(item => item[this.valueKey]) : selectedList
     },
@@ -191,27 +203,19 @@ export default {
       this[model] = []
     },
 
-    itemClass (object, isFirst) {
-      return this[isFirst
-        ? 'firstQueue'
-        : 'secondQueue'
-      ].some(item => item[this.valueKey] === object[this.valueKey]) && 'bg-secondary'
-    },
-
     onSelectQueue (item, isFirst) {
       const model = isFirst ? 'firstQueue' : 'secondQueue'
       const index = this[model].findIndex(selected => selected[this.valueKey] === item[this.valueKey])
 
-      return ~index ? this[model].splice(index, 1) : this[model].push(item)
+      ~index ? this[model].splice(index, 1) : this[model].push(item)
     },
 
     setSelectedFromClick (isFirst) {
       this.handleSelectedList(isFirst)
-      this.updateValue()
     },
 
     setSelectedFromValue (isFirst) {
-      this.value.forEach(item => {
+      this.modelValue.forEach(item => {
         const selected = this.optionsList.find(option => {
           return option[this.valueKey] === (this.emitValue ? item : item[this.valueKey])
         })
@@ -224,8 +228,8 @@ export default {
       this.handleSelectedList(isFirst)
     },
 
-    updateValue () {
-      return this.$emit('input', this.handleEmit())
+    updateModelValue () {
+      return this.$emit('update:modelValue', this.getModelValue())
     }
   }
 }

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.hidenInput.click()" />
 
-            <q-btn ref="buttonCleanFiles" class="hidden" @click="scope.removeUploadedFiles" />
+            <input ref="hidenInput" 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,
+      hidenInputElement: 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.hidenInputElement = this.$refs.hidenInput
+    this.uploader = this.$refs.uploader
+
+    this.hidenInputElement?.addEventListener?.('change', this.addFiles)
+  },
 
+  unmounted () {
+    this.hidenInputElement?.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.hidenInputElement.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.hidenInputElement.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/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 {