@bildvitta/quasar-ui-asteroid 3.17.0-beta.9 → 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

@@ -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>
@@ -247,7 +247,16 @@ 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

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' }} }"]

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,

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

@@ -2,7 +2,17 @@
   <div ref="parent" :class="classes">
     <div class="no-wrap row text-no-wrap">
       <div ref="truncate" class="ellipsis">
-        <slot>{{ formattedText }}</slot>
+        <slot>
+          <div v-if="hasBadges" class="items-center q-col-gutter-sm row" :class="badgeParentClasses">
+            <div v-for="(item, index) in normalizedBadgesList" :key="index">
+              <qas-badge v-bind="getBadgeProps(item)" />
+            </div>
+          </div>
+
+          <div v-else class="ellipsis">
+            {{ formattedText }}
+          </div>
+        </slot>
       </div>
 
       <qas-btn v-if="hasButton" class="q-ml-sm" :label="buttonLabel" @click.stop.prevent="toggle" />
@@ -10,7 +20,7 @@
 
     <qas-dialog v-model="show" v-bind="defaultProps" aria-label="Diálogo de texto completo" role="dialog">
       <template v-if="isCounterMode" #description>
-        <div class="q-col-gutter-y-md row">
+        <div class="q-col-gutter-y-sm row">
           <div
             v-for="(item, index) in normalizedList"
             :key="index"
@@ -25,17 +35,19 @@
 </template>
 
 <script setup>
+import QasDialog from '../dialog/QasDialog.vue'
+
+import { baseProps } from '../../shared/badge-config'
+
 import {
   computed,
+  nextTick,
   onMounted,
   onUnmounted,
   ref,
   watch
 } from 'vue'
 
-import QasDialog from '../dialog/QasDialog.vue'
-
-// define component name
 defineOptions({ name: 'QasTextTruncate' })
 
 // props
@@ -55,6 +67,11 @@ const props = defineProps({
     default: ''
   },
 
+  emptyText: {
+    type: String,
+    default: '-'
+  },
+
   maxWidth: {
     type: Number,
     default: 0
@@ -85,13 +102,16 @@ const props = defineProps({
     default: () => []
   },
 
+  useBadge: {
+    type: Boolean
+  },
+
   useObjectList: {
     type: Boolean
   },
 
-  emptyText: {
-    type: String,
-    default: '-'
+  useWrapBadge: {
+    type: Boolean
   }
 })
 
@@ -100,11 +120,18 @@ const truncate = ref(null)
 const parent = ref(null)
 
 // composable
+const {
+  hasBadges,
+  badgeParentClasses,
+  normalizedBadgesList,
+  getBadgeProps
+} = useBadgeHandler()
+
 const {
   textContent,
   isTruncated,
   truncateText
-} = useTruncate({ parent, props })
+} = useTruncate({ parent, props, hasBadges })
 
 const {
   defaultProps,
@@ -122,6 +149,7 @@ const {
 
 useMutationObserver({ truncate, callbackFn: truncateText })
 
+// computeds
 const classes = computed(() => [`text-${props.color}`, `text-${props.typography}`])
 
 const formattedText = computed(() => props.list.length || props.text ? displayText.value : props.emptyText)
@@ -182,7 +210,7 @@ function useMutationObserver ({ truncate, callbackFn = () => {} }) {
   }
 }
 
-function useTruncate ({ parent, props }) {
+function useTruncate ({ parent, props, hasBadges }) {
   // reactive vars
   const maxPossibleWidth = ref('')
   const textContent = ref('')
@@ -191,14 +219,19 @@ function useTruncate ({ parent, props }) {
   // lifecycle
   onMounted(() => truncateText())
 
-  // watch
-  watch(() => props.maxWidth, truncateText)
-
   // computed
   const isTruncated = computed(() => textWidth.value > maxPossibleWidth.value)
 
+  // watch
+  watch(() => props.maxWidth, truncateText)
+
   // functions
-  function truncateText () {
+  async function truncateText () {
+    await nextTick()
+
+    // Se tiver badges, então não pode ser feito calculo de width.
+    if (hasBadges.value) return
+
     parent.value.style.maxWidth = '100%'
     textWidth.value = truncate.value.clientWidth
     textContent.value = truncate.value?.innerHTML
@@ -271,4 +304,34 @@ function useCounter () {
     counterLabel
   }
 }
+
+function useBadgeHandler () {
+  const hasBadges = computed(() => props.useBadge && props.useObjectList && props.list.length)
+
+  const normalizedBadgesList = computed(() => props.list.slice(0, props.maxVisibleItem))
+  const badgeParentClasses = computed(() => ({ 'no-wrap': !props.useWrapBadge }))
+
+  function getBadgeProps (item) {
+    const itemProps = {}
+
+    /**
+     * recupera somente keys que estão em baseProps do QasBadge
+     * pra evitar que passe propriedades desnecessárias
+     */
+    for (const key in item) {
+      if (baseProps[key]) {
+        itemProps[key] = item[key]
+      }
+    }
+
+    return itemProps
+  }
+
+  return {
+    hasBadges,
+    badgeParentClasses,
+    normalizedBadgesList,
+    getBadgeProps
+  }
+}
 </script>