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

package/src/components/transfer/QasTransfer.vue

@@ -1,239 +1,239 @@
-<template>
-  <div class="qas-transfer row" :class="gutterClass">
-    <div class="col-12" />
-    <div class="col-12 col-sm">
-      <qas-label :label="label" :quantity="optionsList.length" />
-
-      <qas-search-box v-model:results="firstResults" :list="optionsList" outlined v-bind="searchBoxProps">
-        <template #default>
-          <q-list separator>
-            <q-item v-for="(item, index) in firstResults" :key="index" :class="getItemClass(item, true)" clickable @click="onSelectQueue(item, true)">
-              <slot name="item-first-column">
-                <q-item-section>{{ getItemLabel(item) }}</q-item-section>
-              </slot>
-            </q-item>
-          </q-list>
-        </template>
-      </qas-search-box>
-    </div>
-
-    <div class="col-12 col-sm-auto items-center justify-center q-col-gutter-md row" :class="actionsClass">
-      <div>
-        <qas-btn :class="iconClass" color="primary" :disabled="!firstQueue.length" icon="sym_r_arrow_circle_down" variant="tertiary" @click="setSelectedFromClick(true)" />
-        <q-tooltip anchor="top middle" self="center middle">Selecionar</q-tooltip>
-      </div>
-      <div>
-        <div>
-          <qas-btn :class="iconClass" color="primary" :disabled="!secondQueue.length" icon="sym_r_arrow_circle_up" variant="tertiary" @click="setSelectedFromClick()" />
-          <q-tooltip anchor="bottom middle" self="center middle">Remover</q-tooltip>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-12 col-sm">
-      <qas-label label="Selecionadas" :quantity="selectedList.length" />
-
-      <qas-search-box v-model:results="secondResults" v-bind="searchBoxProps" empty-list-height="300px" label="Selecionadas" :list="selectedList" outlined>
-        <template #default>
-          <q-list separator>
-            <q-item v-for="(item, index) in secondResults" :key="index" :class="getItemClass(item)" clickable @click="onSelectQueue(item)">
-              <slot name="item-second-column">
-                <q-item-section>{{ getItemLabel(item) }}</q-item-section>
-              </slot>
-            </q-item>
-          </q-list>
-        </template>
-      </qas-search-box>
-    </div>
-  </div>
-</template>
-
-<script>
-import { extend } from 'quasar'
-
-import QasBtn from '../btn/QasBtn.vue'
-import QasLabel from '../label/QasLabel.vue'
-import QasSearchBox from '../search-box/QasSearchBox.vue'
-
-export default {
-  name: 'QasTransfer',
-
-  components: {
-    QasBtn,
-    QasLabel,
-    QasSearchBox
-  },
-
-  props: {
-    emitValue: {
-      type: Boolean
-    },
-
-    fuseOptions: {
-      default: () => ({ keys: ['label'] }),
-      type: Object
-    },
-
-    label: {
-      default: '',
-      required: true,
-      type: String
-    },
-
-    labelKey: {
-      default: 'label',
-      type: String
-    },
-
-    modelValue: {
-      default: () => [],
-      type: Array
-    },
-
-    options: {
-      default: () => [],
-      type: Array
-    },
-
-    useEmptySlot: {
-      default: true,
-      type: Boolean
-    },
-
-    valueKey: {
-      default: 'value',
-      type: String
-    }
-  },
-
-  emits: ['update:modelValue'],
-
-  data () {
-    return {
-      firstQueue: [],
-      optionsList: [],
-      secondQueue: [],
-      selectedList: [],
-      firstResults: [],
-      secondResults: []
-    }
-  },
-
-  computed: {
-    actionsClass () {
-      return !this.$qas.screen.isSmall && 'column'
-    },
-
-    gutterClass () {
-      return `q-col-gutter-${this.$qas.screen.untilLarge ? 'md' : 'xl'}`
-    },
-
-    iconClass () {
-      return !this.$qas.screen.isSmall && 'qas-transfer__icon'
-    },
-
-    searchBoxProps () {
-      return {
-        fuseOptions: this.fuseOptions,
-        useEmptySlot: this.useEmptySlot
-      }
-    }
-  },
-
-  watch: {
-    options: {
-      handler (value) {
-        this.optionsList = extend(true, [], value)
-        this.setSelectedFromValue(true)
-      },
-
-      immediate: true
-    },
-
-    modelValue: {
-      handler () {
-        this.setSelectedFromValue(true)
-      },
-
-      immediate: true
-    }
-  },
-
-  methods: {
-    deleteItemsFromList (isFirst) {
-      this[isFirst ? 'firstQueue' : 'secondQueue'].forEach(item => {
-        const model = isFirst ? 'optionsList' : 'selectedList'
-        const index = this[model].findIndex(itemValue => {
-          return (itemValue[this.valueKey] || itemValue) === item[this.valueKey]
-        })
-
-        if (~index) {
-          this[model].splice(index, 1)
-        }
-      })
-    },
-
-    getItemClass (object, isFirst) {
-      return this[isFirst
-        ? 'firstQueue'
-        : 'secondQueue'
-      ].some(item => item[this.valueKey] === object[this.valueKey]) && 'bg-grey-4'
-    },
-
-    getItemLabel (item) {
-      return item?.[this.labelKey]
-    },
-
-    getModelValue () {
-      const selectedList = extend(true, [], this.selectedList)
-      return this.emitValue ? selectedList.map(item => item[this.valueKey]) : selectedList
-    },
-
-    handleSelectedList (isFirst) {
-      const model = isFirst ? 'firstQueue' : 'secondQueue'
-
-      this[isFirst ? 'selectedList' : 'optionsList'].push(...this[model])
-      this.deleteItemsFromList(isFirst)
-      this[model] = []
-    },
-
-    onSelectQueue (item, isFirst) {
-      const model = isFirst ? 'firstQueue' : 'secondQueue'
-      const index = this[model].findIndex(selected => selected[this.valueKey] === item[this.valueKey])
-
-      ~index ? this[model].splice(index, 1) : this[model].push(item)
-    },
-
-    setSelectedFromClick (isFirst) {
-      this.handleSelectedList(isFirst)
-      this.updateModelValue()
-    },
-
-    setSelectedFromValue (isFirst) {
-      this.optionsList.length && this.modelValue.forEach(item => {
-        const selected = this.optionsList.find(option => {
-          return option[this.valueKey] === (this.emitValue ? item : item[this.valueKey])
-        })
-
-        if (selected) {
-          this.firstQueue.push(extend(true, {}, selected))
-        }
-      })
-
-      this.handleSelectedList(isFirst)
-    },
-
-    updateModelValue () {
-      return this.$emit('update:modelValue', this.getModelValue())
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.qas-transfer {
-  &__icon {
-    transform: rotate(-90deg);
-  }
-}
-</style>
+<template>
+  <div class="qas-transfer row" :class="gutterClass">
+    <div class="col-12" />
+    <div class="col-12 col-sm">
+      <qas-label :label="label" :quantity="optionsList.length" />
+
+      <qas-search-box v-model:results="firstResults" :list="optionsList" outlined v-bind="searchBoxProps">
+        <template #default>
+          <q-list separator>
+            <q-item v-for="(item, index) in firstResults" :key="index" :class="getItemClass(item, true)" clickable @click="onSelectQueue(item, true)">
+              <slot name="item-first-column">
+                <q-item-section>{{ getItemLabel(item) }}</q-item-section>
+              </slot>
+            </q-item>
+          </q-list>
+        </template>
+      </qas-search-box>
+    </div>
+
+    <div class="col-12 col-sm-auto items-center justify-center q-col-gutter-md row" :class="actionsClass">
+      <div>
+        <qas-btn :class="iconClass" color="primary" :disabled="!firstQueue.length" icon="sym_r_arrow_circle_down" variant="tertiary" @click="setSelectedFromClick(true)" />
+        <q-tooltip anchor="top middle" self="center middle">Selecionar</q-tooltip>
+      </div>
+      <div>
+        <div>
+          <qas-btn :class="iconClass" color="primary" :disabled="!secondQueue.length" icon="sym_r_arrow_circle_up" variant="tertiary" @click="setSelectedFromClick()" />
+          <q-tooltip anchor="bottom middle" self="center middle">Remover</q-tooltip>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-12 col-sm">
+      <qas-label label="Selecionadas" :quantity="selectedList.length" />
+
+      <qas-search-box v-model:results="secondResults" v-bind="searchBoxProps" empty-list-height="300px" label="Selecionadas" :list="selectedList" outlined>
+        <template #default>
+          <q-list separator>
+            <q-item v-for="(item, index) in secondResults" :key="index" :class="getItemClass(item)" clickable @click="onSelectQueue(item)">
+              <slot name="item-second-column">
+                <q-item-section>{{ getItemLabel(item) }}</q-item-section>
+              </slot>
+            </q-item>
+          </q-list>
+        </template>
+      </qas-search-box>
+    </div>
+  </div>
+</template>
+
+<script>
+import { extend } from 'quasar'
+
+import QasBtn from '../btn/QasBtn.vue'
+import QasLabel from '../label/QasLabel.vue'
+import QasSearchBox from '../search-box/QasSearchBox.vue'
+
+export default {
+  name: 'QasTransfer',
+
+  components: {
+    QasBtn,
+    QasLabel,
+    QasSearchBox
+  },
+
+  props: {
+    emitValue: {
+      type: Boolean
+    },
+
+    fuseOptions: {
+      default: () => ({ keys: ['label'] }),
+      type: Object
+    },
+
+    label: {
+      default: '',
+      required: true,
+      type: String
+    },
+
+    labelKey: {
+      default: 'label',
+      type: String
+    },
+
+    modelValue: {
+      default: () => [],
+      type: Array
+    },
+
+    options: {
+      default: () => [],
+      type: Array
+    },
+
+    useEmptySlot: {
+      default: true,
+      type: Boolean
+    },
+
+    valueKey: {
+      default: 'value',
+      type: String
+    }
+  },
+
+  emits: ['update:modelValue'],
+
+  data () {
+    return {
+      firstQueue: [],
+      optionsList: [],
+      secondQueue: [],
+      selectedList: [],
+      firstResults: [],
+      secondResults: []
+    }
+  },
+
+  computed: {
+    actionsClass () {
+      return !this.$qas.screen.isSmall && 'column'
+    },
+
+    gutterClass () {
+      return `q-col-gutter-${this.$qas.screen.untilLarge ? 'md' : 'xl'}`
+    },
+
+    iconClass () {
+      return !this.$qas.screen.isSmall && 'qas-transfer__icon'
+    },
+
+    searchBoxProps () {
+      return {
+        fuseOptions: this.fuseOptions,
+        useEmptySlot: this.useEmptySlot
+      }
+    }
+  },
+
+  watch: {
+    options: {
+      handler (value) {
+        this.optionsList = extend(true, [], value)
+        this.setSelectedFromValue(true)
+      },
+
+      immediate: true
+    },
+
+    modelValue: {
+      handler () {
+        this.setSelectedFromValue(true)
+      },
+
+      immediate: true
+    }
+  },
+
+  methods: {
+    deleteItemsFromList (isFirst) {
+      this[isFirst ? 'firstQueue' : 'secondQueue'].forEach(item => {
+        const model = isFirst ? 'optionsList' : 'selectedList'
+        const index = this[model].findIndex(itemValue => {
+          return (itemValue[this.valueKey] || itemValue) === item[this.valueKey]
+        })
+
+        if (~index) {
+          this[model].splice(index, 1)
+        }
+      })
+    },
+
+    getItemClass (object, isFirst) {
+      return this[isFirst
+        ? 'firstQueue'
+        : 'secondQueue'
+      ].some(item => item[this.valueKey] === object[this.valueKey]) && 'bg-grey-4'
+    },
+
+    getItemLabel (item) {
+      return item?.[this.labelKey]
+    },
+
+    getModelValue () {
+      const selectedList = extend(true, [], this.selectedList)
+      return this.emitValue ? selectedList.map(item => item[this.valueKey]) : selectedList
+    },
+
+    handleSelectedList (isFirst) {
+      const model = isFirst ? 'firstQueue' : 'secondQueue'
+
+      this[isFirst ? 'selectedList' : 'optionsList'].push(...this[model])
+      this.deleteItemsFromList(isFirst)
+      this[model] = []
+    },
+
+    onSelectQueue (item, isFirst) {
+      const model = isFirst ? 'firstQueue' : 'secondQueue'
+      const index = this[model].findIndex(selected => selected[this.valueKey] === item[this.valueKey])
+
+      ~index ? this[model].splice(index, 1) : this[model].push(item)
+    },
+
+    setSelectedFromClick (isFirst) {
+      this.handleSelectedList(isFirst)
+      this.updateModelValue()
+    },
+
+    setSelectedFromValue (isFirst) {
+      this.optionsList.length && this.modelValue.forEach(item => {
+        const selected = this.optionsList.find(option => {
+          return option[this.valueKey] === (this.emitValue ? item : item[this.valueKey])
+        })
+
+        if (selected) {
+          this.firstQueue.push(extend(true, {}, selected))
+        }
+      })
+
+      this.handleSelectedList(isFirst)
+    },
+
+    updateModelValue () {
+      return this.$emit('update:modelValue', this.getModelValue())
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.qas-transfer {
+  &__icon {
+    transform: rotate(-90deg);
+  }
+}
+</style>

package/src/components/transfer/QasTransfer.yml

@@ -1,60 +1,60 @@
-type: component
-
-meta:
-  desc: Componente para transferir itens entre 2 lista (colunas).
-
-props:
-  emit-value:
-    desc: Controla como sera o retorno do model, se "true" será um array de string, se "false" array de objeto.
-    type: Boolean
-
-  fuse-options:
-    desc: Configurações do [fuse.js](https://fusejs.io/api/options.html).
-    default: { keys: ['label'] }
-    type: Object
-
-  label-key:
-    desc: Nos options, você pode passar um array de objeto com qualquer chave/valor, esta prop serve para identificar qual será o equivalente ao "label".
-    default: label
-    type: String
-
-  label:
-    desc: Rotulo que vai ficar em cima da primeira coluna.
-    type: String
-    required: true
-
-  model-value:
-    desc: Model do componente, controla quais itens estão na segunda coluna.
-    default: []
-    type: Array
-    model: true
-
-  options:
-    desc: Array de objetos com todos items que serão transferidos
-    default: []
-    type: Array
-
-  use-empty-slot:
-    desc: Prop que será repassada para o componente "QasSearchBox", basicamente esconde o slot "empty-result".
-    type: Boolean
-    default: true
-
-  value-key:
-    desc: Nos options, você pode passar um array de objeto com qualquer chave/valor, esta prop serve para identificar qual será o equivalente ao "value".
-    default: value
-    type: String
-
-slots:
-  item-first-column:
-    desc: Slot para acessar cada item dentro do `q-item` da primeira coluna.
-
-  item-second-column:
-    desc: Slot para acessar cada item dentro do `q-item` da segunda coluna.
-
-events:
-  '@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 (pode ser array de string ou objeto).
-        type: Array
+type: component
+
+meta:
+  desc: Componente para transferir itens entre 2 lista (colunas).
+
+props:
+  emit-value:
+    desc: Controla como sera o retorno do model, se "true" será um array de string, se "false" array de objeto.
+    type: Boolean
+
+  fuse-options:
+    desc: Configurações do [fuse.js](https://fusejs.io/api/options.html).
+    default: { keys: ['label'] }
+    type: Object
+
+  label-key:
+    desc: Nos options, você pode passar um array de objeto com qualquer chave/valor, esta prop serve para identificar qual será o equivalente ao "label".
+    default: label
+    type: String
+
+  label:
+    desc: Rotulo que vai ficar em cima da primeira coluna.
+    type: String
+    required: true
+
+  model-value:
+    desc: Model do componente, controla quais itens estão na segunda coluna.
+    default: []
+    type: Array
+    model: true
+
+  options:
+    desc: Array de objetos com todos items que serão transferidos
+    default: []
+    type: Array
+
+  use-empty-slot:
+    desc: Prop que será repassada para o componente "QasSearchBox", basicamente esconde o slot "empty-result".
+    type: Boolean
+    default: true
+
+  value-key:
+    desc: Nos options, você pode passar um array de objeto com qualquer chave/valor, esta prop serve para identificar qual será o equivalente ao "value".
+    default: value
+    type: String
+
+slots:
+  item-first-column:
+    desc: Slot para acessar cada item dentro do `q-item` da primeira coluna.
+
+  item-second-column:
+    desc: Slot para acessar cada item dentro do `q-item` da segunda coluna.
+
+events:
+  '@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 (pode ser array de string ou objeto).
+        type: Array