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

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

@@ -1,238 +1,238 @@
-<template>
-  <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 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">
-            <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>
-      </q-list>
-    </template>
-  </qas-search-box>
-</template>
-
-<script>
-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,
-
-    // private
-    PvSelectListCheckbox
-  },
-
-  inheritAttrs: false,
-
-  props: {
-    addLabel: {
-      type: String,
-      default: 'Adicionar'
-    },
-
-    deleteLabel: {
-      type: String,
-      default: 'Excluir'
-    },
-
-    deleteOnly: {
-      type: Boolean
-    },
-
-    emitValue: {
-      type: Boolean,
-      default: true
-    },
-
-    modelValue: {
-      type: Array,
-      default: () => []
-    },
-
-    readonly: {
-      type: Boolean
-    },
-
-    searchBoxProps: {
-      type: Object,
-      default: () => ({})
-    },
-
-    useEmitLabelValueOnly: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  emits: [
-    'add',
-    'remove',
-    'clear',
-    'update:modelValue'
-  ],
-
-  data () {
-    return {
-      searchBox: null,
-      sortedList: [],
-      values: [],
-      results: []
-    }
-  },
-
-  computed: {
-    defaultSearchBoxProps () {
-      return {
-        fuseOptions: { keys: ['label'] },
-
-        ...this.searchBoxProps,
-
-        outlined: true
-      }
-    },
-
-    hasLazyLoading () {
-      return this.defaultSearchBoxProps.useLazyLoading
-    },
-
-    list () {
-      return this.defaultSearchBoxProps.list || []
-    },
-
-    slotData () {
-      return {
-        add: this.add,
-        remove: this.remove,
-        updateModel: this.updateModel
-      }
-    },
-
-    isClearSelectionDisabled () {
-      return !this.modelValue.length || this.readonly || !this.results.length
-    },
-
-    hasSearch () {
-      return this.searchBox.mx_search
-    }
-  },
-
-  watch: {
-    list: {
-      handler (value) {
-        if (!this.hasLazyLoading) return this.sortList()
-
-        this.sortedList = [...value]
-      },
-
-      immediate: true
-    },
-
-    modelValue: {
-      handler (value) {
-        this.values = [...value]
-      },
-
-      deep: true,
-      immediate: true
-    }
-  },
-
-  mounted () {
-    this.searchBox = this.$refs.searchBox
-  },
-
-  created () {
-    if (!this.hasLazyLoading) this.handleList()
-  },
-
-  methods: {
-    add (item) {
-      this.values.push(this.getNormalizedValue(item))
-      this.updateModel()
-
-      this.$emit('add', item)
-    },
-
-    handleList () {
-      if (this.modelValue.length) {
-        return this.sortList()
-      }
-
-      const unwatch = this.$watch('modelValue', () => {
-        if (!this.sortedList.length) {
-          this.sortList()
-          unwatch()
-        }
-      })
-    },
-
-    remove (item) {
-      const index = this.values.findIndex(itemValue => {
-        const normalizedItem = this.emitValue ? itemValue : itemValue.value
-
-        return normalizedItem === item.value
-      })
-
-      this.values.splice(index, 1)
-      this.updateModel()
-
-      this.$emit('remove', item, index)
-    },
-
-    sortList () {
-      this.sortedList = this.deleteOnly
-        ? 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.$emit('clear', this.values)
-      this.values = []
-      this.updateModel()
-    }
-  }
-}
-</script>
+<template>
+  <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 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">
+            <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>
+      </q-list>
+    </template>
+  </qas-search-box>
+</template>
+
+<script>
+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,
+
+    // private
+    PvSelectListCheckbox
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    addLabel: {
+      type: String,
+      default: 'Adicionar'
+    },
+
+    deleteLabel: {
+      type: String,
+      default: 'Excluir'
+    },
+
+    deleteOnly: {
+      type: Boolean
+    },
+
+    emitValue: {
+      type: Boolean,
+      default: true
+    },
+
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+
+    readonly: {
+      type: Boolean
+    },
+
+    searchBoxProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    useEmitLabelValueOnly: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  emits: [
+    'add',
+    'remove',
+    'clear',
+    'update:modelValue'
+  ],
+
+  data () {
+    return {
+      searchBox: null,
+      sortedList: [],
+      values: [],
+      results: []
+    }
+  },
+
+  computed: {
+    defaultSearchBoxProps () {
+      return {
+        fuseOptions: { keys: ['label'] },
+
+        ...this.searchBoxProps,
+
+        outlined: true
+      }
+    },
+
+    hasLazyLoading () {
+      return this.defaultSearchBoxProps.useLazyLoading
+    },
+
+    list () {
+      return this.defaultSearchBoxProps.list || []
+    },
+
+    slotData () {
+      return {
+        add: this.add,
+        remove: this.remove,
+        updateModel: this.updateModel
+      }
+    },
+
+    isClearSelectionDisabled () {
+      return !this.modelValue.length || this.readonly || !this.results.length
+    },
+
+    hasSearch () {
+      return this.searchBox.mx_search
+    }
+  },
+
+  watch: {
+    list: {
+      handler (value) {
+        if (!this.hasLazyLoading) return this.sortList()
+
+        this.sortedList = [...value]
+      },
+
+      immediate: true
+    },
+
+    modelValue: {
+      handler (value) {
+        this.values = [...value]
+      },
+
+      deep: true,
+      immediate: true
+    }
+  },
+
+  mounted () {
+    this.searchBox = this.$refs.searchBox
+  },
+
+  created () {
+    if (!this.hasLazyLoading) this.handleList()
+  },
+
+  methods: {
+    add (item) {
+      this.values.push(this.getNormalizedValue(item))
+      this.updateModel()
+
+      this.$emit('add', item)
+    },
+
+    handleList () {
+      if (this.modelValue.length) {
+        return this.sortList()
+      }
+
+      const unwatch = this.$watch('modelValue', () => {
+        if (!this.sortedList.length) {
+          this.sortList()
+          unwatch()
+        }
+      })
+    },
+
+    remove (item) {
+      const index = this.values.findIndex(itemValue => {
+        const normalizedItem = this.emitValue ? itemValue : itemValue.value
+
+        return normalizedItem === item.value
+      })
+
+      this.values.splice(index, 1)
+      this.updateModel()
+
+      this.$emit('remove', item, index)
+    },
+
+    sortList () {
+      this.sortedList = this.deleteOnly
+        ? 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.$emit('clear', this.values)
+      this.values = []
+      this.updateModel()
+    }
+  }
+}
+</script>

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

@@ -1,108 +1,108 @@
-type: component
-
-mixins:
-  - '@bildvitta/quasar-ui-asteroid/dist/api/QasSearchBox.json'
-
-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
-
-  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: []
-    type: Array
-    examples: [v-model="value"]
-    model: true
-
-  options-to-exclude:
-    desc: Lista de valores que não serão exibidos na lista de resultados (options/list) que pode ser uuid/id/slug.
-    default: []
-    type: Array
-    examples:
-      - options-to-exclude="['uuid1', 'uuid2', 'uuid3']"
-
-  readonly:
-    desc: Habilita modo visualização.
-    default: false
-    type: Boolean
-
-  search-box-props:
-    desc: Repassa props para o componente "QasSearchBox"
-    default: {}
-    type: Object
-
-  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:
-  item:
-    desc: Acesso dentro do "<q-item />.
-    scope:
-      item:
-        desc: Item atual da lista
-        type: Object
-
-      add:
-        desc: Função para adicionar um item ao 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
-
-events:
-  '@add -> function(item)':
-    desc: Dispara toda vez que um item é adicionado no v-model.
-    params:
-      item:
-        desc: Item adicionado
-        type: String
-
-  '@remove -> function (item, index)':
-    desc: Dispara toda vez que um item é removido do v-model.
-    params:
-      item:
-        desc: Valor removido.
-        type: String
-      index:
-        desc: Index do item removido.
-        type: Number
-
-  '@clear -> function(oldValue)':
-    desc: Dispara toda vez que o v-model é limpo através do botão de "Limpar seleção".
-    params:
-      oldValue:
-        desc: O valor do v-model anterior antes de limpá-lo.
-        type: Array
-
-  '@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
+type: component
+
+mixins:
+  - '@bildvitta/quasar-ui-asteroid/dist/api/QasSearchBox.json'
+
+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
+
+  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: []
+    type: Array
+    examples: [v-model="value"]
+    model: true
+
+  options-to-exclude:
+    desc: Lista de valores que não serão exibidos na lista de resultados (options/list) que pode ser uuid/id/slug.
+    default: []
+    type: Array
+    examples:
+      - options-to-exclude="['uuid1', 'uuid2', 'uuid3']"
+
+  readonly:
+    desc: Habilita modo visualização.
+    default: false
+    type: Boolean
+
+  search-box-props:
+    desc: Repassa props para o componente "QasSearchBox"
+    default: {}
+    type: Object
+
+  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:
+  item:
+    desc: Acesso dentro do "<q-item />.
+    scope:
+      item:
+        desc: Item atual da lista
+        type: Object
+
+      add:
+        desc: Função para adicionar um item ao 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
+
+events:
+  '@add -> function(item)':
+    desc: Dispara toda vez que um item é adicionado no v-model.
+    params:
+      item:
+        desc: Item adicionado
+        type: String
+
+  '@remove -> function (item, index)':
+    desc: Dispara toda vez que um item é removido do v-model.
+    params:
+      item:
+        desc: Valor removido.
+        type: String
+      index:
+        desc: Index do item removido.
+        type: Number
+
+  '@clear -> function(oldValue)':
+    desc: Dispara toda vez que o v-model é limpo através do botão de "Limpar seleção".
+    params:
+      oldValue:
+        desc: O valor do v-model anterior antes de limpá-lo.
+        type: Array
+
+  '@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