@bildvitta/quasar-ui-asteroid 3.12.0-beta.8 → 3.12.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.12.0-beta.8",
+  "version": "3.12.0",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/label/QasLabel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-h4" :class="classes">
+  <div :class="classes">
     <slot :label-with-suffix="formattedLabel">{{ formattedLabel }}</slot>
   </div>
 </template>
@@ -39,6 +39,16 @@ export default {
 
     required: {
       type: Boolean
+    },
+
+    typography: {
+      default: 'h4',
+      type: String,
+      validator: value => {
+        const availableTypography = ['h4', 'h5']
+
+        return availableTypography.includes(value)
+      }
     }
   },
 
@@ -54,7 +64,8 @@ export default {
     classes () {
       return [
         `q-mb-${this.margin}`,
-        `text-${this.color}`
+        `text-${this.color}`,
+        `text-${this.typography}`
       ]
     }
   }

package/src/components/label/QasLabel.yml

@@ -4,6 +4,11 @@ meta:
   desc: Componente para controlar textos que separam conteúdos, formatando com um sufixo quando existe um contador.
 
 props:
+  color:
+    desc: Cor do texto.
+    default: grey-9
+    type: String
+
   count:
     desc: Contador que vai ficar ao lado do texto.
     default: 0
@@ -20,14 +25,15 @@ props:
     examples: [xs, sm, md, lg, xl]
 
   required:
-    desc: Controla label do campo, se for "true" adiciona sufixo "*".
+    desc: Controla se exibirá o sufixo "*" ao lado do texto.
     default: false
     type: Boolean
 
-  color:
-    desc: Cor da label.
-    default: grey-9
+  typography:
+    desc: Controla qual a tipografia do texto.
+    default: h4
     type: String
+    examples: [h4, h5]
 
 slots:
   default:

package/src/components/nested-fields/QasNestedFields.vue

@@ -1,16 +1,16 @@
 <template>
   <div :id="fieldName" class="qas-nested-fields">
     <div v-if="useSingleLabel" class="text-left">
-      <qas-label :label="fieldLabel" margin="lg" />
+      <qas-label :label="fieldLabel" typography="h5" />
     </div>
 
     <div ref="inputContent">
       <component :is="componentTag" v-bind="componentProps">
         <template v-for="(row, index) in nested" :key="`row-${index}`">
-          <div v-if="!row[destroyKey]" :id="`row-${index}`" class="full-width q-mt-md qas-nested-fields__field-item">
+          <div v-if="!row[destroyKey]" :id="`row-${index}`" class="full-width qas-nested-fields__field-item">
             <header v-if="hasHeader" class="flex items-center q-pb-md" :class="headerClasses">
-              <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" margin="none" />
-              <qas-actions-menu v-if="hasBlockActions(row)" v-bind="actionsMenuProps" :list="getActionsList(index, row)" />
+              <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" margin="none" typography="h5" />
+              <qas-actions-menu v-if="hasBlockActions(row)" v-bind="getActionsMenuProps(index, row)" />
             </header>
 
             <div ref="formGenerator" class="col-12 justify-between q-col-gutter-x-md row">
@@ -23,7 +23,7 @@
               </slot>
 
               <div v-if="hasInlineActions(row)" class="flex items-center qas-nested-fields__actions">
-                <qas-actions-menu v-bind="actionsMenuProps" :list="getActionsList(index, row)" />
+                <qas-actions-menu v-bind="getActionsMenuProps(index, row)" />
               </div>
             </div>
 
@@ -34,7 +34,7 @@
         </template>
       </component>
 
-      <div v-if="useAdd" class="q-mt-md">
+      <div v-if="useAdd">
         <slot :add="add" name="add-input">
           <div v-if="showAddFirstInputButton" class="text-left">
             <qas-btn class="q-px-sm" color="primary" variant="tertiary" @click="add()">{{ addFirstInputLabel }}</qas-btn>
@@ -86,7 +86,7 @@ export default {
 
   props: {
     actionsMenuProps: {
-      type: Object,
+      type: [Object, Function],
       default: () => ({})
     },
 
@@ -327,7 +327,22 @@ export default {
   },
 
   methods: {
-    getActionsList (index, row) {
+    getActionsMenuProps (index, row) {
+      if (typeof this.actionsMenuProps === 'function') {
+        return this.actionsMenuProps({
+          index,
+          row,
+          list: this.getDefaultActionsMenuList(index, row)
+        })
+      }
+
+      return {
+        ...this.actionsMenuProps,
+        list: this.getActionsMenuList(index, row)
+      }
+    },
+
+    getDefaultActionsMenuList (index, row) {
       const list = {}
 
       if (this.useDuplicate) {
@@ -344,6 +359,12 @@ export default {
         }
       }
 
+      return list
+    },
+
+    getActionsMenuList (index, row) {
+      const list = this.getDefaultActionsMenuList(index, row)
+
       for (const key in this.actionsMenuProps.list) {
         const { handler, ...content } = this.actionsMenuProps.list[key] || {}
 
@@ -473,6 +494,10 @@ export default {
     height: 56px;
   }
 
+  &__field-item {
+    margin-bottom: var(--qas-spacing-md);
+  }
+
   &__field-item + &__field-item {
     margin-top: var(--qas-spacing-xl);
   }

package/src/components/nested-fields/QasNestedFields.yml

@@ -5,9 +5,9 @@ meta:
 
 props:
   actions-menu-props:
-    desc: Repassa as propriedades para o componente QasActionsMenu.
+    desc: Repassa as propriedades para o componente QasActionsMenu. É possível passar um objeto com as propriedades ou uma função que recebe o 'index', 'row' e 'list' como parâmetro e retorna um objeto com as propriedades.
     default: {}
-    type: Object
+    type: [Object, Function]
 
   add-first-input-label:
     desc: Rótulo do input para adicionar o primeiro campo.

package/src/components/select-list-dialog/QasSelectListDialog.vue

@@ -243,7 +243,7 @@ function useList () {
 
     model.value.push(...newModel)
 
-    emit('add', newModel)
+    emit('add', normalizedItems)
 
     updateModel()
   }

package/src/components/select-list-dialog/QasSelectListDialog.yml

@@ -76,21 +76,21 @@ slots:
     desc: Slot para substituir cabeçalho do dialog.
 
 events:
-  'add -> function(list)':
+  '@add -> function(items)':
     desc: Dispara toda vez que é adicionado novos itens.
     params:
-      list:
+      items:
         desc: Lista de itens adicionados.
         type: Array
 
-  'remove -> function(value)':
+  '@remove -> function(value)':
     desc: Dispara toda vez que é removido um item.
     params:
       value:
         desc: Valor do item (uuid/id/slug).
         type: String
 
-  'update:model-value -> function(list)':
+  '@update:model-value -> function(list)':
     desc: Dispara toda vez que o model é atualizado.
     params:
       list:

package/src/components/uploader/QasUploader.vue

@@ -154,6 +154,11 @@ export default {
       type: Number
     },
 
+    uploadCredentialsParams: {
+      type: Object,
+      default: () => ({})
+    },
+
     uploading: {
       type: Boolean
     },
@@ -170,6 +175,11 @@ export default {
     useResize: {
       default: true,
       type: Boolean
+    },
+
+    useUrlPath: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -366,7 +376,8 @@ export default {
       try {
         const { data } = await this.$axios.post('/upload-credentials/', {
           entity: this.entity,
-          filename
+          filename,
+          ...this.uploadCredentialsParams
         })
 
         return data
@@ -377,7 +388,7 @@ export default {
       uploadedFiles = uploadedFiles.map((file, indexToDelete) => {
         return {
           isUploaded: true,
-          url: file.xhr ? file.xhr.responseURL.split('?').shift() : '',
+          url: file.xhr ? this.getURLValue(file.xhr) : '',
           name: file.name,
           indexToDelete,
           isFailed: this.isFailed(file)
@@ -421,6 +432,16 @@ export default {
       return value.split('/').pop()
     },
 
+    /**
+     * Caso useUrlPath seja true, retorna de responseURL, senão tenta retornar o response
+     * que pode ser um base64, caso não tenha o response, retorna a responseURL.
+    */
+    getURLValue (xhr) {
+      const responseURL = xhr.responseURL.split('?').shift()
+
+      return this.useUrlPath ? responseURL : (xhr.response || responseURL)
+    },
+
     getModelValue (index) {
       if (!this.useObjectModel) return {}
 
@@ -571,7 +592,7 @@ export default {
     uploaded (response) {
       this.hasError = false
 
-      const fullPath = response.xhr.responseURL.split('?').shift()
+      const fullPath = this.getURLValue(response.xhr)
 
       const objectValue = {
         format: response.files[0].type,

package/src/components/uploader/QasUploader.yml

@@ -33,7 +33,7 @@ props:
       'image/webp',
       'image/jpg'
     ]
-  
+
   columns:
     desc: Seta as colunas (grid cols), valor default depende se o componente é múltiplo ou não.
     default:
@@ -118,6 +118,11 @@ props:
     default: 1280
     type: Number
 
+  upload-credentials-params:
+    desc: Parâmetros enviados para a API do `/upload-credentials/`.
+    default: {}
+    type: Object
+
   uploading:
     desc: Model que retorna se o componente está fazendo algum upload.
     type: Boolean
@@ -139,6 +144,11 @@ props:
     default: true
     type: Boolean
 
+  use-url-path:
+    desc: Controla se o componente vai salvar o path url no model ou por exemplo um base64.
+    default: true
+    type: Boolean
+
 slots:
   header:
     desc: Acesso ao header do <q-uploader />.