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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.12.0-beta.0",
+  "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/filters/QasFilters.vue

@@ -224,9 +224,14 @@ export default {
     }
   },
 
-  created () {
-    this.fetchFilters()
-    this.watchOnceFields()
+  async created () {
+    await this.fetchFilters()
+
+    if (this.useUpdateRoute) {
+      this.updateValues()
+      this.updateCurrentFilters()
+    }
+
     this.handleSearchModelOnCreate()
   },
 
@@ -371,18 +376,6 @@ export default {
       return isMultiple ? [value] : value
     },
 
-    watchOnceFields () {
-      if (!this.useUpdateRoute) return
-
-      const watchOnce = this.$watch('fields', values => {
-        if (Object.keys(values || {}).length) {
-          this.updateValues()
-          this.updateCurrentFilters()
-          watchOnce()
-        }
-      })
-    },
-
     handleSearchModelOnCreate () {
       if (this.useUpdateRoute && !this.useFilterButton) {
         this.setSearch()

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/search-box/QasSearchBox.vue

@@ -264,7 +264,7 @@ export default {
     },
 
     setFuse () {
-      const list = [...this.list]
+      const list = this.mx_getOptions(this.list)
 
       this.mx_filteredOptions = list
       this.fuse = new Fuse(list, this.defaultFuseOptions)

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')