@bildvitta/quasar-ui-asteroid 3.12.0-beta.1 → 3.12.0-beta.10

package/package.json

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

package/src/components/alert/QasAlert.vue

@@ -1,87 +1,110 @@
 <template>
-  <div v-if="model" class="bg-white q-pa-lg qas-alert relative-position rounded-borders" :class="classes">
-    <qas-btn class="absolute-top-right q-mr-md q-mt-sm" color="grey-9" icon="sym_r_close" variant="tertiary" @click="close" />
+  <div v-if="show" class="inline-block">
+    <div class="bg-dark flex justify-between no-wrap q-pa-md qas-alert relative-position">
+      <div class="qas-alert__border-left" :class="borderClass" />
 
-    <div class="q-gutter-md q-mr-lg">
-      <slot name="header">
-        <h5 v-if="title" class="text-bold text-h5" data-test="alert-title">{{ title }}</h5>
-      </slot>
+      <div class="text-body1 text-white">
+        <slot>
+          {{ text }}
+        </slot>
+      </div>
 
-      <slot>
-        <qas-breakline tag="p" :text="text" />
-      </slot>
+      <qas-btn
+        class="q-ml-xs qas-alert__close"
+        color="white"
+        icon="sym_r_close"
+        :use-hover-on-white-color="false"
+        @click="close"
+      />
     </div>
   </div>
 </template>
 
-<script>
-import QasBreakline from '../breakline/QasBreakline.vue'
-import QasBtn from '../btn/QasBtn.vue'
+<script setup>
+import { LocalStorage } from 'quasar'
+import { Status, StatusColor } from '../../enums/Status'
+import { computed, watch, ref } from 'vue'
 
-export default {
-  name: 'QasAlert',
+defineOptions({ name: 'QasAlert' })
 
-  components: {
-    QasBreakline,
-    QasBtn
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true
   },
 
-  props: {
-    modelValue: {
-      default: true,
-      type: Boolean
-    },
-
-    text: {
-      default: '',
-      type: String
-    },
-
-    color: {
-      type: String,
-      default: 'primary'
-    },
-
-    title: {
-      default: '',
-      type: String
-    }
+  text: {
+    type: String,
+    default: ''
   },
 
-  emits: ['update:modelValue'],
-
-  data () {
-    return {
-      model: true
-    }
+  storageKey: {
+    type: String,
+    default: ''
   },
 
-  computed: {
-    classes () {
-      return `text-${this.color}`
-    }
+  status: {
+    type: String,
+    default: Status.Info,
+    validator: value => Object.values(Status).includes(value)
   },
 
-  watch: {
-    modelValue: {
-      handler (value) {
-        this.model = value
-      },
-      immediate: true
-    }
-  },
+  usePersistentModelOnClose: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const model = ref(props.modelValue)
+
+watch(() => props.modelValue, value => {
+  model.value = value
+})
+
+const colorByStatus = computed(() => {
+  const status = Object.keys(Status).find(key => Status[key] === props.status)
+  return StatusColor[status]
+})
+
+const borderClass = computed(() => `bg-${colorByStatus.value}`)
+
+const storageClosedKey = computed(() => `alert-${props.storageKey}-closed`)
 
-  methods: {
-    close () {
-      this.$emit('update:modelValue', false)
-    }
+const isClosed = computed(() => {
+  return props.usePersistentModelOnClose && LocalStorage.getItem(storageClosedKey.value)
+})
+
+const show = computed(() => !isClosed.value && model.value)
+
+function close () {
+  if (props.usePersistentModelOnClose) {
+    LocalStorage.set(storageClosedKey.value, true)
   }
+
+  model.value = false
+
+  emit('update:modelValue', model.value)
 }
+
 </script>
 
 <style lang="scss">
 .qas-alert {
-  border-style: solid;
-  border-width: 0 10px;
+  border-radius: var(--qas-generic-border-radius);
+
+  &__border-left {
+    border-radius: var(--qas-generic-border-radius) 0 0 var(--qas-generic-border-radius);
+    bottom: 0;
+    content: '';
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 4px;
+  }
+
+  &__close {
+    top: calc(var(--qas-spacing-sm) * -1);
+  }
 }
 </style>

package/src/components/alert/QasAlert.yml

@@ -9,21 +9,27 @@ props:
     default: true
     type: Boolean
 
-  title:
-    desc: Título do componente.
-    type: String
-
   text:
     desc: Texto do componente.
     type: String
 
+  status:
+    desc: Status do alerta.
+    type: String
+    examples: ['error', 'info']
+
+  storage-key:
+    desc: Chave a ser salva no localStorage, necessário caso esteja usando mais de um QasAlert na aplicação e ambos estejam com a prop "use-persist-model-on-close" ativada.
+    type: String
+
+  use-persistent-model-on-close:
+    desc: Habilita salvar o model em localStorage ao fechar o alerta para não aparecer novamente.
+    type: Boolean
+
 slots:
   default:
     desc: 'Slot para acessar o conteúdo gerado pela prop "text"'
 
-  header:
-    desc: 'Slot para acessar o conteúdo gerado pela prop "title"'
-
 events:
   '@update:model-value -> function(value)':
     desc: Dispara quando o model-value altera, também usado para v-model.

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: () => ({})
     },
 
@@ -130,7 +130,7 @@ export default {
     },
 
     disabledRows: {
-      type: [Array, Boolean],
+      type: [Array, Boolean, Function],
       default: false
     },
 
@@ -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] || {}
 
@@ -449,6 +470,8 @@ export default {
     isDisabledRow (row) {
       if (!this.disabledRows) return false
 
+      if (typeof this.disabledRows === 'function') return this.disabledRows(row)
+
       if (typeof this.disabledRows === 'boolean') return true
 
       return this.disabledRows.includes(row[this.identifierItemKey])
@@ -471,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.
@@ -37,10 +37,10 @@ props:
     type: String
 
   disabled-rows:
-    desc: Com esta propriedade é possível desabilitar rows (linhas) especificas passando um array com chaves identificadoras, ou caso queira desativar todas passando um boolean "true" (isto vai remover todos os botões da linha, duplicar e excluir).
+    desc: Com esta propriedade é possível desabilitar rows (linhas) especificas passando um array com chaves identificadoras, caso queira desativar todas passe um valor boolean "true", ou também é possível utilizar uma função de callback, que receberá a "row" como parâmetro. (Isto vai remover todos os botões da linha, como por exemplo, o duplicar e excluir).
     default: "false"
-    type: [Array, Boolean]
-    examples: ["['my-uuid-from-row-1']", true]
+    type: [Array, Boolean, Function]
+    examples: ["['my-uuid-from-row-1']", true, "row => row.disable"]
 
   errors:
     desc: Propriedade de erros para mostrar nos campos gerados.

package/src/components/select/QasSelect.vue

@@ -178,6 +178,12 @@ export default {
       if (this.hasFuse) this.setFuse()
     },
 
+    mx_isFetching (value) {
+      if (!this.isPopupContentOpen || !this.useLazyLoading) return
+
+      this.togglePopupContentClass(value)
+    },
+
     options: {
       handler () {
         if (this.useLazyLoading && this.mx_hasFilteredOptions) return
@@ -193,7 +199,6 @@ export default {
 
   created () {
     this.setSearchMethod()
-    this.setIsFetchingWatcher()
   },
 
   methods: {
@@ -238,16 +243,6 @@ export default {
       }
     },
 
-    setIsFetchingWatcher () {
-      if (this.useLazyLoading) {
-        this.$watch('mx_isFetching', value => {
-          if (!this.isPopupContentOpen) return
-
-          this.togglePopupContentClass(value)
-        })
-      }
-    },
-
     setLazyLoading () {
       this.mx_setCachedOptions('options')
 

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

@@ -132,6 +132,10 @@ const props = defineProps({
   selectListProps: {
     type: Object,
     default: () => ({})
+  },
+
+  useLazyLoading: {
+    type: Boolean
   }
 })
 
@@ -184,7 +188,9 @@ const labelProps = computed(() => {
   }
 })
 
-const hasLazyLoading = computed(() => !!props.selectListProps?.searchBoxProps?.useLazyLoading)
+const hasLazyLoading = computed(() => {
+  return props.useLazyLoading || !!props.selectListProps?.searchBoxProps?.useLazyLoading
+})
 
 watch(() => props.modelValue, newValue => {
   model.value = [...newValue]
@@ -237,7 +243,7 @@ function useList () {
 
     model.value.push(...newModel)
 
-    emit('add', newModel)
+    emit('add', normalizedItems)
 
     updateModel()
   }
@@ -322,6 +328,7 @@ function useSelectDialog () {
       ...props.selectListProps,
 
       searchBoxProps: {
+        useLazyLoading: props.useLazyLoading,
         list: props.options,
         height: '160px',
         optionsToExclude: model.value,

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

@@ -60,6 +60,11 @@ props:
     default: []
     type: Array
 
+  use-lazy-loading:
+    desc: O componente precisa saber se o lazy-loading esta habilitado para este componente, e caso esteja usando customização pelos slots do "dialog-description", é necessário informar por esta prop.
+    default: false
+    type: Boolean
+
 slots:
   dialog-actions:
     desc: Slot para substituir ações do dialog.
@@ -71,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 />.

package/src/enums/Status.js

@@ -0,0 +1,33 @@
+/**
+ * Cores por status
+ *
+ * @property
+ * @name Spacing
+ * @readonly
+ * @enum
+ * @type {{
+ * Info: 'yellow-14',
+ * Error: 'red-14'
+ * }}
+*/
+export const StatusColor = {
+  Info: 'yellow-14',
+  Error: 'red-14'
+}
+
+/**
+ * Status
+ *
+ * @property
+ * @name Spacing
+ * @readonly
+ * @enum
+ * @type {{
+ * Info: 'info',
+ * Error: 'error'
+ * }}
+ */
+export const Status = {
+  Info: 'info',
+  Error: 'error'
+}