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

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

@@ -16,9 +16,7 @@
 
         <div v-else-if="!mx_isFetching">
           <slot name="empty-results">
-            <div class="q-my-lg text-body1 text-grey-7">
-              Não há itens para serem exibidos.
-            </div>
+            <qas-empty-result-text />
           </slot>
         </div>
 

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>
 
@@ -18,17 +14,14 @@
       </slot>
 
       <slot v-if="showEmptyResult" name="empty-result">
-        <div class="absolute-center text-center">
-          <q-icon class="q-mb-sm text-center" color="primary" name="sym_r_search" size="38px" />
-          <div>{{ emptyResultText }}</div>
-        </div>
+        <qas-empty-result-text class="q-mt-md" />
       </slot>
 
       <q-inner-loading :showing="showInnerLoading">
         <q-spinner color="grey" size="3em" />
       </q-inner-loading>
     </div>
-  </qas-box>
+  </div>
 </template>
 
 <script>
@@ -54,11 +47,6 @@ export default {
       type: String
     },
 
-    emptyResultText: {
-      default: 'Não há resultados disponíveis.',
-      type: String
-    },
-
     fuseOptions: {
       default: () => ({}),
       type: Object
@@ -110,12 +98,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 +181,7 @@ export default {
           await this.mx_filterOptionsByStore(value)
 
           this.$refs.infiniteScrollRef.resume()
-          this.$refs.search.focus()
+          this.$refs.search.input.focus()
 
           return
         }
@@ -222,12 +208,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: {
@@ -239,7 +220,9 @@ export default {
       // Se tiver erro no primeiro fetch, retorna o "done" na proxima.
       if (((this.mx_hasFetchError && !this.mx_hasFilteredOptions) || this.hasNoOptionsOnFirstFetch)) return done()
 
-      if (!this.mx_hasFilteredOptions && !this.mx_search) {
+      const canMakeFirstFetch = this.mx_fetchCount === 0 && this.mx_hasFilteredOptions
+
+      if ((!this.mx_hasFilteredOptions || canMakeFirstFetch) && !this.mx_search) {
         await this.mx_setFetchOptions()
         return done()
       }
@@ -258,6 +241,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-box/QasSearchBox.yml

@@ -9,11 +9,6 @@ props:
     default: 100px
     type: String
 
-  empty-result-text:
-    desc: Define o texto dentro do box quando a lista está vazia.
-    default: Não há resultados disponíveis.
-    type: String
-
   entity:
     desc: Entidade enviada para a action "fetchFieldOptions" (usar somente quando "useLazyLoading" estiver habilitada).
     default: ''

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/components/single-view/QasSingleView.vue

@@ -8,10 +8,7 @@
       <slot />
     </template>
 
-    <div v-else-if="!mx_isFetching" class="q-my-xl text-center">
-      <q-icon class="q-mb-sm text-center" color="grey-7" name="sym_r_search" size="38px" />
-      <div class="text-grey-7">Nenhum item encontrado.</div>
-    </div>
+    <qas-empty-result-text v-else-if="!mx_isFetching" class="q-my-xl" />
 
     <footer v-if="mx_hasFooterSlot">
       <slot name="footer" />