@bildvitta/quasar-ui-asteroid 2.16.0 → 3.0.0-alpha.2

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

@@ -1,5 +1,5 @@
 <template>
-  <qas-box v-bind="$attrs">
+  <qas-box>
     <q-input v-model="search" clearable :disable="!list.length" outlined :placeholder="placeholder">
       <template #append>
         <q-icon color="primary" name="o_search" />
@@ -7,9 +7,9 @@
     </q-input>
 
     <div class="overflow-auto q-mt-xs relative-position" :style="contentStyle">
-      <slot v-if="hasResults" :results="results" />
+      <slot v-if="hasResults" />
 
-      <slot v-else-if="!hideEmptySlot" name="empty">
+      <slot v-else-if="useEmptySlot" name="empty-result">
         <div class="absolute-center text-center">
           <q-icon class="q-mb-sm text-center" color="primary" name="o_search" size="38px" />
           <div>Não há resultados disponíveis.</div>
@@ -20,11 +20,13 @@
 </template>
 
 <script>
-import QasBox from '../box/QasBox.vue'
-
 import Fuse from 'fuse.js'
 
+import QasBox from '../box/QasBox.vue'
+
 export default {
+  name: 'QasSearchBox',
+
   components: {
     QasBox
   },
@@ -45,30 +47,42 @@ export default {
       type: String
     },
 
-    hideEmptySlot: {
-      type: Boolean
-    },
-
     list: {
       default: () => [],
       type: Array
     },
 
+    modelValue: {
+      default: '',
+      type: String
+    },
+
     placeholder: {
       default: 'Pesquisar',
       type: String
     },
 
-    value: {
-      default: '',
-      type: String
+    useEmptySlot: {
+      default: true,
+      type: Boolean
+    },
+
+    results: {
+      type: Array,
+      default: () => []
     }
   },
 
+  emits: [
+    'empty-result',
+    'update:modelValue',
+    'update:results'
+  ],
+
   data () {
     return {
       fuse: null,
-      results: this.list,
+      searchResults: this.list,
       search: ''
     }
   },
@@ -93,7 +107,7 @@ export default {
     },
 
     hasResults () {
-      return !!this.results.length
+      return !!this.searchResults.length
     }
   },
 
@@ -103,32 +117,47 @@ export default {
     },
 
     hasResults (value) {
-      !value && this.$emit('emptyResult')
+      !value && this.$emit('empty-result')
     },
 
-    list (value) {
-      this.fuse.list = value
-      this.setResults(this.search)
+    list: {
+      handler (value) {
+        this.fuse = new Fuse(value, this.defaultFuseOptions)
+
+        this.setResults(this.search)
+      },
+
+      deep: true
     },
 
     search: {
       handler (value) {
         this.setResults(value)
-        this.$emit('input', value)
+        this.$emit('update:modelValue', value)
       },
 
+      immediate: true
+    },
+
+    searchResults: {
+      handler (value) {
+        this.$emit('update:results', value.map(result => result.item || result))
+      },
       immediate: true
     }
   },
 
   created () {
-    this.search = this.value
+    this.search = this.modelValue
     this.fuse = new Fuse(this.list, this.defaultFuseOptions)
+    this.setResults()
   },
 
   methods: {
     setResults (value) {
-      this.results = value ? this.fuse.search(value) : this.list
+      this.searchResults = value
+        ? this.fuse.search(value)
+        : this.list
     }
   }
 }

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

@@ -0,0 +1,76 @@
+type: component
+
+meta:
+  desc: Componente para pesquisa utilizando Fuse.js.
+
+props:
+  empty-list-height:
+    desc: Define altura do box quando a lista está vazia.
+    default: 100px
+    type: String
+
+  fuse-options:
+    desc: Opções do Fuse.js (https://fusejs.io/api/options.html).
+    default: "{ distance: 100, location: 0, maxPatternLength: 32, minMatchCharLength: 1, shouldSort: true, threshold: 0.1, tokenize: true }"
+    debugger: true
+    type: Object
+    examples: ["{ keys: ['label'] }"]
+
+  height:
+    desc: Define altura do box quando a lista não está vazia.
+    default: 300px
+    type: String
+
+  list:
+    desc: Lista onde ocorrerá a busca (array de objetos).
+    default: []
+    type: String
+
+  model-value:
+    desc: Model do campo de pesquisa.
+    type: String
+    examples: [v-model="search"]
+    model: true
+
+  placeholder:
+    desc: Placeholder do campo de pesquisa.
+    default: Pesquisar
+    type: String
+
+  use-empty-slot:
+    desc: Controla o slot "empty-result".
+    default: true
+    type: Boolean
+
+  results:
+    desc: Model que retorna o resultado filtrado.
+    default: []
+    type: Array
+    examples: [v-model:results="results"]
+    model: true
+
+slots:
+  default:
+    desc: Acesso ao conteúdo principal, só existe caso a busca retorne algum resultado.
+
+  empty-result:
+    desc: Acesso ao conteúdo quando a busca não retorne resultado e a prop "useEmptySlot" seja "true".
+
+events:
+  '@empty-result -> function ()':
+    desc: Dispara toda vez que a pesquisa não retorna resultado.
+
+  '@update:model-value -> function (value)':
+    desc: Dispara toda vez que o campo de busca é alterado, também utilizado para v-model
+    params:
+      value:
+        desc: Novo valor do v-model
+        type: String
+
+  '@update:results -> function (value)':
+    desc: Dispara toda vez que o campo de busca é alterado e acontece um novo filtro, também utilizado para v-model:results
+    params:
+      value:
+        desc: Novo valor do v-model:results
+        default: []
+        type: Array

package/src/components/select/QasSelect.vue

@@ -1,11 +1,5 @@
 <template>
-  <q-select v-model="model" v-bind="attributes" v-on="listeners" @filter="filterOptions">
-    <slot v-for="(slot, key) in $slots" :slot="key" :name="key" />
-
-    <template v-for="(slot, key) in $scopedSlots" :slot="key" slot-scope="scope">
-      <slot :name="key" v-bind="scope" />
-    </template>
-
+  <q-select v-model="model" v-bind="attributes" @filter="filterOptions">
     <template #append>
       <slot name="append">
         <q-icon v-if="searchable" name="o_search" />
@@ -21,10 +15,16 @@
         </q-item>
       </slot>
     </template>
+
+    <template v-for="(_, name) in $slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
   </q-select>
 </template>
 
 <script>
+import Fuse from 'fuse.js'
+
 export default {
   name: 'QasSelect',
 
@@ -39,31 +39,33 @@ export default {
       type: String
     },
 
-    options: {
-      default: () => [],
-      type: Array
-    },
-
-    value: {
+    modelValue: {
       default: () => [],
       type: [Array, Object, String, Number]
     },
 
-    valueKey: {
-      default: '',
-      type: String
-    },
-
     noOptionLabel: {
       default: 'Nenhum resultado foi encontrado.',
       type: String
     },
 
+    options: {
+      default: () => [],
+      type: Array
+    },
+
     searchable: {
       type: Boolean
+    },
+
+    valueKey: {
+      default: '',
+      type: String
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       filteredOptions: [],
@@ -72,20 +74,18 @@ export default {
   },
 
   computed: {
-    model: {
-      get () {
-        return this.value
-      },
-
-      set (value) {
-        this.$emit('input', value)
-      }
-    },
+    attributes () {
+      return {
+        clearable: this.searchable,
+        emitValue: true,
+        mapOptions: true,
+        outlined: true,
 
-    listeners () {
-      const { input, ...events } = this.$listeners
+        ...this.$attrs,
 
-      return events
+        options: this.filteredOptions,
+        useInput: this.searchable
+      }
     },
 
     defaultFuseOptions () {
@@ -112,26 +112,20 @@ export default {
       return this.options.map(item => this.renameKey(item))
     },
 
-    isMultiple () {
-      return this.$attrs.multiple || this.$attrs.multiple === ''
-    },
+    model: {
+      get () {
+        return this.modelValue
+      },
 
-    attributes () {
-      return {
-        emitValue: true,
-        mapOptions: true,
-        outlined: true,
-        clearable: this.searchable,
-        ...this.$attrs,
-        options: this.filteredOptions,
-        useInput: this.searchable
+      set (value) {
+        this.$emit('update:modelValue', value)
       }
     }
   },
 
   watch: {
-    defaultFuseOptions (value) {
-      this.fuse.options = { ...this.fuse.options, ...value }
+    defaultFuseOptions () {
+      this.setFuse()
     },
 
     options: {
@@ -142,15 +136,13 @@ export default {
 
         this.filteredOptions = this.formattedResult
       },
+
       immediate: true
     }
   },
 
-  async created () {
-    if (this.searchable) {
-      const Fuse = (await import('fuse.js')).default
-      this.fuse = new Fuse(this.options, this.defaultFuseOptions)
-    }
+  created () {
+    this.setFuse()
   },
 
   methods: {
@@ -168,7 +160,10 @@ export default {
     },
 
     renameKey (item) {
-      const mapKeys = { label: this.labelKey, value: this.valueKey }
+      const mapKeys = {
+        label: this.labelKey,
+        value: this.valueKey
+      }
 
       for (const newKey in mapKeys) {
         if (!item.hasOwnProperty.call(newKey)) {
@@ -178,6 +173,12 @@ export default {
       }
 
       return item
+    },
+
+    setFuse () {
+      if (this.searchable) {
+        this.fuse = new Fuse(this.options, this.defaultFuseOptions)
+      }
     }
   }
 }

package/src/components/select/QasSelect.yml

@@ -0,0 +1,62 @@
+type: component
+
+mixins:
+  - quasar/dist/api/QSelect.json
+
+meta:
+  desc: Componente para select que implementa o "QSelect" repassando propriedades, slots e eventos.
+
+props:
+  model-value:
+    desc: Model do componente.
+    default: []
+    type: [Array, Object, String, Number]
+    examples: [v-model="value"]
+    model: true
+
+  fuse-options:
+    desc: Opções do Fuse.js (https://fusejs.io/api/options.html).
+    type: Object
+    debugger: true
+    default:
+      distance: 100
+      includeScore: true
+      keys: [label, value]
+      location: 0
+      maxPatternLength: 32
+      minMatchCharLength: 1
+      shouldSort: true
+      threshold: 0.1
+      tokenize: true
+
+  label-key:
+    desc: O componente internamente espera receber na propriedade "options" um array de objeto contendo "label" e "value", caso o seu objeto não tenha "label" mas um "name" por exemplo, você pode definir esta prop "label-key" como "name".
+    type: String
+    examples: [label-key="name"]
+
+  no-option-label:
+    desc: Rótulo padrão de quando os options estão vazios.
+    default: Nenhum resultado foi encontrado.
+    type: String
+
+  options:
+    desc: Opções do select.
+    default: []
+    type: Array
+
+  searchable:
+    desc: Controla se vai ou não ter campo de busca no select.
+    type: Boolean
+
+  value-key:
+    desc: O componente internamente espera receber na propriedade "options" um array de objeto contendo "label" e "value", caso o seu objeto não tenha "value" mas um "uuid" por exemplo, você pode definir esta prop "label-value" como "uuid".
+    type: String
+    examples: [value-key="uuid"]
+
+events:
+  '@update:model-value -> function (value)':
+    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
+    params:
+      value:
+        desc: Novo valor do v-model
+        type: [Array, Object, String, Number]

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

@@ -1,9 +1,9 @@
 <template>
-  <qas-search-box v-bind="$attrs" class="q-pa-md" :fuse-options="fuseOptions" :list="sortedOptions">
-    <template #default="{ results }">
+  <qas-search-box v-model:results="results" class="q-pa-md" :fuse-options="fuseOptions" :list="sortedList">
+    <template #default>
       <q-list separator>
-        <q-item v-for="(result, index) in results" :key="index">
-          <slot name="item" v-bind="self">
+        <q-item v-for="result in results" :key="result.value">
+          <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="redirectRoute(result)">{{ result.label }}</div>
@@ -11,8 +11,8 @@
             </slot>
 
             <q-item-section avatar>
-              <slot name="item-action" v-bind="self">
-                <qas-btn hide-mobile-label v-bind="setButtonProps(result)" size="sm" @click="handleClick(result)" />
+              <slot :item="result" name="item-action" v-bind="slotData">
+                <qas-btn v-bind="getButtonProps(result)" @click="handleClick(result)" />
               </slot>
             </q-item-section>
           </slot>
@@ -23,17 +23,22 @@
 </template>
 
 <script>
-import { sortBy } from 'lodash'
+import { sortBy } from 'lodash-es'
+import { screenMixin } from '../../mixins'
 
-import QasBtn from '../btn/QasBtn'
-import QasSearchBox from '../search-box/QasSearchBox'
+import QasBtn from '../btn/QasBtn.vue'
+import QasSearchBox from '../search-box/QasSearchBox.vue'
 
 export default {
+  name: 'QasSelectList',
+
   components: {
     QasBtn,
     QasSearchBox
   },
 
+  mixins: [screenMixin],
+
   props: {
     deleteOnly: {
       type: Boolean
@@ -44,40 +49,47 @@ export default {
       type: Object
     },
 
-    options: {
+    list: {
       default: () => [],
       type: Array
     },
 
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+
     to: {
       default: () => ({}),
       type: Object
     },
 
-    toIdentifier: {
-      type: String,
-      default: 'value'
+    redirectKey: {
+      default: 'uuid',
+      type: String
     },
 
-    value: {
-      type: Array,
-      default: () => []
+    paramKey: {
+      default: 'id',
+      type: String
     }
   },
 
+  emits: [
+    'added',
+    'update:modelValue',
+    'removed'
+  ],
+
   data () {
     return {
-      sortedOptions: [],
-      values: []
+      sortedList: [],
+      values: [],
+      results: []
     }
   },
 
   computed: {
-    // TODO: parar de usar "mobile".
-    isMobile () {
-      return this.$q.screen.xs
-    },
-
     isRedirectEnabled () {
       return Object.keys(this.to).length
     },
@@ -86,29 +98,34 @@ export default {
       return this.isRedirectEnabled ? 'cursor-pointer' : ''
     },
 
-    self () {
-      return this
+    slotData () {
+      return {
+        add: this.add,
+        handleClick: this.handleClick,
+        remove: this.remove,
+        updateModel: this.updateModel
+      }
     }
   },
 
   watch: {
-    options: {
+    list: {
       handler (value) {
-        if (!this.sortedOptions.length) {
-          this.sortedOptions = value
+        if (!this.sortedList.length) {
+          this.sortedList = value
         }
       },
 
       immediate: true
     },
 
-    value (value) {
+    modelValue (value) {
       this.values = [...value]
     }
   },
 
   created () {
-    this.values = [...this.value]
+    this.values = [...this.modelValue]
 
     this.handleOptions()
   },
@@ -121,18 +138,31 @@ export default {
       this.$emit('added', item)
     },
 
+    getButtonProps ({ value }) {
+      const isSelected = this.values.includes(value)
+
+      return {
+        dense: this.mx_isSmall,
+        hideLabelOnSmallScreen: true,
+        icon: !this.mx_isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
+        label: isSelected ? 'Remover' : 'Adicionar',
+        outline: isSelected,
+        size: 'sm'
+      }
+    },
+
     handleClick (item) {
       return this.values.includes(item.value) ? this.remove(item) : this.add(item)
     },
 
     handleOptions () {
-      if (this.value.length) {
-        return this.sortOptions()
+      if (this.modelValue.length) {
+        return this.sortList()
       }
 
-      const unwatch = this.$watch('value', value => {
-        if (!this.sortedOptions.length) {
-          this.sortOptions()
+      const unwatch = this.$watch('modelValue', () => {
+        if (!this.sortedList.length) {
+          this.sortList()
           unwatch()
         }
       })
@@ -140,7 +170,7 @@ export default {
 
     redirectRoute (item) {
       return this.isRedirectEnabled && this.$router.push({
-        params: { id: item[this.toIdentifier] },
+        params: { [this.paramKey]: item[this.redirectKey] },
         ...this.to
       })
     },
@@ -154,25 +184,14 @@ export default {
       this.$emit('removed', item, index)
     },
 
-    setButtonProps ({ value }) {
-      const isSelected = this.values.includes(value)
-
-      return {
-        dense: this.isMobile,
-        icon: !this.isMobile ? undefined : isSelected ? 'o_close' : 'o_add',
-        label: isSelected ? 'Remover' : 'Adicionar',
-        outline: isSelected
-      }
-    },
-
-    sortOptions () {
-      this.sortedOptions = this.deleteOnly
-        ? this.options.filter(option => this.value.includes(option.value))
-        : sortBy(this.options, option => !this.value.includes(option.value))
+    sortList () {
+      this.sortedList = this.deleteOnly
+        ? this.list.filter(option => this.modelValue.includes(option.value))
+        : sortBy(this.list, option => !this.modelValue.includes(option.value))
     },
 
-    updateModel () {
-      this.$emit('input', this.values)
+    updateModel (model) {
+      this.$emit('update:modelValue', model || this.values)
     }
   }
 }