@bildvitta/quasar-ui-asteroid 3.11.0-beta.9 → 3.11.0

package/package.json

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

package/src/assets/icon-loading.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#90a4ae" height="48" viewBox="0 -960 960 960" width="48"><path d="M480-80q-84 0-157-31t-127-85q-54-54-85-127T80-480q0-84 31-157t85-127q54-54 127-85t157-31q12 0 21 9t9 21q0 12-9 21t-21 9q-141 0-240.5 99.5T140-480q0 141 99.5 240.5T480-140q141 0 240.5-99.5T820-480q0-12 9-21t21-9q12 0 21 9t9 21q0 84-31 157t-85 127q-54 54-127 85T480-80Z"/></svg>

package/src/components/actions-menu/QasActionsMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="hasActions" class="qas-actions-menu">
-    <component :is="component.is" v-bind="component.props" variant="tertiary">
+    <component :is="component.is" v-bind="component.props" variant="tertiary" @click.stop.prevent>
       <q-list v-if="isBtnDropdown">
         <slot v-for="(item, key) in actions" :item="item" :name="key">
           <q-item v-bind="item.props" :key="key" clickable @click="onClick(item)">

package/src/components/copy/QasCopy.vue

@@ -2,7 +2,7 @@
   <span>
     <slot>{{ text }}</slot>
 
-    <qas-btn class="q-ml-xs" color="primary" :icon="icon" :loading="isLoading" variant="tertiary" @click.stop="copy">
+    <qas-btn class="q-ml-xs" color="primary" :icon="icon" :loading="isLoading" variant="tertiary" @click.stop.prevent="copy">
       <q-tooltip>Copiar</q-tooltip>
     </qas-btn>
   </span>

package/src/components/date-time-input/QasDateTimeInput.vue

@@ -1,14 +1,14 @@
 <template>
-  <qas-input ref="input" v-bind="attributes" v-model="currentValue" :unmasked-value="false" @blur="validateDateTimeOnBlur" @focus="resetError" @update:model-value="updateModelValue">
+  <qas-input ref="input" v-bind="attributes" v-model="currentValue" inputmode="numeric" :unmasked-value="false" @blur="validateDateTimeOnBlur" @focus="resetError" @update:model-value="updateModelValue">
     <template #append>
       <qas-btn v-if="!useTimeOnly" color="grey-9" :disable="$attrs.readonly" icon="sym_r_event" variant="tertiary">
-        <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale">
+        <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale" v-bind="datePopupProxyProps">
           <qas-date v-model="currentValue" v-bind="defaultDateProps" :mask="maskDate" width="290px" @update:model-value="updateModelValue" />
         </q-popup-proxy>
       </qas-btn>
 
       <qas-btn v-if="!useDateOnly" class="q-ml-sm" color="grey-9" :disable="$attrs.readonly" icon="sym_r_access_time">
-        <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale">
+        <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale" v-bind="timePopupProxyProps">
           <q-time v-model="currentValue" v-bind="defaultTimeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
         </q-popup-proxy>
       </qas-btn>
@@ -36,6 +36,11 @@ export default {
       type: Object
     },
 
+    datePopupProxyProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     timeMask: {
       default: 'HH:mm',
       type: String
@@ -46,6 +51,11 @@ export default {
       type: Object
     },
 
+    timePopupProxyProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     useIso: {
       type: Boolean
     },

package/src/components/date-time-input/QasDateTimeInput.yml

@@ -17,6 +17,11 @@ props:
     default: {}
     type: Object
 
+  date-popup-proxy-props:
+    desc: Propriedades do QPopupProxy para o popup do QDate (https://quasar.dev/vue-components/popup-proxy#qpopupproxy-api).
+    default: {}
+    type: Object
+
   model-value:
     desc: Model do componente, usado para v-model.
     default: ''
@@ -33,6 +38,11 @@ props:
     default: {}
     type: Object
 
+  time-popup-proxy-props:
+    desc: Propriedades do QPopupProxy para o popup do QTime (https://quasar.dev/vue-components/popup-proxy#qpopupproxy-api).
+    default: {}
+    type: Object
+
   use-time-only:
     desc: Habilita o componente para usar somente hora.
     type: Boolean

package/src/components/delete/QasDelete.vue

@@ -1,5 +1,5 @@
 <template>
-  <component v-bind="attributes" :is="tag" @click.stop="onDelete">
+  <component v-bind="attributes" :is="tag" @click.stop.prevent="onDelete">
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>

package/src/components/dialog/QasDialog.vue

@@ -14,7 +14,7 @@
       <section class="text-body1 text-grey-8">
         <component :is="componentTag" ref="form">
           <slot name="description">
-            <div v-if="card.description">{{ card.description }}</div>
+            <component :is="descriptionComponentTag">{{ card.description }}</component>
           </slot>
         </component>
       </section>
@@ -186,6 +186,16 @@ export default {
         useEqualWidth: this.hasAllActions,
         ...this.actionsProps
       }
+    },
+
+    hasRenderFunction () {
+      const description = this.card.description
+
+      return typeof description === 'object' && description !== null && !Array.isArray(description)
+    },
+
+    descriptionComponentTag () {
+      return this.hasRenderFunction ? this.card.description : 'div'
     }
   },
 

package/src/components/field/QasField.vue

@@ -70,10 +70,12 @@ export default {
         name,
         options,
         readonly,
+        required,
         disable,
         filled = readonly,
         suffix,
         prefix,
+        places,
         type,
         mask,
         maxFiles,
@@ -95,6 +97,7 @@ export default {
         outlined: true,
         ...error,
         readonly,
+        required,
         disable,
         filled,
         maxlength,
@@ -104,7 +107,7 @@ export default {
         useIso
       }
 
-      const numericInput = { is: 'qas-numeric-input', ...input }
+      const numericInput = { is: 'qas-numeric-input', places, ...input }
       const datetimeInput = { is: 'qas-date-time-input', useIso, ...input }
 
       // It'll generate a list of acceptable files extensions.
@@ -151,8 +154,7 @@ export default {
 
       return {
         ...(profiles[type] || profiles.default),
-        ...this.$attrs,
-        label: this.formattedLabel
+        ...this.$attrs
       }
     },
 
@@ -160,19 +162,6 @@ export default {
       return Array.isArray(this.error) ? this.error.join(' ') : this.error
     },
 
-    formattedLabel () {
-      const nonRequiredFieldsLabel = ['boolean', 'checkbox', 'radio']
-
-      const label = this.$attrs.label || this.formattedField.label
-      const { required, type } = this.formattedField
-
-      if (required && label && !nonRequiredFieldsLabel.includes(type)) {
-        return `${label}*`
-      }
-
-      return label
-    },
-
     // This computed will change the key name when the server sends different key.
     formattedField () {
       const field = {}

package/src/components/form-generator/QasFormGenerator.vue

@@ -3,6 +3,7 @@
     <div v-for="(fieldsetItem, fieldsetItemKey) in normalizedFields" :key="fieldsetItemKey" class="full-width">
       <slot v-if="fieldsetItem.label" :name="`legend-${fieldsetItemKey}`">
         <qas-label :label="fieldsetItem.label" />
+        <div v-if="fieldsetItem.description" class="q-mb-md text-body1 text-grey-8">{{ fieldsetItem.description }}</div>
       </slot>
 
       <div>
@@ -123,6 +124,7 @@ const normalizedFields = computed(() => {
 
     fields[fieldsetKey] = {
       label: fieldsetItem.label,
+      description: fieldsetItem.description,
       fields: { hidden: {}, visible: {} }
     }
 

package/src/components/form-generator/QasFormGenerator.yml

@@ -36,7 +36,7 @@ props:
     desc: Lista para agrupar elementos por rótulo (label).
     default: {}
     type: Object
-    examples: ["{ personalInformation: { label: 'Informações pessoais', fields: [name, email] } }"]
+    examples: ["{ personalInformation: { label: 'Informações pessoais', description: 'Descrição dos campos', fields: ['name', 'email'] } }"]
 
   fieldset-gutter:
     desc: Espaçamento entre rótulos (label).

package/src/components/form-view/QasFormView.vue

@@ -4,7 +4,7 @@
       <slot name="header" />
     </header>
 
-    <q-form ref="form" @submit="submitHandler">
+    <q-form ref="form" v-bind="defaultFormProps">
       <slot />
 
       <slot v-if="useActions" name="actions">
@@ -76,6 +76,11 @@ export default {
       type: Boolean
     },
 
+    formProps: {
+      type: Object,
+      default: () => ({})
+    },
+
     mode: {
       default: 'create',
       type: String
@@ -191,6 +196,17 @@ export default {
         error: 'Não conseguimos salvar as informações. Por favor, tente novamente em alguns minutos.',
         success: 'Informações salvas com sucesso.'
       }
+    },
+
+    defaultFormProps () {
+      return {
+        ...this.formProps,
+
+        onSubmit: event => {
+          this.submitHandler(event)
+          this.formProps?.onSubmit?.(event)
+        }
+      }
     }
   },
 

package/src/components/form-view/QasFormView.yml

@@ -66,6 +66,12 @@ props:
     examples: [v-model:fields="fields"]
     model: true
 
+  form-props:
+    desc: Repassa todas as props/eventos para o `QForm`.
+    default: {}
+    type: Object
+    examples: ['{ onValidationError: ref => validationErrorHandler(ref) }']
+
   ignore-keys-in-unsaved-changes:
     desc: Vamos imaginar um cenário onde você precisa alterar valores do v-model por qualquer motivo que seja, mas quando o usuário sair da tela, não pode aparecer o modal perguntando se ele quer sair ou continuar editando, por que o usuário de fato não fez nenhuma alteração nos dados, esta prop serve para você dizer quais keys dentro do v-model você quer ignorar.
     default: []

package/src/components/input/QasInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessage" :mask="mask" :outlined="outlined" :unmasked-value="unmaskedValue" @paste="onPaste">
+  <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessage" :inputmode="defaultInputmode" :label="formattedLabel" :mask="currentMask" :outlined="outlined" :unmasked-value="unmaskedValue" @paste="onPaste">
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
@@ -7,6 +7,16 @@
 </template>
 
 <script>
+import { getRequiredLabel } from '../../helpers'
+
+const Masks = {
+  CompanyDocument: 'company-document',
+  Document: 'document',
+  PersonalDocument: 'personal-document',
+  Phone: 'phone',
+  PostalCode: 'postal-code'
+}
+
 export default {
   name: 'QasInput',
 
@@ -22,6 +32,11 @@ export default {
       default: ''
     },
 
+    mask: {
+      type: String,
+      default: ''
+    },
+
     modelValue: {
       default: '',
       type: [String, Number]
@@ -32,6 +47,10 @@ export default {
       type: Boolean
     },
 
+    required: {
+      type: Boolean
+    },
+
     unmaskedValue: {
       default: true,
       type: Boolean
@@ -47,7 +66,8 @@ export default {
   data () {
     return {
       errorData: false,
-      mask: ''
+      currentMask: '',
+      inputReference: null
     }
   },
 
@@ -56,20 +76,33 @@ export default {
       return this.inputReference.hasError
     },
 
-    inputReference () {
-      return this.$refs.input
-    },
-
     masks () {
       return {
-        'company-document': () => '##.###.###/####-##',
-        document: () => this.toggleMask('###.###.###-###', '##.###.###/####-##'),
-        'personal-document': () => '###.###.###-##',
-        phone: () => this.toggleMask('(##) ####-#####', '(##) #####-####'),
-        'postal-code': () => '#####-###'
+        [Masks.CompanyDocument]: () => '##.###.###/####-##',
+        [Masks.Document]: () => this.toggleMask('###.###.###-###', '##.###.###/####-##'),
+        [Masks.PersonalDocument]: () => '###.###.###-##',
+        [Masks.Phone]: () => this.toggleMask('(##) ####-#####', '(##) #####-####'),
+        [Masks.PostalCode]: () => '#####-###'
       }
     },
 
+    defaultInputmode () {
+      const { inputmode, type } = this.$attrs
+
+      const defaults = {
+        [Masks.CompanyDocument]: 'numeric',
+        [Masks.Document]: 'numeric',
+        [Masks.PersonalDocument]: 'numeric',
+        [Masks.Phone]: 'tel',
+        [Masks.PostalCode]: 'numeric',
+
+        // types
+        email: 'email'
+      }
+
+      return inputmode || defaults[this.mask || type]
+    },
+
     model: {
       get () {
         return this.modelValue
@@ -80,11 +113,17 @@ export default {
 
         return this.$emit('update:modelValue', value)
       }
+    },
+
+    formattedLabel () {
+      const { label } = this.$attrs
+
+      return getRequiredLabel({ label, required: this.required })
     }
   },
 
   watch: {
-    mask (value) {
+    currentMask (value) {
       if (!value) return
 
       const input = this.getInput()
@@ -110,6 +149,10 @@ export default {
     }
   },
 
+  mounted () {
+    this.inputReference = this.$refs.input
+  },
+
   methods: {
     focus () {
       return this.inputReference.focus()
@@ -129,7 +172,7 @@ export default {
     },
 
     onPaste (event) {
-      if (!this.mask) return
+      if (!this.currentMask) return
 
       const value = event.clipboardData.getData('text')
       const input = this.getInput()
@@ -153,11 +196,10 @@ export default {
     handleMask () {
       if (!this.modelValue?.length) return
 
-      const { mask } = this.$attrs
-      const hasDefaultMask = Object.prototype.hasOwnProperty.call(this.masks, mask)
+      const hasDefaultMask = Object.prototype.hasOwnProperty.call(this.masks, this.mask)
 
       this.$nextTick(() => {
-        this.mask = hasDefaultMask ? this.masks[mask]() : mask
+        this.currentMask = hasDefaultMask ? this.masks[this.mask]() : this.mask
       })
     }
   }

package/src/components/input/QasInput.yml

@@ -15,6 +15,12 @@ props:
     desc: Controla cor da borda do input.
     type: Boolean
 
+  mask:
+    desc: Máscara do input, é possível passar um slug de mascara ou um pattern personalizado.
+    type: String
+    default: ''
+    examples: [document, personal-document, company-document, phone, postal-code, '##/##/####']
+
   model-value:
     desc: Model do componente.
     type: [String, Input]
@@ -26,6 +32,11 @@ props:
     default: true
     type: Boolean
 
+  required:
+    desc: Controla label do campo, se for "true" adiciona sufixo "*".
+    default: false
+    type: Boolean
+
   use-remove-error-on-type:
     desc: Limpa os erros do campo caso os mesmos existam toda vez que o model atualiza.
     type: Boolean

package/src/components/label/QasLabel.vue

@@ -1,17 +1,22 @@
 <template>
   <div class="text-h4" :class="classes">
-    <slot :label-with-suffix="labelWithSuffix">{{ labelWithSuffix }}</slot>
+    <slot :label-with-suffix="formattedLabel">{{ formattedLabel }}</slot>
   </div>
 </template>
 
 <script>
-import { addCounterSuffix } from '../../helpers'
+import { addCounterSuffix, getRequiredLabel } from '../../helpers'
 import { Spacing } from '../../enums/Spacing'
 
 export default {
   name: 'QasLabel',
 
   props: {
+    color: {
+      type: String,
+      default: 'grey-9'
+    },
+
     count: {
       default: 0,
       type: [Number, String]
@@ -32,9 +37,8 @@ export default {
       }
     },
 
-    color: {
-      type: String,
-      default: 'grey-9'
+    required: {
+      type: Boolean
     }
   },
 
@@ -43,6 +47,10 @@ export default {
       return addCounterSuffix(this.label, parseFloat(this.count))
     },
 
+    formattedLabel () {
+      return getRequiredLabel({ label: this.labelWithSuffix, required: this.required })
+    },
+
     classes () {
       return [
         `q-mb-${this.margin}`,

package/src/components/label/QasLabel.yml

@@ -19,6 +19,16 @@ props:
     type: String
     examples: [xs, sm, md, lg, xl]
 
+  required:
+    desc: Controla label do campo, se for "true" adiciona sufixo "*".
+    default: false
+    type: Boolean
+
+  color:
+    desc: Cor da label.
+    default: grey-9
+    type: String
+
 slots:
   default:
     desc: Slot para acessar elemento do texto.

package/src/components/numeric-input/QasNumericInput.vue

@@ -1,13 +1,14 @@
 <template>
-  <q-field :model-value="modelValue" outlined>
+  <q-field :label="formattedLabel" :model-value="modelValue" outlined>
     <template #control="{ floatingLabel, id }">
-      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
+      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" inputmode="numeric" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
     </template>
   </q-field>
 </template>
 
 <script>
 import AutoNumeric from 'autonumeric'
+import { getRequiredLabel } from '../../helpers'
 
 const defaultModes = {
   decimal: 'commaDecimalCharDotSeparator',
@@ -25,11 +26,16 @@ export default {
       type: Object
     },
 
-    decimalPlaces: {
+    places: {
       default: 2,
       type: Number
     },
 
+    label: {
+      type: String,
+      default: ''
+    },
+
     mode: {
       default: 'integer',
       type: String,
@@ -54,6 +60,10 @@ export default {
       type: [Boolean, String]
     },
 
+    required: {
+      type: Boolean
+    },
+
     useNegative: {
       type: Boolean
     },
@@ -78,6 +88,10 @@ export default {
   computed: {
     defaultMode () {
       return defaultModes[this.mode]
+    },
+
+    formattedLabel () {
+      return getRequiredLabel({ label: this.label, required: this.required })
     }
   },
 
@@ -113,7 +127,7 @@ export default {
     }
 
     if (this.mode !== 'integer') {
-      options.decimalPlaces = this.decimalPlaces
+      options.decimalPlaces = this.places
     }
 
     if (this.mode === 'money') {

package/src/components/numeric-input/QasNumericInput.yml

@@ -12,11 +12,16 @@ props:
     default: {}
     type: Object
 
-  decimal-places:
+  places:
     desc: Quantidade de casas decimais.
     default: 2
     type: Number
 
+  label:
+    desc: Label do componente.
+    type: String
+    default: ''
+
   mode:
     desc: Modo do componente.
     default: integer
@@ -33,6 +38,11 @@ props:
     desc: Propriedade preset serve para usar configuração de predefinição/nacionalidade da moeda pré setada pelo autonumeric (Brasil é o padrão).
     type: [Boolean, String]
 
+  required:
+    desc: Controla label do campo, se for "true" adiciona sufixo "*".
+    default: false
+    type: Boolean
+
   use-negative:
     desc: Controla se pode ou não números negativos.
     default: false

package/src/components/page-header/QasPageHeader.vue

@@ -9,7 +9,7 @@
         <q-breadcrumbs v-if="useBreadcrumbs" class="text-caption" gutter="xs" separator-color="grey-8">
           <q-breadcrumbs-el v-if="useHomeIcon" class="qas-page-header__breadcrumbs-el text-grey-8" icon="sym_r_home" :to="homeRoute" />
 
-          <q-breadcrumbs-el v-for="(item, index) in normalizedBreadcrumbs" :key="index" class="qas-page-header__breadcrumbs-el" :label="item.label" :to="item.route" />
+          <q-breadcrumbs-el v-for="(item, index) in normalizedBreadcrumbs" :key="index" class="ellipsis inline-block qas-page-header__breadcrumbs-el" :label="item.label" :to="item.route" />
         </q-breadcrumbs>
       </div>
 
@@ -142,6 +142,7 @@ export default {
 <style lang="scss">
 .qas-page-header {
   &__breadcrumbs-el {
+    max-width: 180px;
     transition: color var(--qas-generic-transition);
 
     &.q-breadcrumbs__el:not(.q-router-link--exact-active):hover {

package/src/components/search-input/QasSearchInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="qas-filter-input">
-    <qas-input ref="input" v-model="model" v-bind="$attrs" class="bg-white rounded-borders-sm" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" type="search">
+    <qas-input ref="input" v-model="model" v-bind="$attrs" class="bg-white rounded-borders-sm" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" inputmode="search" type="search">
       <template #prepend>
         <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
         <qas-btn v-else color="grey-9" icon="sym_r_search" variant="tertiary" @click="$emit('filter')" />

package/src/components/select/QasSelect.vue

@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import { getRequiredLabel } from '../../helpers'
 import { uid } from 'quasar'
 import { searchFilterMixin } from '../../mixins'
 import Fuse from 'fuse.js'
@@ -45,6 +46,11 @@ export default {
       type: Object
     },
 
+    label: {
+      type: String,
+      default: ''
+    },
+
     modelValue: {
       default: () => [],
       type: [Array, Object, String, Number, Boolean]
@@ -60,6 +66,10 @@ export default {
       type: Array
     },
 
+    required: {
+      type: Boolean
+    },
+
     useFetchOptionsOnCreate: {
       default: true,
       type: Boolean
@@ -92,6 +102,7 @@ export default {
 
         ...this.$attrs,
 
+        label: this.formattedLabel,
         error: this.hasError,
         inputDebounce: this.useLazyLoading ? 1200 : 0,
         loading: this.hasLoading,
@@ -155,6 +166,10 @@ export default {
 
     popupContentClass () {
       return `qas-select__popup-content-${uid()}`
+    },
+
+    formattedLabel () {
+      return getRequiredLabel({ label: this.label, required: this.required })
     }
   },
 

package/src/components/select/QasSelect.yml

@@ -29,6 +29,11 @@ props:
       keys: [label, value]
       threshold: 0.4
 
+  label:
+    desc: Label do componente.
+    type: String
+    default: ''
+
   label-key:
     desc: O componente internamente espera receber na propriedade "options" um array de objeto contendo "label" e "value", caso o seu objeto não tenha "label" mas um "name" por exemplo, você pode definir esta prop "label-key" como "name".
     type: String
@@ -66,6 +71,11 @@ props:
     default: []
     type: Array
 
+  required:
+    desc: Controla label do campo, se for "true" adiciona sufixo "*".
+    default: false
+    type: Boolean
+
   value-key:
     desc: O componente internamente espera receber na propriedade "options" um array de objeto contendo "label" e "value", caso o seu objeto não tenha "value" mas um "uuid" por exemplo, você pode definir esta prop "label-value" como "uuid".
     type: String

package/src/components/select-list/QasSelectList.vue

@@ -83,8 +83,9 @@ export default {
   },
 
   emits: [
-    'added',
-    'removed',
+    'add',
+    'remove',
+    'clear',
     'update:modelValue'
   ],
 
@@ -167,7 +168,7 @@ export default {
       this.values.push(this.getNormalizedValue(item))
       this.updateModel()
 
-      this.$emit('added', item)
+      this.$emit('add', item)
     },
 
     handleList () {
@@ -193,7 +194,7 @@ export default {
       this.values.splice(index, 1)
       this.updateModel()
 
-      this.$emit('removed', item, index)
+      this.$emit('remove', item, index)
     },
 
     sortList () {
@@ -228,6 +229,7 @@ export default {
     },
 
     clearSelection () {
+      this.$emit('clear', this.values)
       this.values = []
       this.updateModel()
     }

package/src/components/select-list/QasSelectList.yml

@@ -76,14 +76,14 @@ slots:
         type: Function
 
 events:
-  '@added -> function(item)':
+  '@add -> function(item)':
     desc: Dispara toda vez que um item é adicionado no v-model.
     params:
       item:
         desc: Item adicionado
         type: String
 
-  '@removed -> function (item, index)':
+  '@remove -> function (item, index)':
     desc: Dispara toda vez que um item é removido do v-model.
     params:
       item:
@@ -93,6 +93,13 @@ events:
         desc: Index do item removido.
         type: Number
 
+  '@clear -> function(oldValue)':
+    desc: Dispara toda vez que o v-model é limpo através do botão de "Limpar seleção".
+    params:
+      oldValue:
+        desc: O valor do v-model anterior antes de limpá-lo.
+        type: Array
+
   '@update:model-value -> function (value)':
     desc: Dispara toda vez que o campo de busca é alterado, também utilizado para v-model.
     params:

package/src/components/sortable/QasSortable.vue

@@ -17,7 +17,6 @@ export default {
   props: {
     entity: {
       default: '',
-      required: true,
       type: String
     },
 
@@ -26,11 +25,6 @@ export default {
       type: Object
     },
 
-    list: {
-      default: () => [],
-      type: Array
-    },
-
     tag: {
       default: 'div',
       type: String
@@ -41,14 +35,19 @@ export default {
       type: String
     },
 
-    sorted: {
+    modelValue: {
       default: () => [],
       type: Array
+    },
+
+    useSaveOnSort: {
+      type: Boolean,
+      default: true
     }
   },
 
   emits: [
-    'update:sorted',
+    'update:modelValue',
     'sort',
     'success',
     'error'
@@ -72,9 +71,12 @@ export default {
       this.sortable.options = { ...this.sortable.options, ...value }
     },
 
-    list (value) {
-      this.setSortedValue(value)
-      this.sortable.sort(this.sortable.toArray())
+    modelValue: {
+      handler (newValues) {
+        this.sortedList = newValues
+      },
+
+      deep: true
     }
   },
 
@@ -132,16 +134,17 @@ export default {
       const deleted = this.sortedList.splice(oldIndex, 1)
       this.sortedList.splice(newIndex, 0, deleted[0])
 
-      this.replace()
+      this.updateModel()
+
+      this.useSaveOnSort && this.replace()
     },
 
-    setSortedValue (value) {
-      this.sortedList = extend(true, [], value || this.list)
-      this.updateSortedModel()
+    setSortedValue () {
+      this.sortedList = extend(true, [], this.modelValue)
     },
 
-    updateSortedModel () {
-      return this.$emit('update:sorted', this.sortedList)
+    updateModel () {
+      this.$emit('update:modelValue', this.sortedList)
     }
   }
 }

package/src/components/sortable/QasSortable.yml

@@ -9,21 +9,16 @@ props:
     required: true
     type: String
 
-  list:
-    desc: Lista que vai ser reordenada.
-    default: []
-    type: Array
-
   sortable-options:
     desc: Opções do "sortablejs" (https://github.com/SortableJS/Sortable#options).
     default: { animation: 500 }
     type: Object
 
-  sorted:
-    desc: Model da lista reordenada
+  model-value:
+    desc: Model do componente onde será fornecido a lista, e ele será responsável pela ordenação.
     default: []
     type: Array
-    examples: [v-model:sorted="fields"]
+    examples: [v-model="fields"]
     model: true
 
   tag:
@@ -35,6 +30,11 @@ props:
     desc: Parâmetro enviado para a action "replace".
     type: String
 
+  use-save-on-sort:
+    desc: Controla se deve bater a API para salvar após fazer uma ordenação.
+    type: Boolean
+    default: true
+
 slots:
   default:
     desc: Slot para adicionar os items que serão reordenados.
@@ -57,9 +57,9 @@ events:
         desc: fields.
         type: Object
 
-  '@update:sorted -> function(value)':
-    desc: Dispara no created e toda vez que a prop "list" muda, usado para o v-model:sorted.
+  '@update:model-value -> function(values)':
+    desc: Dispara quando o model-value altera, após acontecer uma ordenação.
     params:
-      value:
-        desc: Lista contendo nova ordenação.
+      values:
+        desc: Novo valor do model.
         type: Array

package/src/components/text-truncate/QasTextTruncate.vue

@@ -5,7 +5,7 @@
         <slot>{{ text }}</slot>
       </div>
 
-      <div v-if="isTruncated" class="cursor-pointer text-primary" @click.stop="toggle">
+      <div v-if="isTruncated" class="cursor-pointer text-primary" @click.stop.prevent="toggle">
         {{ seeMoreLabel }}
       </div>
     </div>

package/src/components/tree-generator/QasTreeGenerator.vue

@@ -9,7 +9,7 @@
 
           <span v-if="hasMenuButton(node)" class="q-ml-sm">
             <!-- TODO: rever para o uso QasActionsMenu -->
-            <qas-btn color="grey-9" icon="sym_r_more_vert" variant="tertiary" @click.stop>
+            <qas-btn color="grey-9" icon="sym_r_more_vert" variant="tertiary" @click.stop.prevent>
               <q-menu auto-close>
                 <q-list separator>
                   <q-item v-if="useAddButton" v-ripple class="qas-tree-generator__item" clickable @click="handleTreeFormDialog(node, true, tree)">

package/src/components/welcome/QasWelcome.vue

@@ -1,13 +1,21 @@
 <template>
   <div class="q-mb-xl qas-welcome text-left">
-    <h3 class="text-grey-9 text-h3">
-      {{ welcomeMessage }}<span v-if="firstName">, {{ firstName }}</span>
-    </h3>
+    <div class="items-center justify-between row">
+      <div>
+        <h3 class="text-grey-9 text-h3">
+          {{ welcomeMessage }}<span v-if="firstName">, {{ firstName }}</span>
+        </h3>
 
-    <div class="text-caption text-grey-8">{{ currentDay }}</div>
+        <div class="text-caption text-grey-8">{{ currentDay }}</div>
+      </div>
+
+      <slot name="actions">
+        <qas-actions-menu v-if="hasActionsMenuProps" v-bind="actionsMenuProps" />
+      </slot>
+    </div>
 
     <div v-if="hasShortcuts">
-      <div class="q-mb-md q-mt-md text-grey-9 text-subtitle2">Atalhos</div>
+      <qas-label class="q-mt-lg" label="Atalhos" />
 
       <div class="qas-welcome__container">
         <div ref="scrollArea" class="row" :class="contentClasses">
@@ -34,6 +42,11 @@ export default {
   },
 
   props: {
+    actionsMenuProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     name: {
       default: '',
       type: String
@@ -68,6 +81,10 @@ export default {
       return this.name.split(' ')?.[0]
     },
 
+    hasActionsMenuProps () {
+      return !!Object.keys(this.actionsMenuProps).length
+    },
+
     hasShortcuts () {
       return !!this.shortcuts.length
     },

package/src/components/welcome/QasWelcome.yml

@@ -4,6 +4,11 @@ meta:
   desc: Componente de boas-vindas para ser usado na Home dos sistemas.
 
 props:
+  actions-menu-props:
+    desc: Propriedades repassadas para o QasActionsMenu.
+    default: {}
+    type: Object
+
   name:
     desc: Nome do usuário a ser mostrado na tela.
     type: String
@@ -12,3 +17,7 @@ props:
     desc: Lista de cards de atalhos.
     default: []
     type: Array
+
+slots:
+  actions:
+    desc: Slot para substituir o QasActionsMenu.

package/src/css/base/font-face.scss

@@ -0,0 +1,28 @@
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+.icons-is-loading {
+  .material-symbols-rounded {
+    position: relative;
+    color: transparent;
+
+    &::before {
+      content: '';
+      background-image: url('~@bildvitta/quasar-ui-asteroid/src/assets/icon-loading.svg');
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      animation: rotation 1s infinite linear;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+}

package/src/css/base/index.scss

@@ -0,0 +1 @@
+@import './font-face';

package/src/css/components/button.scss

@@ -39,7 +39,7 @@
     position: relative;
 
     &:disabled {
-      color: $grey-8 !important;
+      color: $grey-6 !important;
     }
   }
 
@@ -58,7 +58,7 @@
     padding: 0 !important;
 
     &:disabled {
-      color: $grey-8 !important;
+      color: $grey-6 !important;
     }
 
     &-grey-9 {

package/src/helpers/get-required-label.js

@@ -0,0 +1,3 @@
+export default function getRequiredLabel ({ label, required }) {
+  return required ? `${label}*` : label
+}

package/src/helpers/index.js

@@ -11,6 +11,7 @@ export { default as filterObjectToArray } from './filter-object-to-array.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 getRequiredLabel } from './get-required-label.js'
 export { default as getSlotChildrenText } from './get-slot-children-text.js'
 export { default as handleProcess } from './handle-process.js'
 export { default as isEmpty } from './is-empty.js'

package/src/index.scss

@@ -19,6 +19,9 @@ $background-color: var(--qas-background-color);
 $generic-border-radius: var(--qas-generic-border-radius);
 $border-grey: var(--qas-border-grey);
 
+// base
+@import './css/base/index';
+
 // variables
 @import './css/variables/index';
 

package/src/mixins/search-filter.js

@@ -92,7 +92,7 @@ export default {
   watch: {
     'lazyLoadingProps.params': {
       handler (newParams, oldParams) {
-        if (isEqual(newParams, oldParams)) return
+        if (!this.useLazyLoading || isEqual(newParams, oldParams)) return
 
         this.mx_cachedOptions = []
 

package/src/plugins/delete/Delete.js

@@ -20,11 +20,20 @@ export default function (config = {}) {
   const { entity, id, url } = deleteActionParams
 
   const defaultDialogProps = {
-    card: { description: 'Tem certeza que deseja excluir este item?' },
+    ...dialogProps,
 
-    ok: { label: 'Excluir', onClick: () => destroy.call(this) },
+    card: {
+      description: 'Tem certeza que deseja excluir este item?',
 
-    ...dialogProps
+      ...dialogProps.card
+    },
+
+    ok: {
+      label: 'Excluir',
+      onClick: () => destroy.call(this),
+
+      ...dialogProps.ok
+    }
   }
 
   const defaultNotifyMessages = {