@bildvitta/quasar-ui-asteroid 3.17.0-beta.8 → 3.17.0

package/src/components/infinite-scroll/QasInfiniteScroll.vue

@@ -33,6 +33,11 @@ const props = defineProps({
     default: () => []
   },
 
+  fields: {
+    type: Object,
+    default: () => ({})
+  },
+
   limitPerPage: {
     type: Number,
     default: 12
@@ -62,7 +67,10 @@ const props = defineProps({
 
 defineExpose({ refresh, remove })
 
-const emit = defineEmits(['update:list', 'fetch-success', 'fetch-error'])
+const emit = defineEmits(['fetch-success', 'fetch-error'])
+
+const modelList = defineModel('list', { type: Array, default: () => [] })
+const modelFields = defineModel('fields', { type: Object, default: () => ({}) })
 
 const axios = inject('axios')
 
@@ -74,7 +82,7 @@ const hasMadeFirstFetch = ref(false)
 const count = ref(0)
 const offset = ref(0)
 
-const listLength = computed(() => model.value.length)
+const listLength = computed(() => modelList.value.length)
 
 const attributes = computed(() => ({
   offset: 100,
@@ -91,16 +99,6 @@ const containerStyle = computed(() => ({
   ...(props.maxHeight && { maxHeight: props.maxHeight, overflow: 'auto' })
 }))
 
-const model = computed({
-  get () {
-    return props.list
-  },
-
-  set (newList) {
-    emit('update:list', newList)
-  }
-})
-
 async function onLoad (_, done) {
   const hasMadeFirstFetchAndHasNoData = hasMadeFirstFetch.value && !listLength.value
   const hasFetchAllData = listLength.value && listLength.value >= count.value
@@ -124,11 +122,12 @@ async function fetchList () {
       params: { offset: offset.value, limit: props.limitPerPage, ...props.params }
     })
 
-    const newList = [...model.value, ...(data.results || [])]
+    const newList = [...modelList.value, ...(data.results || [])]
 
-    model.value = newList
+    modelList.value = newList
     offset.value = newList.length
     count.value = data.count
+    modelFields.value = data.fields
 
     /**
      * Sinalizar que houve já uma busca, para evitar que onLoad entre em looping,
@@ -136,7 +135,7 @@ async function fetchList () {
     */
     hasMadeFirstFetch.value = true
 
-    emit('fetch-success', { list: newList, offset: offset.value, count: count.value })
+    emit('fetch-success', { list: newList, fields: modelFields.value, offset: offset.value, count: count.value })
   } catch (error) {
     NotifyError('Ops… Não conseguimos acessar as informações. Por favor, tente novamente em alguns minutos.')
 
@@ -151,7 +150,7 @@ async function fetchList () {
 function refresh () {
   count.value = 0
   offset.value = 0
-  model.value = []
+  modelList.value = []
 
   hasMadeFirstFetch.value = false
 
@@ -162,7 +161,7 @@ function refresh () {
 }
 
 function remove (index) {
-  model.value.splice(index, 1)
+  modelList.value.splice(index, 1)
   count.value -= 1
   offset.value -= 1
 }

package/src/components/infinite-scroll/QasInfiniteScroll.yml

@@ -4,6 +4,13 @@ meta:
   desc: Componente de infinite scroll que implementa o "QInfiniteScroll".
 
 props:
+  fields:
+    desc: Model dos fields.
+    default: {}
+    type: Object
+    examples: [v-model:fields="fields"]
+    model: true
+
   list:
     desc: Model da lista de itens.
     default: []

package/src/components/list-view/QasListView.vue

@@ -43,10 +43,13 @@
 <script>
 import QasFilters from '../filters/QasFilters.vue'
 import QasPagination from '../pagination/QasPagination.vue'
+
+import { viewMixin, contextMixin } from '../../mixins'
+
 import debug from 'debug'
 import { extend } from 'quasar'
 import { getState, getAction } from '@bildvitta/store-adapter'
-import { viewMixin, contextMixin } from '../../mixins'
+import { computed } from 'vue'
 
 const log = debug('asteroid-ui:qas-list-view')
 
@@ -58,6 +61,13 @@ export default {
 
   mixins: [contextMixin, viewMixin],
 
+  provide () {
+    return {
+      isFetchListSucceeded: computed(() => this.isFetchListSucceeded),
+      isListView: true
+    }
+  },
+
   props: {
     filtersProps: {
       default: () => ({}),
@@ -107,7 +117,8 @@ export default {
   data () {
     return {
       page: 1,
-      resultsQuantity: 0
+      resultsQuantity: 0,
+      isFetchListSucceeded: false
     }
   },
 
@@ -188,6 +199,7 @@ export default {
 
     async fetchList (externalPayload = {}) {
       this.mx_isFetching = true
+      this.isFetchListSucceeded = false
 
       try {
         const payload = {
@@ -215,6 +227,8 @@ export default {
           metadata: this.mx_metadata
         })
 
+        this.isFetchListSucceeded = true
+
         this.$emit('fetch-success', response)
 
         log(`[${this.entity}]:fetchList:success`, response)

package/src/components/list-view/QasListView.yml

@@ -158,3 +158,12 @@ events:
       value:
         desc: Retorna se está ou não fazendo fetching de dados.
         type: Boolean
+
+provide:
+  is-fetch-list-succeeded:
+    desc: Valor que diz se o `fetchList` foi realizado com sucesso ou não.
+    type: Boolean
+
+  is-list-view:
+    desc: Provide que diz quando se está utilizando o listView
+    type: Boolean

package/src/components/radio/QasRadio.vue

@@ -1,5 +1,11 @@
 <template>
-  <component :is="component.is" v-bind="component.props" />
+  <div>
+    <div v-if="canShowOptionGroupLabel" class="q-mb-sm text-body1">
+      {{ props.label }}
+    </div>
+
+    <component :is="component.is" v-bind="component.props" />
+  </div>
 </template>
 
 <script setup>
@@ -10,8 +16,20 @@ defineOptions({
   inheritAttrs: false
 })
 
+const props = defineProps({
+  label: {
+    default: '',
+    type: String
+  }
+})
+
 const attrs = useAttrs()
 
+const isOptionGroup = computed(() => !!attrs.options?.length)
+
+// Só mostra a label caso for q-option-group e tenha label vindo nas props
+const canShowOptionGroupLabel = computed(() => isOptionGroup.value && !!props.label)
+
 /**
  * - quando é um grupo de opções, o componente é 'QOptionGroup', caso contrário,
  * é 'QRadio'.
@@ -19,16 +37,17 @@ const attrs = useAttrs()
  * - todos os casos é usado o dense.
  */
 const component = computed(() => {
-  const isOptionGroup = !!attrs.options?.length
-
   const { inline = true, ...payloadProps } = attrs
 
   return {
-    is: isOptionGroup ? 'q-option-group' : 'q-radio',
+    is: isOptionGroup.value ? 'q-option-group' : 'q-radio',
+
     props: {
       ...payloadProps,
 
-      ...(isOptionGroup && {
+      label: props.label,
+
+      ...(isOptionGroup.value && {
         inline,
         class: {
           'q-gutter-x-md': inline,

package/src/components/radio/QasRadio.yml

@@ -1,5 +1,11 @@
 type: component
 
+props:
+  label:
+    desc: Label utilizada em casos de ser q-option-group.
+    default: ''
+    type: String
+
 meta:
   desc: Componente wrapper do QRadio.
 

package/src/components/select/QasSelect.vue

@@ -1,7 +1,7 @@
 <template>
-  <q-select v-model="model" v-bind="attributes" class="qas-select" :class="componentClasses" no-error-icon :outlined="false">
-    <template v-if="isSearchable" #prepend>
-      <q-icon name="sym_r_search" />
+  <q-select v-model="model" v-bind="attributes" class="qas-select" :class="componentClasses" no-error-icon>
+    <template v-if="hasIcon" #prepend>
+      <q-icon :name="defaultIcon" />
     </template>
 
     <template #no-option>
@@ -38,7 +38,7 @@
               {{ scope.opt.label }}
             </q-item-label>
 
-            <div v-for="(badge, index) in getFilteredBadgeList(scope.opt)" :key="index">
+            <div v-for="(badge, index) in getFilteredBadgeList(scope.opt)" :key="index" class="flex">
               <qas-badge v-if="hasBadge(badge)" v-bind="getBadgeProps(badge)" />
             </div>
           </div>
@@ -77,6 +77,11 @@ export default {
 
   mixins: [searchFilterMixin],
 
+  inject: {
+    isBox: { default: false },
+    isDialog: { default: false }
+  },
+
   props: {
     badgeProps: {
       default: () => ({}),
@@ -88,6 +93,11 @@ export default {
       type: Object
     },
 
+    icon: {
+      type: String,
+      default: ''
+    },
+
     label: {
       type: String,
       default: ''
@@ -132,6 +142,10 @@ export default {
     useSearch: {
       type: Boolean,
       default: undefined
+    },
+
+    useFilterMode: {
+      type: Boolean
     }
   },
 
@@ -150,7 +164,7 @@ export default {
         clearable: this.isSearchable,
         emitValue: true,
         mapOptions: true,
-        outlined: true,
+        outlined: this.useFilterMode,
         dense: true,
         dropdownIcon: 'sym_r_expand_more',
         clearIcon: 'sym_r_close',
@@ -188,6 +202,10 @@ export default {
       return this.hasFuse || this.useLazyLoading
     },
 
+    isBordered () {
+      return (this.isBox || this.isDialog) && this.useFilterMode
+    },
+
     hasError () {
       return this.mx_hasFetchError || this.$attrs.error
     },
@@ -229,13 +247,28 @@ export default {
     },
 
     canSetDefaultOption () {
-      return (this.required || this.useAutoSelect) && this.options.length === 1 && !this.modelValue
+      // Como o default do model pode ser um array (caso de multiple), é necessário validar o length
+      const hasModelValue = Array.isArray(this.modelValue) ? !!this.modelValue.length : !!this.modelValue
+
+      /**
+       * Posso setar o default quando:
+       * - O campo for required ou tiver a prop useAutoSelect
+       * - Tiver apenas uma option
+       * - O modelValue estiver vazio
+       */
+      return (this.required || this.useAutoSelect) && this.options.length === 1 && !hasModelValue
     },
 
     // redesign
     componentClasses () {
       return {
-        'qas-select--has-icon': this.isSearchable || this.hasAppend,
+        ...(this.useFilterMode && {
+          'qas-select--filter rounded-borders': true,
+          'shadow-2': !this.isBordered,
+          bordered: this.isBordered
+        }),
+
+        'qas-select--has-icon': this.hasAppend || this.hasIcon,
         'qas-select--closed': !this.isPopupContentOpen,
         'qas-select--loading': this.hasLoading
       }
@@ -251,6 +284,14 @@ export default {
 
     hasAppend () {
       return !!this.$slots.append
+    },
+
+    defaultIcon () {
+      return this.icon || 'sym_r_search'
+    },
+
+    hasIcon () {
+      return this.isSearchable || !!this.icon
     }
   },
 
@@ -429,6 +470,12 @@ export default {
     }
   }
 
+  &--filter {
+    .q-field__control:before {
+      border: 0;
+    }
+  }
+
   &__menu {
     .q-item {
       font-weight: 400 !important;

package/src/components/select/QasSelect.yml

@@ -7,7 +7,7 @@ meta:
   desc: Componente para select que implementa o "QSelect" repassando propriedades, slots e eventos.
 
 props:
-  badge-list:
+  badge-props:
     desc: Configuração das badges no qual cada key é um callback com o valor booleano retornado pelo back.
     default: {}
     examples: ["{ isTester: () => { return { color: 'grey-8', label: 'Tester', textColor: 'white' }} }"]
@@ -35,6 +35,11 @@ props:
       keys: [label, value]
       threshold: 0.4
 
+  icon:
+    desc: Ícone da esquerda.
+    type: String
+    default: ''
+
   label:
     desc: Label do componente.
     type: String

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

@@ -0,0 +1,65 @@
+<template>
+  <qas-select v-model="internalModel" :label="props.label" :options="props.options" use-filter-mode @update:model-value="onUpdateModel" />
+</template>
+
+<script setup>
+import useDefaultFilters from '../../composables/use-default-filters'
+
+import { extend } from 'quasar'
+import { watch, ref, nextTick } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+defineOptions({ name: 'QasSelectFilter' })
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: 'Selecione uma empresa vinculada'
+  },
+
+  name: {
+    type: String,
+    default: 'company'
+  },
+
+  options: {
+    type: 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)
+
+// watch
+watch(() => route.query[props.name], setModels)
+
+// functions
+/**
+ * Adiciona o valor na URL, atualizando a rota, isto vai fazer com que o componente
+ * seja atualizado com o novo valor, pois cai no watch que atualiza o model interno e externo.
+ */
+function onUpdateModel (value) {
+  const { ...query } = route.query
+
+  router.push({ query: { ...query, [props.name]: value } })
+}
+
+function setModels (value) {
+  model.value = value
+  internalModel.value = value
+
+  const oldFilters = extend(true, {}, filterQuery.value)
+
+  setFilterQuery(value, props.name)
+  nextTick(() => triggerDefaultFiltersChange(filterQuery.value, oldFilters))
+}
+</script>

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

@@ -0,0 +1,36 @@
+type: component
+
+meta:
+  desc: Componente para gerar dinamicamente checkbox agrupados.
+
+props:
+  inline:
+    desc: Controla se o componente vai aparece em linha ou em bloco.
+    default: true
+    type: Boolean
+
+  label:
+    desc: Label utilizada em casos de ser checkbox-group.
+    default: ''
+    type: String
+
+  model-value:
+    desc: Model do componente, usado para v-model.
+    default: []
+    type: Array
+    examples: [v-model"value"]
+    model: true
+
+  options:
+    desc: Opções para gerar os checkbox.
+    default: []
+    type: Array
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        default: []
+        type: Array

package/src/components/stepper/QasStepper.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="qas-stepper" :class="classes">
-    <q-stepper ref="stepper" v-model="model" active-color="primary" active-icon="none" animated :contracted="screen.untilLarge" done-color="primary" done-icon="none" flat :header-class="headerClass" inactive-color="grey-6" keep-alive>
+    <q-stepper ref="stepper" v-model="model" v-bind="stepperProps">
       <template v-for="(_, name) in $slots" #[name]="context">
         <slot :name="name" v-bind="getContext(context)" />
       </template>
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, useAttrs } from 'vue'
 import { Spacing } from '../../enums/Spacing'
 import { gutterValidator } from '../../helpers/private/gutter-validator'
 import useScreen from '../../composables/use-screen'
@@ -35,6 +35,8 @@ const props = defineProps({
 
 const stepper = ref(null)
 
+const attrs = useAttrs()
+
 const screen = useScreen()
 
 const emit = defineEmits(['update:modelValue'])
@@ -53,7 +55,27 @@ const model = computed({
 
 const classes = computed(() => ({ 'qas-stepper--disable': props.disable }))
 
-const headerClass = computed(() => `text-subtitle1 q-pb-${props.spacing}`)
+const stepperProps = computed(() => {
+  const defaultProps = {
+    contracted: screen.untilLarge,
+    doneColor: 'primary',
+    flat: true,
+    animated: true,
+    activeColor: 'primary',
+    errorIcon: 'sym_r_close',
+    errorColor: 'white',
+    headerClass: `text-subtitle1 q-pb-${props.spacing}`,
+    inactiveColor: attrs['header-nav'] || attrs.headerNav ? 'grey-10' : 'grey-6'
+  }
+
+  return {
+    activeIcon: 'none',
+    doneIcon: 'none',
+    keepAlive: true,
+    ...attrs,
+    ...defaultProps
+  }
+})
 
 function getContext (context) {
   return {
@@ -87,6 +109,31 @@ function previous () {
 
     &__tab {
       padding: 0;
+
+      &--active {
+        .q-icon {
+          font-size: 14px;
+          color: white;
+        }
+
+        .q-stepper__dot {
+          background-color: var(--q-primary) !important;
+        }
+      }
+
+      &:not(.q-stepper__tab--active).q-stepper__tab--error-with-icon  {
+        .q-stepper__title {
+          color: $grey-10;
+        }
+
+        .q-stepper__dot {
+          background-color: $negative !important;
+        }
+
+        .q-icon {
+          font-size: 14px;
+        }
+      }
     }
 
     &__caption {

package/src/components/stepper-form-view/QasStepperFormView.vue

@@ -1,7 +1,7 @@
 <template>
   <qas-stepper ref="stepper" v-model="model" v-bind="stepperProps">
     <template #default>
-      <q-step v-for="(step, stepIndex) in props.steps" :key="stepIndex" :done="isDone(stepIndex)" :name="getStepName(stepIndex)" v-bind="stepPropsList[stepIndex]">
+      <q-step v-for="(step, stepIndex) in props.steps" :key="stepIndex" :done="isDone(stepIndex)" :name="getStepName({ step, stepIndex })" v-bind="stepPropsList[stepIndex]">
         <component :is="step.component" />
       </q-step>
     </template>
@@ -30,7 +30,9 @@ const props = defineProps({
   }
 })
 
-const model = defineModel({ type: Number, default: 1 })
+defineExpose({ setStepProps })
+
+const model = defineModel({ type: [Number, String], default: 1 })
 
 const values = ref({})
 const stepPropsList = ref([])
@@ -68,8 +70,8 @@ function isDone (stepIndex) {
   return model.value > stepIndex + 1
 }
 
-function getStepName (stepIndex) {
-  return stepIndex + 1
+function getStepName ({ step, stepIndex }) {
+  return step.name || stepIndex + 1
 }
 
 provide('stepper', {

package/src/components/stepper-form-view/QasStepperFormView.yml

@@ -17,7 +17,7 @@ props:
     desc: Propriedades que serão repassadas para o QasStepper.
     type: Object
 
-inject:
+provide:
   stepper-model:
     desc: Model do stepper caso precise recuperar o step atual para alguma lógica. Possui reatividade, portanto para acessar é necessário do ".value"
     type: Number

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

@@ -138,6 +138,9 @@ export default {
 
     attributes () {
       const attributes = {
+        tableClass: {
+          'overflow-hidden-y': !this.useStickyHeader
+        },
         class: this.tableClass,
         columns: this.columnsByFields,
         flat: true,