@bildvitta/quasar-ui-asteroid 3.11.0-beta.2 → 3.11.0-beta.4

package/src/components/chart-view/config/plugins/zoom.js

@@ -0,0 +1,31 @@
+export const zoomPluginConfig = {
+  limits: {
+    x: {
+      max: 'original',
+      min: 'original'
+    },
+
+    y: {
+      max: 'original',
+      min: 'original'
+    }
+  },
+
+  pan: {
+    enabled: true,
+    modifierKey: 'ctrl'
+  },
+
+  zoom: {
+    mode: 'xy',
+
+    pinch: {
+      enabled: true
+    },
+
+    wheel: {
+      enabled: true,
+      modifierKey: 'ctrl'
+    }
+  }
+}

package/src/components/header-actions/QasHeaderActions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="items-center justify-between no-wrap q-col-gutter-x-md q-mb-xl row text-body1 text-grey-8">
+  <div class="justify-between no-wrap q-col-gutter-x-md q-mb-xl row text-body1 text-grey-8" :class="containerClass">
     <div :class="leftClass">
       <slot name="left">
         {{ text }}
@@ -17,6 +17,12 @@
 </template>
 
 <script>
+const AlignTypes = {
+  Start: 'start',
+  Center: 'center',
+  End: 'end'
+}
+
 export default {
   name: 'QasHeaderActions',
 
@@ -26,6 +32,12 @@ export default {
       default: () => ({})
     },
 
+    alignColumns: {
+      default: AlignTypes.Center,
+      type: String,
+      validator: value => Object.values(AlignTypes).includes(value)
+    },
+
     buttonProps: {
       default: () => ({}),
       type: Object
@@ -38,6 +50,10 @@ export default {
   },
 
   computed: {
+    containerClass () {
+      return `items-${this.alignColumns}`
+    },
+
     hasDefaultButton () {
       return !!Object.keys(this.buttonProps).length
     },

package/src/components/header-actions/QasHeaderActions.yml

@@ -9,6 +9,12 @@ props:
     default: {}
     type: Object
 
+  align-columns:
+    desc: Alinhamento vertical das colunas.
+    default: center
+    type: String
+    examples: [start, center, end]
+
   button-props:
     desc: Propriedades do QasBtn.
     default: {}
@@ -23,4 +29,4 @@ slots:
     desc: slot para acessar seção da esquerda (descrição).
 
   right:
-    desc: slot para acessar seção da direita (ação).
+    desc: slot para acessar seção da direita (ação).

package/src/components/label/QasLabel.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="text-subtitle1" :class="classes">
+  <div class="text-h4" :class="classes">
     <slot :label-with-suffix="labelWithSuffix">{{ labelWithSuffix }}</slot>
   </div>
 </template>
 
 <script>
 import { addCounterSuffix } from '../../helpers'
+import { Spacing } from '../../enums/Spacing'
 
 export default {
   name: 'QasLabel',
@@ -22,12 +23,12 @@ export default {
     },
 
     margin: {
-      default: 'sm',
+      default: Spacing.Md,
       type: String,
       validator: value => {
-        const marginList = ['none', 'auto', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']
+        const availableSpacings = Object.values(Spacing)
 
-        return marginList.includes(value)
+        return availableSpacings.includes(value)
       }
     },
 

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

@@ -1,8 +1,10 @@
 <template>
-  <div>
+  <div class="qas-search-box">
     <qas-search-input v-bind="attributes" v-model="mx_search" />
 
-    <div ref="scrollContainer" class="overflow-auto q-mt-md relative-position" :style="containerStyle">
+    <slot name="after-search" />
+
+    <div ref="scrollContainer" class="overflow-auto q-mt-md relative-position" :class="containerClasses" :style="containerStyle">
       <component :is="component.is" v-bind="component.props" class="q-mr-sm">
         <slot v-if="mx_hasFilteredOptions" />
       </component>
@@ -14,11 +16,15 @@
       </slot>
 
       <slot v-if="showEmptyResult" name="empty-result">
-        <qas-empty-result-text class="q-mt-md" />
+        <q-item class="q-px-none">
+          <q-item-section class="q-px-none">
+            <qas-empty-result-text />
+          </q-item-section>
+        </q-item>
       </slot>
 
       <q-inner-loading :showing="showInnerLoading">
-        <q-spinner color="grey" size="3em" />
+        <q-spinner color="grey" size="2rem" />
       </q-inner-loading>
     </div>
   </div>
@@ -67,6 +73,10 @@ export default {
       type: String
     },
 
+    outlined: {
+      type: Boolean
+    },
+
     placeholder: {
       default: 'Pesquisar',
       type: String
@@ -91,7 +101,9 @@ export default {
 
   data () {
     return {
-      fuse: null
+      fuse: null,
+      scrollContainer: null,
+      isInfiniteScrollDisabled: true
     }
   },
 
@@ -108,7 +120,7 @@ export default {
     },
 
     containerStyle () {
-      return { height: this.containerHeight }
+      return { maxHeight: this.containerHeight }
     },
 
     hasNoOptionsOnFirstFetch () {
@@ -124,8 +136,9 @@ export default {
     component () {
       const infiniteScrollProps = {
         offset: 100,
-        scrollTarget: this.$refs.scrollContainer,
-        ref: 'infiniteScrollRef'
+        scrollTarget: this.scrollContainer,
+        ref: 'infiniteScrollRef',
+        disable: this.isInfiniteScrollDisabled
       }
 
       return {
@@ -137,6 +150,14 @@ export default {
       }
     },
 
+    containerClasses () {
+      return {
+        'qas-search-box__container': this.outlined,
+        'q-px-md': this.outlined,
+        'rounded-borders': this.outlined
+      }
+    },
+
     defaultFuseOptions () {
       return {
         ...fuseConfig,
@@ -206,6 +227,10 @@ export default {
     }
   },
 
+  mounted () {
+    this.scrollContainer = this.$refs.scrollContainer
+  },
+
   created () {
     this.setSearchMethod()
   },
@@ -216,16 +241,8 @@ export default {
     },
 
     async onInfiniteScroll (_, done) {
-      // Se tiver erro no primeiro fetch, retorna o "done" na proxima.
       if (((this.mx_hasFetchError && !this.mx_hasFilteredOptions) || this.hasNoOptionsOnFirstFetch)) return done()
 
-      const canMakeFirstFetch = this.mx_fetchCount === 0 && this.mx_hasFilteredOptions
-
-      if ((!this.mx_hasFilteredOptions || canMakeFirstFetch) && !this.mx_search) {
-        await this.mx_setFetchOptions()
-        return done()
-      }
-
       if (this.mx_canFetchOptions()) {
         await this.mx_loadMoreOptions()
         return done()
@@ -255,9 +272,23 @@ export default {
       this.setListWatcher()
     },
 
-    setLazyLoading () {
+    async setLazyLoading () {
       this.mx_setCachedOptions('list')
+
+      await this.mx_setFetchOptions()
+
+      this.isInfiniteScrollDisabled = false
     }
   }
 }
 </script>
+
+<style lang="scss">
+.qas-search-box {
+  &__container {
+    min-height: 48px;
+    background-color: white;
+    border: 1px solid $grey-4;
+  }
+}
+</style>

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

@@ -62,6 +62,11 @@ props:
     type: String
     examples: [cities]
 
+  outlined:
+    desc: Define se a área que contém o resultado da pesquisa terá o estilo de borda arredondada com fundo branco (semelhante a um input).
+    default: false
+    type: Boolean
+
   placeholder:
     desc: Placeholder do campo de pesquisa.
     default: Pesquisar
@@ -85,6 +90,9 @@ props:
     type: Boolean
 
 slots:
+  after-search:
+    desc: Acesso ao conteúdo após o input de pesquisa e antes do resultados (slot default).
+
   default:
     desc: Acesso ao conteúdo principal, só existe caso a busca retorne algum resultado.
 

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

@@ -1,6 +1,6 @@
 <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">
+    <qas-input ref="input" v-model="model" v-bind="$attrs" class="bg-white rounded-borders-sm" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" 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')" />
@@ -82,19 +82,6 @@ export default {
   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);
     }
@@ -103,16 +90,6 @@ export default {
       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);

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

@@ -1,21 +1,19 @@
 <template>
-  <qas-search-box v-model:results="results" v-bind="defaultSearchBoxProps" :list="sortedList">
+  <qas-search-box ref="searchBox" v-model:results="results" v-bind="defaultSearchBoxProps" :list="sortedList">
+    <template #after-search>
+      <div class="q-mb-md q-mt-xl">
+        <span class="q-pr-sm text-body1 text-grey-8">Seleção:</span>
+
+        <qas-btn :disable="isClearSelectionDisabled" label="Limpar seleção" variant="tertiary" @click="clearSelection" />
+      </div>
+    </template>
+
     <template #default>
-      <q-list separator>
-        <q-item v-for="result in results" :key="result.value" class="q-px-none">
+      <q-list class="bg-white rounded-borders" separator>
+        <q-item v-for="result in results" :key="result.value" class="q-px-none" tag="label">
           <slot v-bind="slotData" :item="result" name="item">
-            <slot name="item-section" :result="result">
-              <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 :disable="readonly" :use-label-on-small-screen="false" v-bind="getButtonProps(result)" @click="handleClick(result)" />
-              </slot>
+            <q-item-section>
+              <pv-select-list-checkbox :readonly="readonly" :result="result" :use-active="hasValueInModel(result.value)" @add="add" @remove="remove" />
             </q-item-section>
           </slot>
         </q-item>
@@ -29,13 +27,17 @@ import { sortBy } from 'lodash-es'
 
 import QasBtn from '../btn/QasBtn.vue'
 import QasSearchBox from '../search-box/QasSearchBox.vue'
+import PvSelectListCheckbox from './private/PvSelectListCheckbox.vue'
 
 export default {
   name: 'QasSelectList',
 
   components: {
     QasBtn,
-    QasSearchBox
+    QasSearchBox,
+
+    // private
+    PvSelectListCheckbox
   },
 
   inheritAttrs: false,
@@ -55,6 +57,11 @@ export default {
       type: Boolean
     },
 
+    emitValue: {
+      type: Boolean,
+      default: true
+    },
+
     modelValue: {
       type: Array,
       default: () => []
@@ -69,20 +76,21 @@ export default {
       default: () => ({})
     },
 
-    useClickableLabel: {
-      type: Boolean
+    useEmitLabelValueOnly: {
+      type: Boolean,
+      default: true
     }
   },
 
   emits: [
     'added',
-    'click-label',
     'removed',
     'update:modelValue'
   ],
 
   data () {
     return {
+      searchBox: null,
       sortedList: [],
       values: [],
       results: []
@@ -94,7 +102,9 @@ export default {
       return {
         fuseOptions: { keys: ['label'] },
 
-        ...this.searchBoxProps
+        ...this.searchBoxProps,
+
+        outlined: true
       }
     },
 
@@ -102,10 +112,6 @@ export default {
       return this.defaultSearchBoxProps.useLazyLoading
     },
 
-    labelClass () {
-      return this.useClickableLabel && 'cursor-pointer'
-    },
-
     list () {
       return this.defaultSearchBoxProps.list || []
     },
@@ -113,10 +119,17 @@ export default {
     slotData () {
       return {
         add: this.add,
-        handleClick: this.handleClick,
         remove: this.remove,
         updateModel: this.updateModel
       }
+    },
+
+    isClearSelectionDisabled () {
+      return !this.modelValue.length || this.readonly || !this.results.length
+    },
+
+    hasSearch () {
+      return this.searchBox.mx_search
     }
   },
 
@@ -141,33 +154,22 @@ export default {
     }
   },
 
+  mounted () {
+    this.searchBox = this.$refs.searchBox
+  },
+
   created () {
     if (!this.hasLazyLoading) this.handleList()
   },
 
   methods: {
     add (item) {
-      this.values.push(item.value)
+      this.values.push(this.getNormalizedValue(item))
       this.updateModel()
 
       this.$emit('added', item)
     },
 
-    getButtonProps ({ value }) {
-      const isSelected = this.values.includes(value)
-
-      return {
-        label: isSelected ? this.deleteLabel : this.addLabel,
-        variant: 'tertiary',
-        color: isSelected ? 'grey-9' : 'primary',
-        icon: isSelected ? 'sym_r_delete' : 'sym_r_add'
-      }
-    },
-
-    handleClick (item) {
-      return this.values.includes(item.value) ? this.remove(item) : this.add(item)
-    },
-
     handleList () {
       if (this.modelValue.length) {
         return this.sortList()
@@ -181,12 +183,12 @@ export default {
       })
     },
 
-    onClickLabel ({ item, index }) {
-      this.useClickableLabel && this.$emit('click-label', { item, index })
-    },
-
     remove (item) {
-      const index = this.values.findIndex(value => value === item.value)
+      const index = this.values.findIndex(itemValue => {
+        const normalizedItem = this.emitValue ? itemValue : item.value
+
+        return normalizedItem === item.value
+      })
 
       this.values.splice(index, 1)
       this.updateModel()
@@ -196,12 +198,38 @@ export default {
 
     sortList () {
       this.sortedList = this.deleteOnly
-        ? this.list.filter(item => this.modelValue.includes(item.value))
-        : sortBy(this.list, item => !this.modelValue.includes(item.value))
+        ? this.list.filter(item => this.hasValueInModel(item.value))
+        : sortBy(this.list, item => !this.hasValueInModel(item.value))
     },
 
     updateModel (model) {
       this.$emit('update:modelValue', model || this.values)
+    },
+
+    hasValueInModel (value) {
+      return this.emitValue
+        ? this.modelValue.includes(value)
+        : !!this.modelValue.find(item => item.value === value)
+    },
+
+    getNormalizedValue (objectValue = {}) {
+      if (this.emitValue) return objectValue.value
+
+      if (this.useEmitLabelValueOnly) {
+        const { label, value } = objectValue
+
+        return {
+          label,
+          value
+        }
+      }
+
+      return objectValue
+    },
+
+    clearSelection () {
+      this.values = []
+      this.updateModel()
     }
   }
 }

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

@@ -21,6 +21,11 @@ props:
     desc: Caso o "modelValue" tenha valor, ele remove tudo na lista que não esteja dentro do modelValue.
     type: Boolean
 
+  emit-value:
+    desc: Quando valor é "true", transforma o model em um array de string, senão o model será um array de objeto.
+    default: true
+    type: Boolean
+
   model-value:
     desc: Model do componente, que será controlado tudo que foi selecionado.
     default: []
@@ -38,8 +43,9 @@ props:
     default: {}
     type: Object
 
-  use-clickable-label:
-    desc: Habilita "cursor-pointer" no label e evento "click-label".
+  use-emit-label-value-only:
+    desc: Propriedade para ser usada em conjunto com ':emitValue="false"', caso habilite essa propriedade, o model sempre será um array de objeto com label e value, se estiver desabilitado, o objeto dentro do model será o objeto inteiro, não somente label e value.
+    default: true
     type: Boolean
 
 slots:
@@ -54,33 +60,6 @@ slots:
         desc: Função para adicionar um item ao model
         type: Function
 
-      handleClick:
-        desc: Função que controla o model adiciona ou remove do model
-        type: Function
-
-      remove:
-        desc: Função para remover um item do model
-        type: Function
-
-      updateModel:
-        desc: Função para atualizar o v-model
-        type: Function
-
-  item-action:
-    desc: Acesso dentro do "<q-item-section avatar />".
-    scope:
-      item:
-        desc: Item atual da lista
-        type: Object
-
-      add:
-        desc: Função para adicionar um item ao model
-        type: Function
-
-      handleClick:
-        desc: Função que controla o model adiciona ou remove do model
-        type: Function
-
       remove:
         desc: Função para remover um item do model
         type: Function
@@ -97,16 +76,6 @@ events:
         desc: Item adicionado
         type: String
 
-  '@click-label -> function ({ item, index })':
-    desc: Dispara toda vez que o label do item é clicado **SE** a propriedade "useClickableLabel" for "true".
-    params:
-      item:
-        desc: Item clicado
-        type: Object
-      index:
-        desc: Posição do item
-        type: Number
-
   '@removed -> function (item, index)':
     desc: Dispara toda vez que um item é removido do v-model.
     params:

package/src/components/select-list/private/PvSelectListCheckbox.vue

@@ -0,0 +1,31 @@
+<template>
+  <q-checkbox class="text-body1" dense :disable="props.readonly" :label="props.result.label" :model-value="props.useActive" @update:model-value="onUpdateModelValue(result)" />
+</template>
+
+<script setup>
+defineOptions({
+  name: 'PvSelectListCheckbox'
+})
+
+const props = defineProps({
+  result: {
+    type: Object,
+    default: () => ({})
+  },
+
+  readonly: {
+    type: Boolean
+  },
+
+  useActive: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['add', 'remove'])
+
+function onUpdateModelValue () {
+  return emit(props.useActive ? 'remove' : 'add', props.result)
+}
+</script>

package/src/css/components/field.scss

@@ -1,4 +1,4 @@
-.q-field--outlined .q-field__inner {
+.q-field--outlined .q-field__control {
   background-color: white;
   border-radius: $generic-border-radius;
 }

package/src/css/components/item.scss

@@ -41,4 +41,8 @@
   & .q-focus-helper {
     display: none;
   }
+
+  &__section--side {
+    padding-right: var(--qas-spacing-sm);
+  }
 }

package/src/helpers/rules.js

@@ -1,5 +1,5 @@
-const required = (value = '', message = 'Campo obrigatório') => {
-  return String(value).length || message
+function required (value = '', message = 'Campo obrigatório.') {
+  return String(value ?? '') || message
 }
 
 export {

package/src/mixins/search-filter.js

@@ -89,7 +89,7 @@ export default {
 
         this.mx_filterOptionsByStore('')
 
-        this.$emit('update:modelValue', undefined)
+        setTimeout(() => this.$emit('update:modelValue', undefined))
       }
     }
   },