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

package/src/components/radio/QasRadio.vue

@@ -1,14 +1,17 @@
 <template>
-  <div>
-    <div v-if="canShowOptionGroupLabel" class="q-mb-sm text-body1">
-      {{ props.label }}
-    </div>
+  <div class="qas-radio">
+    <qas-label v-if="canShowOptionGroupLabel" :color :label="props.label" margin="sm" typography="h5" />
 
     <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 useScreen from '../../composables/use-screen'
+
 import { computed, useAttrs } from 'vue'
 
 defineOptions({
@@ -17,17 +20,27 @@ defineOptions({
 })
 
 const props = defineProps({
+  ...baseErrorProps,
+
   label: {
     default: '',
     type: String
   }
 })
 
+// globals
 const attrs = useAttrs()
 
+// composables
+const { color } = useErrorMessage(props)
+const screen = useScreen()
+
+// 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)
 
 /**
@@ -37,21 +50,23 @@ const canShowOptionGroupLabel = computed(() => isOptionGroup.value && !!props.la
  * - todos os casos é usado o dense.
  */
 const component = computed(() => {
-  const { inline = true, ...payloadProps } = attrs
+  const isInline = !screen.isSmall
+
+  const { ...payloadProps } = attrs
 
   return {
     is: isOptionGroup.value ? 'q-option-group' : 'q-radio',
 
     props: {
       ...payloadProps,
-
       label: props.label,
 
       ...(isOptionGroup.value && {
-        inline,
+        inline: isInline,
         class: {
-          'q-gutter-x-md': inline,
-          'q-gutter-y-md': !inline
+          flex: true,
+          'q-gutter-md': true,
+          column: !isInline
         }
       }),
 
@@ -60,3 +75,34 @@ const component = computed(() => {
   }
 })
 </script>
+
+<style lang="scss">
+.qas-radio {
+  .q-radio {
+    &__label {
+      @include set-typography($body1);
+
+      padding-left: var(--qas-spacing-sm) !important;
+    }
+
+    &__inner {
+      width: 18px;
+      height: 18px;
+      min-width: 18px;
+
+      &::before {
+        color: $primary;
+      }
+    }
+
+    &.disabled {
+      opacity: 1 !important;
+
+      .q-radio__label,
+      .q-radio__inner {
+        color: $grey-6;
+      }
+    }
+  }
+}
+</style>

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,15 +471,17 @@ export default {
     }
   }
 
-  &--filter {
-    .q-field__control:before {
-      border: 0;
+  &__menu {
+    padding: var(--qas-spacing-sm) var(--qas-spacing-md);
+
+    .q-item + .q-item {
+      border-top: 1px solid $grey-4 !important;
     }
-  }
 
-  &__menu {
     .q-item {
       font-weight: 400 !important;
+      padding-left: 0;
+      padding-right: 0;
     }
   }
 
@@ -503,19 +506,26 @@ export default {
 
   .q-field__prepend,
   .q-field__append {
-    .q-icon {
+    .q-icon:not(button) {
       color: $grey-8;
     }
-  }
-
-  .q-field__focusable-action {
-    opacity: 1;
-  }
 
-  .q-chip {
-    font-size: 11px;
+    button.q-icon {
+      @include set-button(
+        tertiary,
+        false,
+        false,
+        grey-10
+      );
+
+      // necessários para sobrescrever os tamanhos aplicados pelo set-button
+      width: 18px !important;
+      height: 18px !important;
+      min-height: 18px !important;
+    }
   }
 
+  .q-field__focusable-action,
   .q-chip__icon--remove {
     opacity: 1;
   }

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

@@ -1,5 +1,5 @@
 <template>
-  <qas-select v-model="internalModel" :label="props.label" :options="props.options" use-filter-mode @update:model-value="onUpdateModel" />
+  <qas-select v-model="internalModel" :label="props.label" :multiple="props.multiple" :options="props.options" use-filter-mode @update:model-value="onUpdateModel" />
 </template>
 
 <script setup>
@@ -25,22 +25,26 @@ const props = defineProps({
   options: {
     type: Array,
     default: () => []
+  },
+
+  multiple: {
+    type: Boolean
   }
 })
 
+// models
+const model = defineModel({ type: [String, Array], default: '' })
+
 // composables
 const router = useRouter()
 const route = useRoute()
 const { setFilterQuery, triggerDefaultFiltersChange, filterQuery } = useDefaultFilters()
 
-// models
-const model = defineModel({ type: String, default: '' })
-
 // refs
-const internalModel = ref(route.query[props.name] || model.value)
+const internalModel = ref(getDefaultInternalFilters())
 
 // watch
-watch(() => route.query[props.name], setModels)
+watch(() => route.query[props.name], onQueryChange, { immediate: true })
 
 // functions
 /**
@@ -62,4 +66,27 @@ function setModels (value) {
   setFilterQuery(value, props.name)
   nextTick(() => triggerDefaultFiltersChange(filterQuery.value, oldFilters))
 }
+
+function getDefaultInternalFilters () {
+  return getNormalizedQuery(route.query[props.name]) || model.value
+}
+
+/**
+ * Retorna o valor da query normalizado, se for multiple retorna um array, se não retorna o valor.
+ */
+function getNormalizedQuery (query) {
+  if (!query) return
+
+  if (props.multiple) {
+    return Array.isArray(query) ? query : [query]
+  }
+
+  return query
+}
+
+function onQueryChange (query) {
+  const normalizedQuery = getNormalizedQuery(query)
+
+  setModels(normalizedQuery)
+}
 </script>

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

@@ -21,6 +21,11 @@ props:
     examples: [v-model"value"]
     model: true
 
+  multiple:
+    desc: Habilita multi-seleção.
+    default: false
+    type: Boolean
+
   options:
     desc: Opções para gerar os checkbox.
     default: []

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

@@ -1,19 +1,19 @@
 <template>
   <qas-search-box ref="searchBox" v-model:results="results" v-bind="defaultSearchBoxProps" :list="sortedList">
     <template #after-search>
-      <div class="q-mb-md q-mt-xl">
-        <span class="q-pr-sm text-body1 text-grey-8">Seleção:</span>
-
-        <qas-btn :disable="isClearSelectionDisabled" label="Limpar seleção" variant="tertiary" @click="clearSelection" />
+      <div class="q-my-md">
+        <qas-btn color="grey-10" :disable="isClearSelectionDisabled" icon="sym_r_close" label="Limpar seleção" variant="tertiary" @click="clearSelection" />
       </div>
     </template>
 
     <template #default>
-      <q-list class="bg-white rounded-borders" separator>
+      <q-list class="bg-white q-py-sm rounded-borders" separator>
         <q-item v-for="result in results" :key="result.value" class="q-px-none" tag="label">
           <slot v-bind="slotData" :item="result" name="item">
             <q-item-section>
-              <pv-select-list-checkbox :readonly="readonly" :result="result" :use-active="hasValueInModel(result.value)" @add="add" @remove="remove" />
+              <q-item-label>
+                <pv-select-list-checkbox :readonly="readonly" :result="result" :use-active="hasValueInModel(result.value)" @add="add" @remove="remove" />
+              </q-item-label>
             </q-item-section>
           </slot>
         </q-item>

package/src/components/select-list/private/PvSelectListCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-checkbox class="text-body1" dense :disable="props.readonly" :label="props.result.label" :model-value="props.useActive" @update:model-value="onUpdateModelValue(result)" />
+  <qas-checkbox dense :disable="props.readonly" :label="props.result.label" :model-value="props.useActive" @update:model-value="onUpdateModelValue(result)" />
 </template>
 
 <script setup>

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/toggle/QasToggle.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-toggle v-bind="attrs" dense />
+  <q-toggle class="qas-toggle" v-bind="attrs" dense />
 </template>
 
 <script setup>
@@ -12,3 +12,28 @@ defineOptions({
 
 const attrs = useAttrs()
 </script>
+
+<style lang="scss">
+.qas-toggle {
+  &.q-toggle {
+    .q-toggle__label {
+      @include set-typography($body1);
+
+      padding-left: var(--qas-spacing-sm) !important;
+    }
+
+    &.disabled {
+      opacity: 1 !important;
+
+      .q-toggle__inner,
+      .q-toggle__label {
+        color: $grey-6;
+      }
+
+      .q-toggle__thumb::after {
+        background-color: $grey-6;
+      }
+    }
+  }
+}
+</style>

package/src/components/toggle-visibility/QasToggleVisibility.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="qas-toggle-visibility">
-    <div class="items-center no-wrap row" :style>
+    <div :aria-expanded="isVisible" aria-label="Alternar visibilidade do conteúdo" class="cursor-pointer items-center no-wrap qas-toggle-visibility__container row" role="button" :style @click.prevent.stop="toggleVisibility">
       <div class="ellipsis qas-toggle-visibility__content">
         <div
           v-if="isVisible"
@@ -14,15 +14,12 @@
 
         <q-separator
           v-else
+          class="qas-toggle-visibility__separator"
           size="4px"
         />
       </div>
 
-      <qas-btn
-        class="q-ml-sm qas-toggle-visibility__button"
-        :icon
-        @click.prevent.stop="toggleVisibility"
-      />
+      <qas-btn class="q-ml-sm qas-toggle-visibility__button" :icon />
     </div>
   </div>
 </template>
@@ -68,6 +65,18 @@ const style = computed(() => ({ width: props.width }))
 
 <style lang="scss">
 .qas-toggle-visibility {
+  &__separator {
+    border-radius: var(--qas-generic-border-radius);
+  }
+
+  &__container:hover .qas-toggle-visibility__separator {
+    background-color: var(--q-primary-contrast);
+  }
+
+  &__container:hover .qas-toggle-visibility__button {
+    color: var(--q-primary-contrast) !important;
+  }
+
   &__content {
     flex-grow: 1;
   }

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

@@ -17,7 +17,11 @@
                       <q-icon name="sym_r_add_circle_outline" />
                     </q-item-section>
 
-                    <q-item-section>Adicionar subnível</q-item-section>
+                    <q-item-section>
+                      <q-item-label>
+                        Adicionar subnível
+                      </q-item-label>
+                    </q-item-section>
                   </q-item>
 
                   <q-item v-if="useEditButton" v-ripple class="qas-tree-generator__item" clickable @click="handleTreeFormDialog(node)">
@@ -25,7 +29,11 @@
                       <q-icon name="sym_r_edit" />
                     </q-item-section>
 
-                    <q-item-section>Editar</q-item-section>
+                    <q-item-section>
+                      <q-item-label>
+                        Editar
+                      </q-item-label>
+                    </q-item-section>
                   </q-item>
 
                   <q-item v-if="hasDestroyButton(node)" v-ripple class="qas-tree-generator__item" clickable @click="onDestroy(node)">

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/components/uploader/private/PvUploaderGalleryCard.vue

@@ -219,7 +219,7 @@ export default {
           }
         },
 
-        card: this.normalizedModelValue
+        ...this.normalizedModelValue
       }
     },
 
@@ -317,7 +317,7 @@ export default {
     },
 
     url () {
-      return this.normalizedCardGalleryProps?.card?.url
+      return this.normalizedCardGalleryProps?.url
     }
   },