@bildvitta/quasar-ui-asteroid 3.8.0-beta.0 → 3.8.0-beta.2

package/src/components/uploader/QasUploader.yml

@@ -8,6 +8,19 @@ meta:
   desc: Componente para upload com auto redimensionamento que implementa o "QField" e "QUploader".
 
 props:
+  'add-button-fn -> function (scope)':
+    desc: Callback para interceptar ação do botão de adicionar arquivos, caso passe uma função para essa prop, é desabilitado o a ação de abrir o seletor de arquivos e é necessário fazer o controle manual.
+    type: Function
+    params:
+      scope:
+        desc: Retorna o valor de referencia do QUploader.
+        type: Object
+
+  add-button-label:
+    desc: Label do botão de adicionar arquivo(s).
+    default: Adicionar
+    type: String
+
   accept-resize-types:
     desc: Tipos de arquivos aceitos para fazer o redimensionamento antes de upar.
     type: Array
@@ -20,18 +33,58 @@ props:
       'image/webp',
       'image/jpg'
     ]
+  
+  columns:
+    desc: Seta as colunas (grid cols), valor default depende se o componente é múltiplo ou não.
+    default:
+      col: 12
+      sm: 6
+      md: 4
+      lg: 3
+    type: Object
+    examples: ['{ col: 12, sm: 6 }']
+
+  dialog-props:
+    desc: props repassadas para o componente QasDialog, que é utilizado quando os arquivos upados podem ser editados.
+    default: {}
+    type: Object
 
   entity:
     desc: Entidade enviada para a API do `/upload-credentials/`.
     required: true
     type: String
 
+  error:
+    desc: Habilita modo erro.
+    default: false
+    type: Boolean
+
   error-message:
     desc: Mensagem de erro.
     type: String
 
-  hint:
-    desc: Mensagem de dica que aparece embaixo do campo.
+  fields:
+    desc: Quando utilizar os mesmos campos no "QasGridGenerator" e "QasFormGenerator", utilize esta prop para não ter que repetir os fields.
+    default: {}
+    type: Object
+
+  form-generator-props:
+    desc: Propriedades repassadas para o componente "QasFormGenerator".
+    default: {}
+    type: Object
+
+  gallery-card-props:
+    desc: Propriedades repassadas para o componente "QasGalleryCard".
+    default: {}
+    type: Object
+
+  grid-generator-props:
+    desc: Propriedades repassadas para o componente "QasGridGenerator".
+    default: {}
+    type: Object
+
+  label:
+    desc: Label do componente, repassado para o componente "QasLabel".
     type: String
 
   max-files:
@@ -65,22 +118,27 @@ props:
     default: 1280
     type: Number
 
-  use-resize:
-    desc: Controla se o componente vai fazer o redimensionamento antes de upar as imagens.
-    default: true
-    type: Number
-
   uploading:
     desc: Model que retorna se o componente está fazendo algum upload.
     type: Boolean
     examples: [v-model:uploading="isUploading"]
     model: true
 
-  useObjectModel:
+  use-download:
+    desc: Habilita a opção de fazer download por arquivo.
+    default: true
+    type: Boolean
+
+  use-object-model:
     desc: Controla se a model retornará um array de objetos.
     type: Boolean
     model: true
 
+  use-resize:
+    desc: Controla se o componente vai fazer o redimensionamento antes de upar as imagens.
+    default: true
+    type: Boolean
+
 slots:
   header:
     desc: Acesso ao header do <q-uploader />.
@@ -94,16 +152,14 @@ slots:
     desc: Acesso ao conteúdo onde fica a listagem de arquivos.
     scope:
       scope:
-        desc: Payload repassado pelo QUploader.
-        default: {}
+        desc: Retorna o valor de referencia do QUploader.
         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: {}
+        desc: Retorna o valor de referencia do QasUploader.
         type: Object
 
 events:

package/src/components/uploader/private/PvUploaderGalleryCard.vue

@@ -0,0 +1,332 @@
+<template>
+  <div>
+    <qas-gallery-card v-bind="defaultGalleryCardProps">
+      <!-- este template é para quando existe um erro carregar uma imagem de um arquivo como PDF, DOCX. -->
+      <template #image-error>
+        <div class="text-uppercase" :class="errorClasses">
+          {{ fileType }}
+        </div>
+      </template>
+
+      <!-- este template é para quando existe um erro ao fazer um UPLOAD! -->
+      <template v-if="hasError" #image>
+        <div :class="errorClasses">
+          <div class="q-pa-sm text-center">
+            <div>
+              <q-icon name="sym_r_cancel" size="sm" />
+            </div>
+
+            <div class="q-mt-sm">
+              Falha ao carregar arquivo.
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-if="hasGenerator" #bottom>
+        <div>
+          <qas-grid-generator v-if="hasGridGenerator" v-bind="defaultGridGeneratorProps" />
+
+          <qas-form-generator v-else-if="hasFormGenerator" v-bind="defaultFormGeneratorProps" />
+        </div>
+      </template>
+    </qas-gallery-card>
+
+    <qas-dialog v-model="showDialog" use-form use-validation-all-at-once v-bind="dialogProps" @validate="onValidate">
+      <template #description>
+        <qas-form-generator v-bind="dialogFormGeneratorProps" v-model="dialogValues" />
+      </template>
+    </qas-dialog>
+  </div>
+</template>
+
+<script>
+import downloadFile from '../../../helpers/download-file.js'
+
+export default {
+  name: 'PvUploaderGalleryCard',
+
+  inheritAttrs: false,
+
+  props: {
+    currentModelValue: {
+      default: '',
+      type: [String, Array, Object]
+    },
+
+    dialogProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    fields: {
+      type: Object,
+      default: () => ({})
+    },
+
+    file: {
+      type: Object,
+      default: () => ({})
+    },
+
+    fileKey: {
+      type: String,
+      default: ''
+    },
+
+    formGeneratorProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    galleryCardProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    gridGeneratorProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    savedFiles: {
+      type: Object,
+      default: () => ({})
+    },
+
+    useDownload: {
+      type: Boolean
+    },
+
+    useMultiple: {
+      type: Boolean
+    },
+
+    useObjectModel: {
+      type: Boolean
+    }
+  },
+
+  emits: ['update-model', 'remove'],
+
+  data () {
+    return {
+      dialogValues: {},
+      showDialog: false
+    }
+  },
+
+  computed: {
+    dialogFormGeneratorProps () {
+      const { modelValue, 'onUpdate:modelValue': _, ...props } = this.defaultFormGeneratorProps
+
+      return props
+    },
+
+    defaultFormGeneratorProps () {
+      return {
+        modelValue: this.currentModelValue,
+        disable: this.hasError,
+        columns: this.getDefaultColumns(this.formFields),
+
+        'onUpdate:modelValue': this.updateModel,
+
+        ...this.defaultGeneratorProps,
+        ...this.formGeneratorProps
+      }
+    },
+
+    defaultGalleryCardProps () {
+      const { list, buttonProps, ...actionsMenuProps } = this.galleryCardProps.actionsMenuProps || {}
+
+      return {
+        ...this.galleryCardProps,
+        disable: this.hasError,
+
+        actionsMenuProps: {
+          buttonProps: {
+            disable: false,
+            ...buttonProps
+          },
+
+          ...actionsMenuProps,
+
+          list: {
+            ...(
+              this.hasEditButton &&
+              {
+                edit: {
+                  label: 'Editar',
+                  icon: 'sym_r_edit',
+
+                  // callback
+                  handler: () => {
+                    this.dialogValues = { ...this.currentModelValue }
+                    this.toggleDialog()
+                  }
+                }
+              }
+            ),
+
+            ...(
+              this.hasDownloadButton &&
+              {
+                download: {
+                  label: 'Baixar arquivo',
+                  icon: 'sym_r_download',
+
+                  // callback
+                  handler: () => downloadFile(this.normalizedModelValue)
+                }
+              }
+            ),
+
+            destroy: {
+              label: 'Excluir',
+              color: 'grey-9',
+              icon: 'sym_r_delete',
+
+              // callback
+              handler: () => this.$emit('remove')
+            },
+
+            ...list
+          }
+        },
+
+        card: this.normalizedModelValue
+      }
+    },
+
+    defaultGeneratorProps () {
+      return {
+        fields: this.fields,
+        gutter: 'md'
+      }
+    },
+
+    defaultGridGeneratorProps () {
+      return {
+        useEmptyResult: false,
+        result: this.currentModelValue,
+        columns: this.getDefaultColumns(this.gridFields),
+
+        ...this.defaultGeneratorProps,
+        ...this.gridGeneratorProps
+      }
+    },
+
+    errorClasses () {
+      return [
+        'bg-grey-4',
+        'flex',
+        'full-height',
+        'full-width',
+        'items-center',
+        'justify-center',
+        'text-grey-9',
+        'text-subtitle2'
+      ]
+    },
+
+    fileName () {
+      return this.url.split('/').pop()
+    },
+
+    fileType () {
+      return this.fileName.split('.').pop()
+    },
+
+    formFields () {
+      return this.formGeneratorProps.fields
+    },
+
+    gridFields () {
+      return this.gridGeneratorProps.fields
+    },
+
+    hasDownloadButton () {
+      return this.useDownload && !this.hasError
+    },
+
+    hasEditButton () {
+      return this.isGalleryMode && this.useObjectModel && this.hasFormFields
+    },
+
+    hasError () {
+      return this.file.isFailed
+    },
+
+    hasFormFields () {
+      const { fields } = this.defaultFormGeneratorProps
+      return !!Object.keys(fields).length
+    },
+
+    hasFormGenerator () {
+      const { fields } = this.defaultFormGeneratorProps
+
+      return !!Object.keys(fields).length && !this.isGalleryMode
+    },
+
+    hasGenerator () {
+      if (!this.useObjectModel) return false
+
+      return (this.hasGridGenerator) || this.hasFormGenerator
+    },
+
+    hasGridGenerator () {
+      const { fields } = this.defaultGridGeneratorProps
+      const hasFields = !!Object.keys(fields).length
+
+      if (!this.hasFormFields && hasFields) return true
+
+      return this.isGalleryMode && hasFields && !this.hasError
+    },
+
+    isGalleryMode () {
+      return (!('isUploaded' in this.file) || this.savedFiles[this.fileKey])
+    },
+
+    normalizedModelValue () {
+      return this.useObjectModel && !this.hasError ? this.currentModelValue : this.file
+    },
+
+    url () {
+      return this.defaultGalleryCardProps?.card?.url
+    }
+  },
+
+  methods: {
+    getDefaultColumns (fields) {
+      fields ??= this.fields
+
+      const columns = {}
+
+      for (const key in fields) {
+        columns[key] = { col: 12 }
+      }
+
+      return columns
+    },
+
+    getFileName (value) {
+      return value.split('/').pop()
+    },
+
+    onValidate (isValid) {
+      if (!isValid) return
+
+      this.toggleDialog()
+      this.updateModel(this.dialogValues)
+    },
+
+    toggleDialog () {
+      this.showDialog = !this.showDialog
+    },
+
+    updateModel (value) {
+      this.$emit('update-model', value)
+    }
+  }
+}
+</script>

package/src/css/components/index.scss

@@ -3,4 +3,5 @@
 @import './field';
 @import './item';
 @import './radio';
+@import './scrollbar';
 @import './tabs';

package/src/css/components/scrollbar.scss

@@ -0,0 +1,20 @@
+// Webkit browsers
+::-webkit-scrollbar {
+  background: var(--qas-scrollbar-background);
+  border-radius: var(--qas-scrollbar-border-radius);
+  height: var(--qas-scrollbar-size);
+  width: var(--qas-scrollbar-size);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--qas-scrollbar-thumb-background);
+  background-clip: padding-box;
+  border: 1px solid rgba(0%, 0%, 0%, 0%);
+  border-radius: var(--qas-scrollbar-border-radius);
+  transition: background-color var(--qas-generic-transition);
+  width: var(--qas-scrollbar-size);
+
+  &:hover {
+    background: var(--qas-scrollbar-thumb-background-hover);
+  }
+}

package/src/css/variables/index.scss

@@ -1,4 +1,5 @@
 @import './button';
+@import './scrollbar';
 @import './separator';
 @import './shadow';
 @import './spacing';

package/src/css/variables/scrollbar.scss

@@ -0,0 +1,11 @@
+:root {
+  --qas-scrollbar-size: 9px;
+  --qas-scrollbar-background: #E0E0E0;
+  --qas-scrollbar-thumb-background: var(--q-primary);
+  --qas-scrollbar-thumb-background-hover: var(--q-primary-contrast);
+  --qas-scrollbar-border-radius: calc(var(--qas-generic-border-radius) * 2);
+
+  // Firefox support
+  scrollbar-color: var(--qas-scrollbar-thumb-background) var(--qas-scrollbar-background);
+  scrollbar-width: thin;
+}

package/src/helpers/download-file.js

@@ -0,0 +1,21 @@
+/**
+  * Faz o download de um arquivo a partir de uma URL com um nome de arquivo especificado.
+  * @param {Object} options As opções de download.
+  * @param {string} options.url A URL do arquivo a ser baixado.
+  * @param {string} options.fileName O nome do arquivo a ser salvo no disco local.
+  * @returns {void}
+*/
+export default ({ url, name }) => {
+  const link = document.createElement('a')
+
+  link.download = name
+  link.href = url
+  link.style.display = 'none'
+
+  link.setAttribute('target', '_blank')
+  document.body.appendChild(link)
+
+  link.click()
+
+  document.body.removeChild(link)
+}

package/src/helpers/index.js

@@ -1,20 +1,21 @@
 export { default as addCounterSuffix } from './add-counter-suffix.js'
-export { default as getSlotChildrenText } from './get-slot-children-text.js'
-export { default as setScrollOnGrab } from './set-scroll-on-grab.js'
-export { default as isLocalDevelopment } from './is-local-development.js'
 export { default as base64ToBlob } from './base-64-to-blob.js'
+export { default as camelizeFieldsName } from './camelize-fields-name.js'
 export { default as constructObject } from './construct-object.js'
+export { default as copyToClipboard } from './copy-to-clipboard.js'
+export { default as destroyNestedChildrenByKey } from './destroy-nested-children-by-key.js'
+export { default as downloadFile } from './download-file.js'
+export { default as filterListByHandle } from './filter-list-by-handle.js'
 export { default as filterObject } from './filter-object.js'
-export { default as getGreatestCommonDivisor } from './get-greatest-common-divisor.js'
 export { default as filterObjectToArray } from './filter-object-to-array.js'
-export { default as filterListByHandle } from './filter-list-by-handle.js'
-export { default as camelizeFieldsName } from './camelize-fields-name.js'
+export { default as findChildrenByKey } from './find-children-by-key.js'
+export { default as getGreatestCommonDivisor } from './get-greatest-common-divisor.js'
 export { default as getNormalizedOptions } from './get-normalized-options.js'
+export { default as getSlotChildrenText } from './get-slot-children-text.js'
 export { default as handleProcess } from './handle-process.js'
-export { default as destroyNestedChildrenByKey } from './destroy-nested-children-by-key.js'
+export { default as isLocalDevelopment } from './is-local-development.js'
 export { default as promiseHandler } from './promise-handler.js'
-export { default as findChildrenByKey } from './find-children-by-key.js'
-export { default as copyToClipboard } from './copy-to-clipboard.js'
+export { default as setScrollOnGrab } from './set-scroll-on-grab.js'
 
 export * from './filters.js'
 export * from './images.js'

package/src/vue-plugin.js

@@ -23,6 +23,7 @@ import QasFilters from './components/filters/QasFilters.vue'
 import QasFormGenerator from './components/form-generator/QasFormGenerator.vue'
 import QasFormView from './components/form-view/QasFormView.vue'
 import QasGallery from './components/gallery/QasGallery.vue'
+import QasGalleryCard from './components/gallery-card/QasGalleryCard.vue'
 import QasGridGenerator from './components/grid-generator/QasGridGenerator.vue'
 import QasHeaderActions from './components/header-actions/QasHeaderActions.vue'
 import QasInput from './components/input/QasInput.vue'
@@ -102,6 +103,7 @@ function install (app) {
   app.component('QasFormGenerator', QasFormGenerator)
   app.component('QasFormView', QasFormView)
   app.component('QasGallery', QasGallery)
+  app.component('QasGalleryCard', QasGalleryCard)
   app.component('QasGridGenerator', QasGridGenerator)
   app.component('QasHeaderActions', QasHeaderActions)
   app.component('QasInput', QasInput)
@@ -182,6 +184,7 @@ export {
   QasFormGenerator,
   QasFormView,
   QasGallery,
+  QasGalleryCard,
   QasGridGenerator,
   QasHeaderActions,
   QasInput,