@bildvitta/quasar-ui-asteroid 3.17.0-beta.20 → 3.17.0-beta.21

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

@@ -1,168 +1,168 @@
-<template>
-  <div class="qas-infinite-scroll" :style="containerStyle">
-    <q-infinite-scroll
-      ref="infiniteScroll"
-      v-bind="attributes"
-      @load="onLoad"
-    >
-      <slot />
-
-      <template #loading>
-        <div class="justify-center q-my-md row">
-          <q-spinner-dots
-            color="primary"
-            size="3em"
-          />
-        </div>
-      </template>
-    </q-infinite-scroll>
-
-    <qas-empty-result-text v-if="hasNoResults" />
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, inject, nextTick } from 'vue'
-import { NotifyError } from '../../plugins'
-
-defineOptions({ name: 'QasInfiniteScroll' })
-
-const props = defineProps({
-  list: {
-    type: Array,
-    default: () => []
-  },
-
-  fields: {
-    type: Object,
-    default: () => ({})
-  },
-
-  limitPerPage: {
-    type: Number,
-    default: 12
-  },
-
-  url: {
-    type: String,
-    default: '',
-    required: true
-  },
-
-  params: {
-    type: Object,
-    default: () => ({})
-  },
-
-  infiniteScrollProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  maxHeight: {
-    type: String,
-    default: ''
-  }
-})
-
-defineExpose({ refresh, remove })
-
-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')
-
-const infiniteScroll = ref(null)
-
-const hasFetchingError = ref(false)
-const isFetching = ref(false)
-const hasMadeFirstFetch = ref(false)
-const count = ref(0)
-const offset = ref(0)
-
-const listLength = computed(() => modelList.value.length)
-
-const attributes = computed(() => ({
-  offset: 100,
-  debounce: 0,
-  ...(props.maxHeight && { scrollTarget: '.qas-infinite-scroll' }),
-  ...props.infiniteScrollProps
-}))
-
-const isEmptyList = computed(() => !listLength.value && !isFetching.value)
-
-const hasNoResults = computed(() => isEmptyList.value && hasMadeFirstFetch.value)
-
-const containerStyle = computed(() => ({
-  ...(props.maxHeight && { maxHeight: props.maxHeight, overflow: 'auto' })
-}))
-
-async function onLoad (_, done) {
-  const hasMadeFirstFetchAndHasNoData = hasMadeFirstFetch.value && !listLength.value
-  const hasFetchAllData = listLength.value && listLength.value >= count.value
-  const stop = hasFetchingError.value || isFetching.value || hasMadeFirstFetchAndHasNoData || hasFetchAllData
-
-  if (stop) {
-    infiniteScroll.value.stop()
-  } else {
-    infiniteScroll.value.resume()
-    await fetchList()
-  }
-
-  done()
-}
-
-async function fetchList () {
-  try {
-    isFetching.value = true
-
-    const { data } = await axios.get(props.url, {
-      params: { offset: offset.value, limit: props.limitPerPage, ...props.params }
-    })
-
-    const newList = [...modelList.value, ...(data.results || [])]
-
-    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,
-     * após buscar uma vez e retornar uma lista vazia.
-    */
-    hasMadeFirstFetch.value = true
-
-    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.')
-
-    hasFetchingError.value = true
-
-    emit('fetch-error', error)
-  } finally {
-    isFetching.value = false
-  }
-}
-
-function refresh () {
-  count.value = 0
-  offset.value = 0
-  modelList.value = []
-
-  hasMadeFirstFetch.value = false
-
-  nextTick(() => {
-    infiniteScroll.value.reset()
-    infiniteScroll.value.resume()
-  })
-}
-
-function remove (index) {
-  modelList.value.splice(index, 1)
-  count.value -= 1
-  offset.value -= 1
-}
-</script>
+<template>
+  <div class="qas-infinite-scroll" :style="containerStyle">
+    <q-infinite-scroll
+      ref="infiniteScroll"
+      v-bind="attributes"
+      @load="onLoad"
+    >
+      <slot />
+
+      <template #loading>
+        <div class="justify-center q-my-md row">
+          <q-spinner-dots
+            color="primary"
+            size="3em"
+          />
+        </div>
+      </template>
+    </q-infinite-scroll>
+
+    <qas-empty-result-text v-if="hasNoResults" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, inject, nextTick } from 'vue'
+import { NotifyError } from '../../plugins'
+
+defineOptions({ name: 'QasInfiniteScroll' })
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  },
+
+  fields: {
+    type: Object,
+    default: () => ({})
+  },
+
+  limitPerPage: {
+    type: Number,
+    default: 12
+  },
+
+  url: {
+    type: String,
+    default: '',
+    required: true
+  },
+
+  params: {
+    type: Object,
+    default: () => ({})
+  },
+
+  infiniteScrollProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  maxHeight: {
+    type: String,
+    default: ''
+  }
+})
+
+defineExpose({ refresh, remove })
+
+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')
+
+const infiniteScroll = ref(null)
+
+const hasFetchingError = ref(false)
+const isFetching = ref(false)
+const hasMadeFirstFetch = ref(false)
+const count = ref(0)
+const offset = ref(0)
+
+const listLength = computed(() => modelList.value.length)
+
+const attributes = computed(() => ({
+  offset: 100,
+  debounce: 0,
+  ...(props.maxHeight && { scrollTarget: '.qas-infinite-scroll' }),
+  ...props.infiniteScrollProps
+}))
+
+const isEmptyList = computed(() => !listLength.value && !isFetching.value)
+
+const hasNoResults = computed(() => isEmptyList.value && hasMadeFirstFetch.value)
+
+const containerStyle = computed(() => ({
+  ...(props.maxHeight && { maxHeight: props.maxHeight, overflow: 'auto' })
+}))
+
+async function onLoad (_, done) {
+  const hasMadeFirstFetchAndHasNoData = hasMadeFirstFetch.value && !listLength.value
+  const hasFetchAllData = listLength.value && listLength.value >= count.value
+  const stop = hasFetchingError.value || isFetching.value || hasMadeFirstFetchAndHasNoData || hasFetchAllData
+
+  if (stop) {
+    infiniteScroll.value.stop()
+  } else {
+    infiniteScroll.value.resume()
+    await fetchList()
+  }
+
+  done()
+}
+
+async function fetchList () {
+  try {
+    isFetching.value = true
+
+    const { data } = await axios.get(props.url, {
+      params: { offset: offset.value, limit: props.limitPerPage, ...props.params }
+    })
+
+    const newList = [...modelList.value, ...(data.results || [])]
+
+    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,
+     * após buscar uma vez e retornar uma lista vazia.
+    */
+    hasMadeFirstFetch.value = true
+
+    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.')
+
+    hasFetchingError.value = true
+
+    emit('fetch-error', error)
+  } finally {
+    isFetching.value = false
+  }
+}
+
+function refresh () {
+  count.value = 0
+  offset.value = 0
+  modelList.value = []
+
+  hasMadeFirstFetch.value = false
+
+  nextTick(() => {
+    infiniteScroll.value.reset()
+    infiniteScroll.value.resume()
+  })
+}
+
+function remove (index) {
+  modelList.value.splice(index, 1)
+  count.value -= 1
+  offset.value -= 1
+}
+</script>

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

@@ -1,78 +1,78 @@
-type: component
-
-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: []
-    type: Array
-    examples: [v-model:list="list"]
-    model: true
-
-  limitPerPage:
-    desc: é repassado na query da requição sendo responsavel pela quantidade de itens por busca.
-    default: 12
-    type: Number
-
-  url:
-    desc: URL utilizado para fazer a busca dos itens.
-    type: String
-
-  params:
-    desc: Parâmetros passados na requisição de busca dos itens.
-    default: {}
-    type: Object
-    examples: ["{ status: 'is_active' }"]
-
-  infinite-scroll-props:
-    desc: Propriedades repassadas para o QInfiniteScroll
-    default: {}
-    type: Object
-    examples: ["{ offset: 500 }"]
-
-  max-height:
-    desc: Seta a altura do container do infinite scroll, caso queira que o infinite scroll fique em um box por exemplo.
-    type: String
-
-events:
-  '@update:list -> function (newList)':
-    desc: Dispara toda vez que é feito uma nova busca e a lista é atualizada.
-    params:
-      newList:
-        desc: Novo valor do list
-        type: Array
-
-  '@fetch-error -> function (error)':
-    desc: Dispara toda vez que ocorre algum erro ao fazer nova busca na API.
-    params:
-      error:
-        count: Erro enviado da API.
-        type: Object
-
-  '@fetch-success -> function ({ count, list, offset })':
-    desc: Dispara toda vez que é feito uma nova busca com sucesso na API.
-    params:
-      count:
-        count: Tamanho máximo de itens.
-        type: Number
-
-      list:
-        desc: Lista do endpoint.
-        type: Array
-
-      offset:
-        desc: valor atual que indica a posição inicial ao recuperar resultados da lista.
-        type: Number
-
-slots:
-  default:
-    desc: slot para exibir a lista na qual o componente fez a busca.
+type: component
+
+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: []
+    type: Array
+    examples: [v-model:list="list"]
+    model: true
+
+  limitPerPage:
+    desc: é repassado na query da requição sendo responsavel pela quantidade de itens por busca.
+    default: 12
+    type: Number
+
+  url:
+    desc: URL utilizado para fazer a busca dos itens.
+    type: String
+
+  params:
+    desc: Parâmetros passados na requisição de busca dos itens.
+    default: {}
+    type: Object
+    examples: ["{ status: 'is_active' }"]
+
+  infinite-scroll-props:
+    desc: Propriedades repassadas para o QInfiniteScroll
+    default: {}
+    type: Object
+    examples: ["{ offset: 500 }"]
+
+  max-height:
+    desc: Seta a altura do container do infinite scroll, caso queira que o infinite scroll fique em um box por exemplo.
+    type: String
+
+events:
+  '@update:list -> function (newList)':
+    desc: Dispara toda vez que é feito uma nova busca e a lista é atualizada.
+    params:
+      newList:
+        desc: Novo valor do list
+        type: Array
+
+  '@fetch-error -> function (error)':
+    desc: Dispara toda vez que ocorre algum erro ao fazer nova busca na API.
+    params:
+      error:
+        count: Erro enviado da API.
+        type: Object
+
+  '@fetch-success -> function ({ count, list, offset })':
+    desc: Dispara toda vez que é feito uma nova busca com sucesso na API.
+    params:
+      count:
+        count: Tamanho máximo de itens.
+        type: Number
+
+      list:
+        desc: Lista do endpoint.
+        type: Array
+
+      offset:
+        desc: valor atual que indica a posição inicial ao recuperar resultados da lista.
+        type: Number
+
+slots:
+  default:
+    desc: slot para exibir a lista na qual o componente fez a busca.