@bildvitta/quasar-ui-asteroid 3.9.0 → 3.10.0-beta.0

package/src/components/search-box/QasSearchBox.vue

@@ -1,13 +1,9 @@
 <template>
-  <qas-box>
-    <qas-input v-bind="attributes" ref="search" v-model="mx_search">
-      <template #prepend>
-        <q-icon color="grey-8" name="sym_r_search" />
-      </template>
-    </qas-input>
-
-    <div ref="scrollContainer" class="overflow-auto q-mt-xs relative-position" :style="containerStyle">
-      <component :is="component.is" v-bind="component.props">
+  <div>
+    <qas-search-input v-bind="attributes" v-model="mx_search" />
+
+    <div ref="scrollContainer" class="overflow-auto q-mt-md relative-position" :style="containerStyle">
+      <component :is="component.is" v-bind="component.props" class="q-mr-sm">
         <slot v-if="mx_hasFilteredOptions" />
       </component>
 
@@ -28,7 +24,7 @@
         <q-spinner color="grey" size="3em" />
       </q-inner-loading>
     </div>
-  </qas-box>
+  </div>
 </template>
 
 <script>
@@ -110,12 +106,10 @@ export default {
   computed: {
     attributes () {
       return {
-        clearable: true,
+        ref: 'search',
         disable: this.isDisabled,
-        debounce: this.useLazyLoading ? 1200 : 0,
-        outlined: true,
+        useDebounce: this.useLazyLoading,
         placeholder: this.placeholder,
-        hideBottomSpace: true,
         error: this.mx_hasFetchError,
         loading: this.mx_isFetching
       }
@@ -195,7 +189,7 @@ export default {
           await this.mx_filterOptionsByStore(value)
 
           this.$refs.infiniteScrollRef.resume()
-          this.$refs.search.focus()
+          this.$refs.search.input.focus()
 
           return
         }
@@ -222,12 +216,7 @@ export default {
   },
 
   created () {
-    if (this.useLazyLoading) return
-
-    this.mx_filteredOptions = this.list
-    this.fuse = new Fuse(this.list, this.defaultFuseOptions)
-
-    this.setListWatcher()
+    this.setSearchMethod()
   },
 
   methods: {
@@ -258,6 +247,23 @@ export default {
 
         this.filterOptionsByFuse(this.mx_search)
       }, { deep: true })
+    },
+
+    setSearchMethod () {
+      this.useLazyLoading ? this.setLazyLoading() : this.setFuse()
+    },
+
+    setFuse () {
+      const list = [...this.list]
+
+      this.mx_filteredOptions = list
+      this.fuse = new Fuse(list, this.defaultFuseOptions)
+
+      this.setListWatcher()
+    },
+
+    setLazyLoading () {
+      this.mx_setCachedOptions('list')
     }
   }
 }

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

@@ -0,0 +1,122 @@
+<template>
+  <div class="qas-filter-input">
+    <qas-input ref="input" v-model="model" class="bg-white q-px-sm rounded-borders-sm shadow-2" v-bind="$attrs" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" :outlined="false" type="search">
+      <template #prepend>
+        <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
+        <qas-btn v-else color="grey-9" icon="sym_r_search" variant="tertiary" @click="$emit('filter')" />
+      </template>
+
+      <template #append>
+        <qas-btn v-if="hasSearch" color="grey-9" icon="sym_r_clear" variant="tertiary" @click="clear" />
+
+        <slot name="after-clear" />
+      </template>
+    </qas-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QasSearchInput',
+
+  inheritAttrs: false,
+
+  props: {
+    modelValue: {
+      default: '',
+      type: String
+    },
+
+    useDebounce: {
+      default: true,
+      type: Boolean
+    },
+
+    useSearchOnType: {
+      default: true,
+      type: Boolean
+    }
+  },
+
+  emits: [
+    'clear',
+    'filter',
+    'update:modelValue'
+  ],
+
+  computed: {
+    debounce () {
+      return this.useDebounce ? '1200' : ''
+    },
+
+    hasSearch () {
+      return !!this.model.length
+    },
+
+    input () {
+      return this.$refs.input
+    },
+
+    model: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        this.$emit('update:modelValue', value)
+      }
+    }
+  },
+
+  methods: {
+    clear () {
+      this.$emit('clear', this.modelValue)
+      this.$emit('update:modelValue', '')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.qas-filter-input {
+  position: relative;
+
+  .q-field {
+    &::before {
+      border: 2px solid transparent;
+      border-radius: var(--qas-generic-border-radius);
+      bottom: 0;
+      content: '';
+      left: 0;
+      pointer-events: none;
+      position: absolute;
+      right: 0;
+      top: 0;
+      transition: border-color var(--qas-generic-transition);
+    }
+
+    &--dense .q-field__prepend {
+      padding-right: var(--qas-spacing-xs);
+    }
+
+    &--dense .q-field__append {
+      padding-left: var(--qas-spacing-sm);
+    }
+
+    &--focused::before {
+      border-color: var(--q-primary);
+      color: var(--q-primary);
+    }
+
+    &__control::after,
+    &__control::before {
+      display: none !important;
+    }
+
+    &__native {
+      padding-bottom: var(--qas-spacing-sm);
+      padding-top: var(--qas-spacing-sm);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,43 @@
+type: component
+
+meta:
+  desc: Componente de input para pesquisa / filtros.
+
+props:
+  model-value:
+    desc: Model do componente, utilizado para v-model.
+    default: ''
+    type: String
+    model: true
+
+  use-debounce:
+    desc: Controla debounce.
+    default: true
+    type: Boolean
+
+  use-search-on-type:
+    desc: Controla se vai habilitar o botão de pesquisa ao clicar.
+    default: true
+    type: Boolean
+
+slots:
+  after-clear:
+    desc: Slot para acessar área após o botão de limpar pesquisa.
+
+events:
+  '@update:clear -> function(oldValue)':
+    desc: Dispara quando é clicado no botão de limpar pesquisa.
+    params:
+      oldValue:
+        desc: Valor do model antes de ser limpo.
+        type: String
+
+  '@update:filter -> function()':
+    desc: Dispara quando a prop "useSearchOnType" for "false" e é clicado no botão de pesquisar.
+
+  '@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.
+        type: String

package/src/components/select/QasSelect.vue

@@ -43,11 +43,6 @@ export default {
       type: Object
     },
 
-    labelKey: {
-      default: '',
-      type: String
-    },
-
     modelValue: {
       default: () => [],
       type: [Array, Object, String, Number, Boolean]
@@ -63,9 +58,9 @@ export default {
       type: Array
     },
 
-    valueKey: {
-      default: '',
-      type: String
+    useFetchOptionsOnCreate: {
+      default: true,
+      type: Boolean
     },
 
     useSearch: {
@@ -114,10 +109,6 @@ export default {
       return this.hasFuse || this.useLazyLoading
     },
 
-    defaultOptions () {
-      return this.mx_handleOptions(this.options)
-    },
-
     hasError () {
       return this.mx_hasFetchError || this.$attrs.error
     },
@@ -153,7 +144,7 @@ export default {
 
   watch: {
     defaultFuseOptions () {
-      this.setFuse()
+      if (this.hasFuse) this.setFuse()
     },
 
     options: {
@@ -162,7 +153,7 @@ export default {
 
         if (this.fuse || this.hasFuse) this.setFuse()
 
-        this.mx_filteredOptions = this.defaultOptions
+        this.mx_filteredOptions = this.options
       },
 
       immediate: true
@@ -170,15 +161,12 @@ export default {
   },
 
   created () {
-    this.setFuse()
-    this.useLazyLoading && this.mx_setFetchOptions('')
+    this.setSearchMethod()
   },
 
   methods: {
     setFuse () {
-      if (this.hasFuse) {
-        this.fuse = new Fuse(this.defaultOptions, this.defaultFuseOptions)
-      }
+      this.fuse = new Fuse(this.options, this.defaultFuseOptions)
     },
 
     async onFilter (value, update) {
@@ -195,13 +183,25 @@ export default {
 
     filterOptionsByFuse (value) {
       if (value === '') {
-        this.mx_filteredOptions = this.defaultOptions
+        this.mx_filteredOptions = this.options
         return
       }
 
       const results = this.fuse.search(value)
 
       this.mx_filteredOptions = this.mx_getNormalizedFuseResults(results)
+    },
+
+    setLazyLoading () {
+      this.mx_setCachedOptions('options')
+
+      if (this.useFetchOptionsOnCreate) this.mx_setFetchOptions('')
+    },
+
+    setSearchMethod () {
+      if (this.useLazyLoading) return this.setLazyLoading()
+
+      if (this.hasFuse) this.setFuse()
     }
   }
 }

package/src/components/select/QasSelect.yml

@@ -71,6 +71,11 @@ props:
     type: String
     examples: [value-key="uuid"]
 
+  use-fetch-options-on-create:
+    desc: Controla se o componente vai fazer um fetch das opções assim que o mesmo é criado (caso tenha lazy loading ativado).
+    default: true
+    type: Boolean
+
   use-search:
     desc: Controla se vai ou não ter campo de busca no select.
     default: undefined

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

@@ -1,18 +1,20 @@
 <template>
-  <qas-search-box v-model:results="results" class="q-pa-md" :fuse-options="fuseOptions" :list="sortedList">
+  <qas-search-box v-model:results="results" v-bind="defaultSearchBoxProps" :list="sortedList">
     <template #default>
       <q-list separator>
-        <q-item v-for="result in results" :key="result.value">
+        <q-item v-for="result in results" :key="result.value" class="q-px-none">
           <slot v-bind="slotData" :item="result" name="item">
             <slot name="item-section" :result="result">
-              <q-item-section class="items-start text-bold">
-                <div :class="labelClass" @click="onClickLabel({ item: result, index })">{{ result.label }}</div>
+              <q-item-section>
+                <div :class="labelClass" @click="onClickLabel({ item: result, index })">
+                  {{ result.label }}
+                </div>
               </q-item-section>
             </slot>
 
             <q-item-section avatar>
               <slot :item="result" name="item-action" v-bind="slotData">
-                <qas-btn v-bind="getButtonProps(result)" @click="handleClick(result)" />
+                <qas-btn :disable="readonly" :use-label-on-small-screen="false" v-bind="getButtonProps(result)" @click="handleClick(result)" />
               </slot>
             </q-item-section>
           </slot>
@@ -36,19 +38,21 @@ export default {
     QasSearchBox
   },
 
+  inheritAttrs: false,
+
   props: {
-    deleteOnly: {
-      type: Boolean
+    addLabel: {
+      type: String,
+      default: 'Adicionar'
     },
 
-    fuseOptions: {
-      default: () => ({ keys: ['label'] }),
-      type: Object
+    deleteLabel: {
+      type: String,
+      default: 'Excluir'
     },
 
-    list: {
-      default: () => [],
-      type: Array
+    deleteOnly: {
+      type: Boolean
     },
 
     modelValue: {
@@ -56,6 +60,15 @@ export default {
       default: () => []
     },
 
+    readonly: {
+      type: Boolean
+    },
+
+    searchBoxProps: {
+      type: Object,
+      default: () => ({})
+    },
+
     useClickableLabel: {
       type: Boolean
     }
@@ -77,10 +90,26 @@ export default {
   },
 
   computed: {
+    defaultSearchBoxProps () {
+      return {
+        fuseOptions: { keys: ['label'] },
+
+        ...this.searchBoxProps
+      }
+    },
+
+    hasLazyLoading () {
+      return this.defaultSearchBoxProps.useLazyLoading
+    },
+
     labelClass () {
       return this.useClickableLabel && 'cursor-pointer'
     },
 
+    list () {
+      return this.defaultSearchBoxProps.list || []
+    },
+
     slotData () {
       return {
         add: this.add,
@@ -94,9 +123,9 @@ export default {
   watch: {
     list: {
       handler (value) {
-        if (!this.sortedList.length) {
-          this.sortedList = value
-        }
+        if (!this.hasLazyLoading) return this.sortList()
+
+        this.sortedList = [...value]
       },
 
       immediate: true
@@ -113,7 +142,7 @@ export default {
   },
 
   created () {
-    this.handleList()
+    if (!this.hasLazyLoading) this.handleList()
   },
 
   methods: {
@@ -128,9 +157,10 @@ export default {
       const isSelected = this.values.includes(value)
 
       return {
+        label: isSelected ? this.deleteLabel : this.addLabel,
         variant: 'tertiary',
         color: isSelected ? 'grey-9' : 'primary',
-        icon: isSelected ? 'sym_r_remove' : 'sym_r_add'
+        icon: isSelected ? 'sym_r_delete' : 'sym_r_add'
       }
     },
 

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

@@ -7,20 +7,20 @@ meta:
   desc: Componente para selecionar dentro de uma lista com pesquisa utilizando o `QasSearchBox`.
 
 props:
+  add-label:
+    desc: Label do botão de adicionar.
+    default: Adicionar
+    type: String
+
+  delete-label:
+    desc: Label do botão de deletar.
+    default: Excluir
+    type: String
+
   delete-only:
     desc: Caso o "modelValue" tenha valor, ele remove tudo na lista que não esteja dentro do modelValue.
     type: Boolean
 
-  fuse-options:
-    desc: Propriedade que será repassada para o "QasSearchBox".
-    default: "{ keys: ['label'] }"
-    type: Object
-
-  list:
-    desc: Lista que será feita a seleção e pesquisa.
-    default: []
-    type: Array
-
   model-value:
     desc: Model do componente, que será controlado tudo que foi selecionado.
     default: []
@@ -28,6 +28,16 @@ props:
     examples: [v-model="value"]
     model: true
 
+  readonly:
+    desc: Habilita modo visualização.
+    default: false
+    type: Boolean
+
+  search-box-props:
+    desc: Repassa props para o componente "QasSearchBox"
+    default: {}
+    type: Object
+
   use-clickable-label:
     desc: Habilita "cursor-pointer" no label e evento "click-label".
     type: Boolean

package/src/mixins/search-filter.js

@@ -1,6 +1,5 @@
 import { decamelize } from 'humps'
 import { isEqual } from 'lodash'
-import { getNormalizedOptions } from '../helpers'
 import { getAction } from '@bildvitta/store-adapter'
 
 export default {
@@ -20,11 +19,11 @@ export default {
       type: String
     },
 
-    useLazyLoading: {
+    fetching: {
       type: Boolean
     },
 
-    fetching: {
+    useLazyLoading: {
       type: Boolean
     }
   },
@@ -38,12 +37,15 @@ export default {
 
   data () {
     return {
+      mx_cachedOptions: [],
+      mx_fetchCount: 0,
       mx_filteredOptions: [],
+      mx_foundDuplicatedOptions: [],
+      mx_fromSearch: false,
       mx_hasFetchError: false,
       mx_isFetching: false,
       mx_isScrolling: false,
       mx_search: '',
-      mx_fetchCount: 0,
       mx_pagination: {
         page: 1,
         lastPage: null,
@@ -77,10 +79,6 @@ export default {
       return !!this.mx_filteredOptions.length
     },
 
-    mx_isFilterByFuse () {
-      return !this.useLazyLoading
-    },
-
     mx_isMultiple () {
       return this.$attrs.multiple || this.$attrs.multiple === ''
     }
@@ -101,11 +99,17 @@ export default {
   methods: {
     async mx_filterOptionsByStore (search) {
       this.mx_resetFilter(search)
+
+      this.mx_fromSearch = !!search
+
       await this.mx_setFetchOptions()
+
+      if (this.mx_cachedOptions.length && !search) this.mx_setInitialCachedOptions()
     },
 
     mx_resetFilter (search) {
       this.mx_filteredOptions = []
+      this.mx_foundDuplicatedOptions = []
       this.mx_search = search
       this.mx_pagination = {
         page: 1,
@@ -180,14 +184,8 @@ export default {
 
         this.$emit('fetch-options-success', data)
 
-        return this.mx_handleOptions(results)
+        return this.mx_getNonDuplicatedOptions(results)
       } catch (error) {
-        this.$qas.logger.group(
-          `Mixin: searchFilterMixin - mx_fetchOptions -> exceção da action ${this.entity}/fetchFieldOptions`,
-          [error],
-          { error: true }
-        )
-
         this.mx_hasFetchError = true
         this.$emit('fetch-options-error', error)
 
@@ -199,7 +197,48 @@ export default {
     },
 
     async mx_setFetchOptions () {
-      this.mx_filteredOptions = await this.mx_fetchOptions()
+      const options = await this.mx_fetchOptions()
+
+      this.mx_filteredOptions.push(...options)
+    },
+
+    mx_setInitialCachedOptions () {
+      this.mx_cachedOptions.forEach(cachedOption => {
+        const hasOption = this.mx_filteredOptions.find(filteredOption => {
+          return filteredOption.value === cachedOption.value
+        })
+
+        if (!hasOption && this.mx_filteredOptions.length) {
+          this.mx_filteredOptions.unshift(cachedOption)
+        }
+      })
+    },
+
+    mx_getNonDuplicatedOptions (options = []) {
+      if (this.mx_fromSearch) {
+        this.mx_fromSearch = false
+
+        return options
+      }
+
+      if (!options.length) return []
+
+      const nonDuplicatedOptions = [...options]
+
+      this.mx_cachedOptions.forEach(cachedOption => {
+        if (this.mx_foundDuplicatedOptions.includes(cachedOption.value)) return
+
+        const duplicatedOptionIndex = nonDuplicatedOptions.findIndex(option => {
+          return option.value === cachedOption.value
+        })
+
+        if (~duplicatedOptionIndex) {
+          this.mx_foundDuplicatedOptions.push(cachedOption.value)
+          nonDuplicatedOptions.splice(duplicatedOptionIndex, 1)
+        }
+      })
+
+      return nonDuplicatedOptions
     },
 
     mx_canFetchOptions () {
@@ -210,18 +249,6 @@ export default {
       return hasMorePages && !this.mx_isFetching && !this.mx_isScrolling && this.useLazyLoading
     },
 
-    mx_handleOptions (options) {
-      if (this.labelKey && this.valueKey) {
-        return getNormalizedOptions({
-          options,
-          label: this.labelKey,
-          value: this.valueKey
-        })
-      }
-
-      return options
-    },
-
     mx_getMissingPropsMessage (prop) {
       return `A propriedade "${prop}" é obrigatória quando a propriedade "useLazyLoading" está ativa.`
     },
@@ -232,6 +259,15 @@ export default {
 
     mx_getNormalizedFuseResults (results = []) {
       return results.map(({ item }) => item)
+    },
+
+    mx_setCachedOptions (model) {
+      this.$watch(model, options => {
+        if (!options?.length) return
+
+        this.mx_filteredOptions = [...options]
+        this.mx_cachedOptions = [...options]
+      }, { immediate: true })
     }
   }
 }