@bildvitta/quasar-ui-asteroid 3.17.0 → 3.18.0-beta.0

package/package.json

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

package/src/components/badge/QasBadge.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="component.is" v-bind="component.props" class="q-px-sm qas-badge text-caption">
+  <component :is="component.is" v-bind="component.props" class="q-px-sm qas-badge text-body2">
     <slot />
   </component>
 </template>

package/src/components/checkbox/QasCheckbox.vue

@@ -7,7 +7,7 @@
 
     <!-- Group -->
     <div v-else>
-      <div v-if="hasCheckboxLabel" class="q-mb-sm text-body1" :class="checkboxLabelClasses">
+      <div v-if="props.label" class="q-mb-sm text-body1" :class="labelClasses">
         {{ formattedLabel }}
       </div>
 
@@ -25,14 +25,14 @@
       </div>
     </div>
 
-    <div v-if="props.errorMessage" class="q-pt-sm qas-checkbox__error-message text-negative">
-      {{ props.errorMessage }}
-    </div>
+    <qas-error-message v-if="props.errorMessage" :message="props.errorMessage" />
   </div>
 </template>
 
 <script setup>
+import useErrorMessage, { baseErrorProps } from '../../composables/private/use-error-message'
 import { getRequiredLabel } from '../../helpers'
+
 import { watch, computed, ref, onMounted, useAttrs } from 'vue'
 
 defineOptions({
@@ -41,6 +41,8 @@ defineOptions({
 })
 
 const props = defineProps({
+  ...baseErrorProps,
+
   label: {
     default: '',
     type: String
@@ -61,35 +63,29 @@ const props = defineProps({
     type: Boolean
   },
 
-  errorMessage: {
-    type: String,
-    default: ''
-  },
-
-  error: {
-    type: Boolean
-  },
-
   required: {
     type: Boolean
   }
 })
 
+// emits
 const emit = defineEmits(['update:modelValue'])
 
+// globals
 const attrs = useAttrs()
 
+// composables
+const { labelClasses } = useErrorMessage(props)
+
 // refs
 const group = ref({})
 
-// lifecycle
+// hooks
 onMounted(handleParent)
 
 // computed
 const classes = computed(() => props.inline && 'flex q-gutter-x-sm')
 
-const hasCheckboxLabel = computed(() => !!props.label)
-
 const model = computed({
   get () {
     return props.modelValue
@@ -110,10 +106,6 @@ const singleAttributes = computed(() => {
   }
 })
 
-const checkboxLabelClasses = computed(() => {
-  return { 'text-negative': props.error }
-})
-
 const formattedLabel = computed(() => {
   return getRequiredLabel({ label: props.label, required: props.required })
 })
@@ -174,12 +166,3 @@ function getModelValue (index) {
   return group.value[index]
 }
 </script>
-
-<style lang="scss">
-.qas-checkbox {
-  &__error-message {
-    // Tamanho da fonte utilizada nos errors no q-field.
-    font-size: 11px;
-  }
-}
-</style>

package/src/components/error-message/QasErrorMessage.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="qas-error-message">
+    {{ props.message }}
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'QasErrorMessage' })
+
+const props = defineProps({
+  message: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style lang="scss">
+// $
+.qas-error-message {
+  @include set-error-message;
+}
+</style>

package/src/components/error-message/QasErrorMessage.yml

@@ -0,0 +1,9 @@
+type: component
+
+meta:
+  desc: Componente para mensagem de erro como em inputs, radio, checkbox, uploader, etc.
+
+props:
+  message:
+    desc: Mensagem de erro que será exibida.
+    type: String

package/src/components/expansion-item/QasExpansionItem.vue

@@ -36,15 +36,15 @@
       </q-expansion-item>
     </qas-box>
 
-    <div v-if="hasError" class="q-pt-sm qas-expansion-item__error-message text-caption text-negative">
-      {{ props.errorMessage }}
-    </div>
+    <qas-error-message v-if="hasError" :message="props.errorMessage" />
   </div>
 </template>
 
 <script setup>
 import QasBox from '../box/QasBox.vue'
 
+import { baseErrorProps } from '../../composables/private/use-error-message'
+
 import { computed, provide, inject, ref, useAttrs } from 'vue'
 
 defineOptions({
@@ -53,6 +53,8 @@ defineOptions({
 })
 
 const props = defineProps({
+  ...baseErrorProps,
+
   badges: {
     type: Array,
     default: () => []
@@ -66,15 +68,6 @@ const props = defineProps({
     type: Boolean
   },
 
-  error: {
-    type: Boolean
-  },
-
-  errorMessage: {
-    type: String,
-    default: ''
-  },
-
   gridGeneratorProps: {
     type: Object,
     default: () => ({})
@@ -205,12 +198,17 @@ function setShowContent () {
   }
 
   &--error {
-    #{$root}__box {
-      border: 2px solid $negative !important;
+    #{$root}__header {
+      color: $negative;
+
+      .qas-label,
+      .qas-btn {
+        color: $negative !important;
+      }
     }
 
-    #{$root}__error-message {
-      padding-left: 12px; // espaçamento igual ao de erro do quasar.
+    #{$root}__box {
+      border: 1px solid $negative !important;
     }
   }
 

package/src/components/input/QasInput.vue

@@ -1,10 +1,10 @@
 <template>
   <q-input ref="input" v-model="model" :autogrow="isTextarea" bottom-slots :class="classes" :counter="hasCounter" :dense="dense" :error="errorData" v-bind="$attrs" :error-message="errorMessage" :inputmode="defaultInputmode" :label="formattedLabel" :mask="currentMask" no-error-icon :outlined="outlined" :placeholder="placeholder" :unmasked-value="unmaskedValue" @paste="onPaste">
-    <template v-if="icon" #append>
+    <template v-if="icon" #prepend>
       <q-icon :name="icon" size="xs" />
     </template>
 
-    <template v-if="iconRight" #prepend>
+    <template v-if="iconRight" #append>
       <q-icon :name="iconRight" size="xs" />
     </template>
 
@@ -163,7 +163,7 @@ export default {
     },
 
     hasPrepend () {
-      return !!this.$slots.prepend || this.iconRight
+      return !!this.$slots.prepend || this.icon
     }
   },
 

package/src/components/label/QasLabel.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="props.typography" :class="classes">
+  <component :is="props.typography" class="qas-label" :class="classes">
     <slot :label-with-suffix="formattedLabel">{{ formattedLabel }}</slot>
   </component>
 </template>

package/src/components/radio/QasRadio.vue

@@ -1,14 +1,18 @@
 <template>
   <div>
-    <div v-if="canShowOptionGroupLabel" class="q-mb-sm text-body1">
+    <div v-if="canShowOptionGroupLabel" class="q-mb-sm text-body1" :class="labelClasses">
       {{ props.label }}
     </div>
 
     <component :is="component.is" v-bind="component.props" />
+
+    <qas-error-message v-if="props.errorMessage" :message="props.errorMessage" />
   </div>
 </template>
 
 <script setup>
+import useErrorMessage, { baseErrorProps } from '../../composables/private/use-error-message'
+
 import { computed, useAttrs } from 'vue'
 
 defineOptions({
@@ -17,17 +21,26 @@ defineOptions({
 })
 
 const props = defineProps({
+  ...baseErrorProps,
+
   label: {
     default: '',
     type: String
   }
 })
 
+// globals
 const attrs = useAttrs()
 
+// composables
+const { labelClasses } = useErrorMessage(props)
+
+// computeds
 const isOptionGroup = computed(() => !!attrs.options?.length)
 
-// Só mostra a label caso for q-option-group e tenha label vindo nas props
+/**
+ * Só mostra a label caso for q-option-group e tenha label vindo nas props
+ */
 const canShowOptionGroupLabel = computed(() => isOptionGroup.value && !!props.label)
 
 /**

package/src/components/radio/QasRadio.yml

@@ -1,6 +1,14 @@
 type: component
 
 props:
+  error:
+    desc: Booleano que caso seja true a label passa a ter a cor vermelha.
+    type: Boolean
+
+  error-message:
+    desc: Mensagem de erro exibida na parte inferior do checkbox.
+    type: String
+
   label:
     desc: Label utilizada em casos de ser q-option-group.
     default: ''
@@ -8,4 +16,3 @@ props:
 
 meta:
   desc: Componente wrapper do QRadio.
-

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

@@ -1,19 +1,17 @@
 <template>
-  <component :is="component" class="qas-search-input" :class="containerClasses" :use-spacing="false">
-    <qas-input ref="input" v-model="model" class="qas-search-input__input" v-bind="$attrs" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" inputmode="search" outlined type="search">
-      <template #prepend>
-        <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
+  <qas-input ref="input" v-model="model" class="qas-search-input" :class="classes" v-bind="$attrs" data-cy="search-input" :debounce hide-bottom-space input-class="ellipsis text-grey-8" inputmode="search" outlined type="search">
+    <template #prepend>
+      <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
 
-        <qas-btn v-else color="grey-10" icon="sym_r_search" variant="tertiary" @click="$emit('filter')" />
-      </template>
+      <qas-btn v-else color="grey-10" icon="sym_r_search" variant="tertiary" @click="$emit('filter')" />
+    </template>
 
-      <template #append>
-        <qas-btn v-if="hasSearch" color="grey-10" icon="sym_r_clear" variant="tertiary" @click="clear" />
+    <template #append>
+      <qas-btn v-if="hasSearch" color="grey-10" icon="sym_r_clear" variant="tertiary" @click="clear" />
 
-        <slot name="after-clear" />
-      </template>
-    </qas-input>
-  </component>
+      <slot name="after-clear" />
+    </template>
+  </qas-input>
 </template>
 
 <script>
@@ -51,20 +49,15 @@ export default {
   ],
 
   computed: {
-    component () {
-      return this.isBoxOrDialog ? 'div' : 'qas-box'
-    },
+    classes () {
+      const bordered = this.isBox || this.isDialog
 
-    containerClasses () {
       return {
-        bordered: this.isBoxOrDialog
+        'qas-search-input--border': bordered,
+        'qas-search-input--shadow': !bordered
       }
     },
 
-    isBoxOrDialog () {
-      return this.isBox || this.isDialog
-    },
-
     debounce () {
       return this.useDebounce ? '1200' : ''
     },
@@ -96,11 +89,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.qas-search-input {
-  .qas-search-input__input .q-field__control:before {
-    border: 0;
-  }
-}
-</style>

package/src/components/select/QasSelect.vue

@@ -160,6 +160,8 @@ export default {
 
   computed: {
     attributes () {
+      const { useChips, ...attrs } = this.$attrs
+
       return {
         clearable: this.isSearchable,
         emitValue: true,
@@ -171,7 +173,7 @@ export default {
         popupContentClass: `qas-select__menu ${this.popupContentClass}`,
         useChips: this.isMultiple && this.isPopupContentOpen,
 
-        ...this.$attrs,
+        ...attrs,
 
         label: this.formattedLabel,
         error: this.hasError,
@@ -202,10 +204,6 @@ export default {
       return this.hasFuse || this.useLazyLoading
     },
 
-    isBordered () {
-      return (this.isBox || this.isDialog) && this.useFilterMode
-    },
-
     hasError () {
       return this.mx_hasFetchError || this.$attrs.error
     },
@@ -261,11 +259,14 @@ export default {
 
     // redesign
     componentClasses () {
+      const isBordered = (this.isBox || this.isDialog) && this.useFilterMode
+
+      // estilos definidos no arquivo field.scss
       return {
         ...(this.useFilterMode && {
-          'qas-select--filter rounded-borders': true,
-          'shadow-2': !this.isBordered,
-          bordered: this.isBordered
+          'qas-select--filter': true,
+          'qas-select--filter-border': isBordered,
+          'qas-select--filter-shadow': !isBordered
         }),
 
         'qas-select--has-icon': this.hasAppend || this.hasIcon,
@@ -470,12 +471,6 @@ export default {
     }
   }
 
-  &--filter {
-    .q-field__control:before {
-      border: 0;
-    }
-  }
-
   &__menu {
     .q-item {
       font-weight: 400 !important;
@@ -508,14 +503,7 @@ export default {
     }
   }
 
-  .q-field__focusable-action {
-    opacity: 1;
-  }
-
-  .q-chip {
-    font-size: 11px;
-  }
-
+  .q-field__focusable-action,
   .q-chip__icon--remove {
     opacity: 1;
   }

package/src/components/select-filter/QasSelectFilter.vue

@@ -40,7 +40,7 @@ const model = defineModel({ type: String, default: '' })
 const internalModel = ref(route.query[props.name] || model.value)
 
 // watch
-watch(() => route.query[props.name], setModels)
+watch(() => route.query[props.name], setModels, { immediate: true })
 
 // functions
 /**

package/src/components/table-generator/QasTableGenerator.vue

@@ -52,6 +52,11 @@ export default {
       type: Object
     },
 
+    maxHeight: {
+      type: String,
+      default: '528px'
+    },
+
     results: {
       default: () => [],
       required: true,
@@ -86,9 +91,8 @@ export default {
       type: Boolean
     },
 
-    stickyHeaderTableHeight: {
-      default: '528px',
-      type: String
+    useVirtualScroll: {
+      type: Boolean
     }
   },
 
@@ -139,7 +143,7 @@ export default {
     attributes () {
       const attributes = {
         tableClass: {
-          'overflow-hidden-y': !this.useStickyHeader
+          'overflow-hidden-y': !this.useStickyHeader && !this.useVirtualScroll
         },
         class: this.tableClass,
         columns: this.columnsByFields,
@@ -149,6 +153,7 @@ export default {
         rowKey: this.rowKey,
         rows: this.resultsByFields,
         style: this.tableStyle,
+        virtualScroll: this.useVirtualScroll,
 
         // Eventos.
         onRowClick: this.$attrs.onRowClick && this.onRowClick
@@ -234,7 +239,7 @@ export default {
 
     tableStyle () {
       return {
-        maxHeight: this.useStickyHeader ? this.stickyHeaderTableHeight : 'initial'
+        ...((this.useStickyHeader || this.useVirtualScroll) && { maxHeight: this.maxHeight })
       }
     },
 

package/src/components/table-generator/QasTableGenerator.yml

@@ -26,6 +26,11 @@ props:
     type: Object
     examples: ["{ description: 'Descrição', labelProps: { label: 'Titulo do header'} }"]
 
+  max-height:
+    desc: Usado para definir a altura máxima da tabela e exibir o scroll vertical. Somente funciona quando a propriedade "use-sticky-header" ou "use-virtual-scroll" é utilizada.
+    default: '528px'
+    type: String
+
   results:
     desc: Lista com resultados para serem mostrados na tabela.
     default: {}
@@ -62,10 +67,10 @@ props:
     default: false
     type: Boolean
 
-  sticky-header-table-height:
-    desc: Usado para definir a altura máxima da tabela e exibir o scroll vertical quando a propriedade "use-sticky-header" é utilizada.
-    default: 528px
-    type: String
+  use-virtual-scroll:
+    desc: Usado para ativar o scroll virtual da tabela.
+    default: false
+    type: Boolean
 
 slots:
   body:

package/src/components/uploader/QasUploader.vue

@@ -15,10 +15,6 @@
             </template>
           </qas-header>
 
-          <div v-if="errorMessage" class="q-mt-xs text-caption text-negative">
-            {{ errorMessage }}
-          </div>
-
           <!-- ------------------------------------ tags hidden -------------------------------------- -->
           <input ref="hiddenInput" :accept="attributes.accept" class="qas-uploader__input" :multiple="isMultiple" type="file">
           <qas-btn ref="buttonCleanFiles" class="hidden" @click="scope.removeUploadedFiles" />
@@ -33,6 +29,8 @@
         </div>
 
         <qas-empty-result-text v-else />
+
+        <qas-error-message v-if="errorMessage" :message="errorMessage" />
       </template>
     </q-uploader>
 
@@ -44,9 +42,11 @@
 import PvUploaderGalleryCard from './private/PvUploaderGalleryCard.vue'
 import QasHeader from '../header/QasHeader.vue'
 
+import { baseErrorProps } from '../../composables/private/use-error-message'
+import { getImageSize, getResizeDimensions } from '../../helpers/images.js'
+
 import { uid, extend } from 'quasar'
 import { NotifyError } from '../../plugins'
-import { getImageSize, getResizeDimensions } from '../../helpers/images.js'
 
 import Pica from 'pica'
 
@@ -61,6 +61,8 @@ export default {
   inheritAttrs: false,
 
   props: {
+    ...baseErrorProps,
+
     addButtonFn: {
       type: Function,
       default: undefined
@@ -98,15 +100,6 @@ export default {
       type: String
     },
 
-    error: {
-      type: Boolean
-    },
-
-    errorMessage: {
-      default: '',
-      type: String
-    },
-
     fields: {
       default: () => ({}),
       type: Object

package/src/composables/private/index.js

@@ -1,4 +1,5 @@
-export { default as useView } from './use-view'
+export { default as useAuthUser } from './use-auth-user'
+export { default as useErrorMessage } from './use-error-message'
 export { default as useGenerator } from './use-generator'
 export { default as useToggleVisibility } from './use-toggle-visibility'
-export { default as useAuthUser } from './use-auth-user'
+export { default as useView } from './use-view'

package/src/composables/private/use-error-message.js

@@ -0,0 +1,25 @@
+import { computed } from 'vue'
+
+export const baseErrorProps = {
+  errorMessage: {
+    type: String,
+    default: ''
+  },
+
+  error: {
+    type: Boolean
+  }
+}
+
+/**
+ * Composable para lidar com mensagens de erro
+ *
+ * @param {baseErrorProps} props
+ */
+export default function useErrorMessage (props) {
+  const labelClasses = computed(() => ({ 'text-negative': props.error }))
+
+  return {
+    labelClasses
+  }
+}

package/src/css/components/field.scss

@@ -7,8 +7,21 @@
     transition: transform var(--qas-generic-transition);
   }
 
+  &--standard &__control:hover::before {
+    border-color: var(--q-primary-contrast) !important;
+  }
+
+  &--standard &__control::after {
+    height: 1px;
+  }
+
+  &--outlined &__control::after,
+  &--outlined.q-field--highlighted &__control::after {
+    border-width: 1px !important;
+  }
+
   .q-field__label {
-    will-change: transform;
+    will-change: transform, font-size;
   }
 
   &__label,
@@ -16,6 +29,23 @@
     @include set-typography($body2);
   }
 
+  // pega o ícone imediato dos append e prepend, não os do q-chip por exemplo.
+  &--error {
+    .q-field__input,
+    .q-field__native {
+      color: $negative !important;
+    }
+
+    .q-field__marginal > .q-icon,
+    .q-field__marginal > .qas-btn .q-icon {
+      color: $negative !important;
+    }
+
+    .q-field__bottom {
+      @include set-error-message;
+    }
+  }
+
   &--dense {
     .q-textarea {
       height: 100%;
@@ -42,6 +72,7 @@
   // Somente fields com label
   &--float.q-field--labeled,
   &--focused.q-field--labeled {
+    will-change: transform, font-size;
     transition: transform var(--qas-generic-transition), font-size var(--qas-generic-transition);
 
     &:not(&.qas-select--filter):not(&.qas-select--has-icon) .q-field__label {
@@ -85,4 +116,40 @@
     background-color: white;
     border-radius: $generic-border-radius;
   }
+
+  // logica referente ao modo filtro
+  &.qas-search-input,
+  &.qas-select--filter {
+    .q-field__control::before {
+      transition: border var(--qas-generic-transition);
+    }
+
+    &:not(&.q-field--error):not(&.q-field--highlighted):hover {
+      .q-field__control::after {
+        border-color: var(--q-primary-contrast);
+      }
+    }
+
+    .q-field__control {
+      border-radius: $generic-border-radius;
+    }
+
+    .q-field__control::before {
+      border: 0;
+    }
+  }
+
+  &.qas-search-input--shadow,
+  &.qas-select--filter-shadow {
+    .q-field__control {
+      box-shadow: $shadow-2;
+    }
+  }
+
+  &.qas-search-input--border,
+  &.qas-select--filter-border {
+    .q-field__control {
+      @extend .bordered;
+    }
+  }
 }

package/src/css/mixins/index.scss

@@ -1,3 +1,4 @@
 @import './set-button';
 @import './set-brand';
 @import './set-typography';
+@import './set-error-message';

package/src/css/mixins/set-error-message.scss

@@ -0,0 +1,8 @@
+@import '../variables/typography.scss';
+
+@mixin set-error-message ($important: false) {
+  @include set-typography($caption, $important);
+
+  padding-top: if($important, var(--qas-spacing-sm) !important, var(--qas-spacing-sm));
+  color: if($important, $negative !important, $negative);
+}

package/src/vue-plugin.js

@@ -24,6 +24,7 @@ import QasDialog from './components/dialog/QasDialog.vue'
 import QasDialogRouter from './components/dialog-router/QasDialogRouter.vue'
 import QasDrawer from './components/drawer/QasDrawer.vue'
 import QasEmptyResultText from './components/empty-result-text/QasEmptyResultText.vue'
+import QasErrorMessage from './components/error-message/QasErrorMessage.vue'
 import QasExpansionItem from './components/expansion-item/QasExpansionItem.vue'
 import QasField from './components/field/QasField.vue'
 import QasFilters from './components/filters/QasFilters.vue'
@@ -123,6 +124,7 @@ async function install (app) {
   app.component('QasDialogRouter', QasDialogRouter)
   app.component('QasDrawer', QasDrawer)
   app.component('QasEmptyResultText', QasEmptyResultText)
+  app.component('QasErrorMessage', QasErrorMessage)
   app.component('QasExpansionItem', QasExpansionItem)
   app.component('QasField', QasField)
   app.component('QasFilters', QasFilters)
@@ -224,6 +226,7 @@ export {
   QasDialogRouter,
   QasDrawer,
   QasEmptyResultText,
+  QasErrorMessage,
   QasExpansionItem,
   QasField,
   QasFilters,