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

package/src/components/tabs-generator/QasTabsGenerator.yml

@@ -0,0 +1,67 @@
+type: component
+
+mixins:
+  - quasar/dist/api/QTabs.json
+
+meta:
+  desc: Componente para gerar tab dinamicamente, implementa o QTab e Qtabs.
+
+props:
+  active-color:
+    desc: Cor da tab quando ela está ativa.
+    type: String
+    examples: ['primary', 'negative', 'positive']
+
+  counter-props:
+    desc: Contador de cada tags, funciona como um "notificação"
+    default: {}
+    type: Object
+    examples: ["{ tab: 2 }"]
+
+  fuse-options:
+    desc: Configurações do [fuse.js](https://fusejs.io/api/options.html).
+    default: { keys: ['label'] }
+    type: Object
+
+  indicator-color:
+    desc: Cor do indicador.
+    default: primary
+    type: String
+
+  model-value:
+    desc: Model do componente, controla qual é a tab atual selecionada.
+    type: String
+
+  tab-class:
+    desc: Classe do QTab
+    default: text-primary
+    type: String
+
+  tabs:
+    desc: Objeto contendo todas as tabs a serem geradas.
+    default: {}
+    type: Object
+    examples: ["{ tab1: 'tab1', tab2: 'tab2' }"]
+
+slots:
+  'tab-[nome-da-chave]':
+    desc: Slot dinâmico gerado a partir das chave passada na prop "tabs", substitui todo o "q-tab".
+    scope:
+      item:
+        desc: Objeto com informações da tab atual
+        type: Object
+
+  'tab-after-[nome-da-chave]':
+    desc: Slot dinâmico gerado a partir das chave passada na prop "tabs", substitui o conteúdo dentro do "q-tab".
+    scope:
+      item:
+        desc: Objeto com informações da tab atual
+        type: Object
+
+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.
+        type: String

package/src/components/text-truncate/QasTextTruncate.vue

@@ -4,15 +4,10 @@
       <div ref="truncate" :class="truncateTextClass">
         <slot>{{ text }}</slot>
       </div>
-      <div v-if="hasTruncate" class="cursor-pointer text-primary" @click="toggleDialog">{{ seeMoreLabel }}</div>
+      <div v-if="isTruncated" class="cursor-pointer text-primary" @click="toggleDialog">{{ seeMoreLabel }}</div>
     </div>
-    <qas-dialog v-model="showDialog" :cancel="false" :ok="false" v-bind="dialog">
-      <template #header>
-        <div class="row" :class="headerClass">
-          <div v-if="dialogTitle" class="text-bold text-subtitle1">{{ dialogTitle }}</div>
-          <qas-btn v-close-popup dense flat icon="close" rounded />
-        </div>
-      </template>
+
+    <qas-dialog v-model="showDialog" v-bind="defaultDialogProps">
       <template #description>
         <slot>
           <div>{{ text }}</div>
@@ -23,20 +18,20 @@
 </template>
 
 <script>
-import screen from '../../mixins/screen'
-import QasDialog from '../dialog/QasDialog'
-import QasBtn from '../btn/QasBtn'
+import screenMixin from '../../mixins/screen'
+import QasDialog from '../dialog/QasDialog.vue'
 
 export default {
+  name: 'QasTextTruncate',
+
   components: {
-    QasDialog,
-    QasBtn
+    QasDialog
   },
 
-  mixins: [screen],
+  mixins: [screenMixin],
 
   props: {
-    dialog: {
+    dialogProps: {
       type: Object,
       default: () => ({
         persistent: false
@@ -74,15 +69,28 @@ export default {
 
   computed: {
     truncateTextClass () {
-      return (this.hasTruncate || this.$_isSmall) && 'ellipsis q-pr-sm'
+      return (this.isTruncated || this.mx_isSmall) && 'ellipsis q-pr-sm'
     },
 
-    hasTruncate () {
+    isTruncated () {
       return this.textWidth > this.maxPossibleWidth
     },
 
     headerClass () {
       return this.dialogTitle ? 'justify-between' : 'justify-end'
+    },
+
+    defaultDialogProps () {
+      return {
+        cancel: false,
+        ok: false,
+        useCloseIcon: true,
+        ...this.dialogProps,
+        card: {
+          title: this.dialogTitle,
+          description: this.text
+        }
+      }
     }
   },
 

package/src/components/text-truncate/QasTextTruncate.yml

@@ -0,0 +1,32 @@
+type: component
+
+meta:
+  desc: Trunca um texto baseado no tamanho do elemento pai e adiciona um rotulo "ver mais" que quando clicado mostra um dialog com o texto original completo (sem ser truncado).
+
+props:
+  dialog-props:
+    desc: Repassa todas props e eventos para o componente `QasDialog`.
+    type: Object
+    default: { persistent: false }
+
+  dialog-title:
+    desc: Seta o título do dialog.
+    type: String
+
+  max-width:
+    desc: Seta o tamanho máximo do texto.
+    type: Number
+    default: 0
+
+  see-more-label:
+    desc: Texto que vai aparecer para ser clicado quando o texto original for truncado.
+    type: String
+    default: Ver mais
+
+  text:
+    desc: Texto a ser truncado.
+    type: String
+
+slots:
+  default:
+    desc: slot padrão que é utilizado para acessar o texto original (tanto o que é truncado quando o de dentro do dialog)

package/src/components/transfer/QasTransfer.vue

@@ -1,14 +1,15 @@
 <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 form-mode :list="optionsList" v-bind="searchBoxProps">
         <template #default="{ results }">
           <q-list separator>
-            <q-item v-for="(item, index) in results" :key="index" :class="itemClass(item, true)" clickable @click="onSelectQueue(item, true)">
+            <q-item v-for="(item, index) in results" :key="index" :class="getItemClass(item, true)" clickable @click="onSelectQueue(item, true)">
               <slot name="item-first-column">
-                <q-item-section>{{ item[labelKey] }}</q-item-section>
+                <q-item-section>{{ getItemLabel(item) }}</q-item-section>
               </slot>
             </q-item>
           </q-list>
@@ -18,10 +19,8 @@
 
     <div class="col-12 col-sm-auto items-center justify-center q-col-gutter-md row" :class="actionsClass">
       <div>
-        <div>
-          <qas-btn :class="iconClass" dense :disabled="!firstQueue.length" flat icon="o_arrow_circle_down" rounded @click="setSelectedFromClick(true)" />
-          <q-tooltip anchor="top middle" self="center middle">Selecionar</q-tooltip>
-        </div>
+        <qas-btn :class="iconClass" dense :disabled="!firstQueue.length" flat icon="o_arrow_circle_down" rounded @click="setSelectedFromClick(true)" />
+        <q-tooltip anchor="top middle" self="center middle">Selecionar</q-tooltip>
       </div>
       <div>
         <div>
@@ -34,12 +33,12 @@
     <div class="col-12 col-sm">
       <qas-label label="Selecionadas" :quantity="selectedList.length" />
 
-      <qas-search-box v-bind="searchBoxProps" empty-list-height="300px" form-mode label="Selecionadas" :list="selectedList" :quantity="selectedList.length">
+      <qas-search-box v-bind="searchBoxProps" empty-list-height="300px" form-mode label="Selecionadas" :list="selectedList">
         <template #default="{ results }">
           <q-list separator>
-            <q-item v-for="(item, index) in results" :key="index" :class="itemClass(item)" clickable @click="onSelectQueue(item)">
+            <q-item v-for="(item, index) in results" :key="index" :class="getItemClass(item)" clickable @click="onSelectQueue(item)">
               <slot name="item-second-column">
-                <q-item-section>{{ item[labelKey] }}</q-item-section>
+                <q-item-section>{{ getItemLabel(item) }}</q-item-section>
               </slot>
             </q-item>
           </q-list>
@@ -50,19 +49,24 @@
 </template>
 
 <script>
+import { screenMixin } from '../../mixins'
 import { extend } from 'quasar'
 
-import QasBtn from '../btn/QasBtn'
-import QasLabel from '../label/QasLabel'
-import QasSearchBox from '../search-box/QasSearchBox'
+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
   },
 
+  mixins: [screenMixin],
+
   props: {
     emitValue: {
       type: Boolean
@@ -73,12 +77,6 @@ export default {
       type: Object
     },
 
-    hideEmptySlot: {
-      default: true,
-      type: Boolean
-    },
-
-    // TODO: Criar o "toLabel" para o slugar de selecionados.
     label: {
       default: '',
       required: true,
@@ -90,22 +88,29 @@ export default {
       type: String
     },
 
-    options: {
+    modelValue: {
       default: () => [],
       type: Array
     },
 
-    value: {
+    options: {
       default: () => [],
       type: Array
     },
 
+    useEmptySlot: {
+      default: true,
+      type: Boolean
+    },
+
     valueKey: {
       default: 'value',
       type: String
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       firstQueue: [],
@@ -117,31 +122,21 @@ export default {
 
   computed: {
     actionsClass () {
-      return !this.isSmall && 'column'
+      return !this.mx_isSmall && 'column'
     },
 
     gutterClass () {
-      return `q-col-gutter-${this.isMedium ? 'md' : 'xl'}`
+      return `q-col-gutter-${this.mx_untilLarge ? 'md' : 'xl'}`
     },
 
     iconClass () {
-      return !this.isSmall && 'qas-transfer__icon'
-    },
-
-    isMedium () {
-      return this.$q.screen.lt.md
-    },
-
-    // TODO: Small seria se fosse sm.
-    isSmall () {
-      return this.$q.screen.xs
+      return !this.mx_isSmall && 'qas-transfer__icon'
     },
 
     searchBoxProps () {
       return {
         fuseOptions: this.fuseOptions,
-        hideEmptySlot: this.hideEmptySlot,
-        list: this.options
+        useEmptySlot: this.useEmptySlot
       }
     }
   },
@@ -155,8 +150,8 @@ export default {
       immediate: true
     },
 
-    value: {
-      handler (value, oldValue) {
+    modelValue: {
+      handler () {
         this.setSelectedFromValue(true)
       },
 
@@ -178,7 +173,18 @@ export default {
       })
     },
 
-    handleEmit () {
+    getItemClass (object, isFirst) {
+      return this[isFirst
+        ? 'firstQueue'
+        : 'secondQueue'
+      ].some(item => item[this.valueKey] === object[this.valueKey]) && 'bg-secondary'
+    },
+
+    getItemLabel (item) {
+      return item?.[this.labelKey]
+    },
+
+    getModelValue () {
       const selectedList = extend(true, [], this.selectedList)
       return this.emitValue ? selectedList.map(item => item[this.valueKey]) : selectedList
     },
@@ -191,27 +197,20 @@ export default {
       this[model] = []
     },
 
-    itemClass (object, isFirst) {
-      return this[isFirst
-        ? 'firstQueue'
-        : 'secondQueue'
-      ].some(item => item[this.valueKey] === object[this.valueKey]) && 'bg-secondary'
-    },
-
     onSelectQueue (item, isFirst) {
       const model = isFirst ? 'firstQueue' : 'secondQueue'
       const index = this[model].findIndex(selected => selected[this.valueKey] === item[this.valueKey])
 
-      return ~index ? this[model].splice(index, 1) : this[model].push(item)
+      ~index ? this[model].splice(index, 1) : this[model].push(item)
     },
 
     setSelectedFromClick (isFirst) {
       this.handleSelectedList(isFirst)
-      this.updateValue()
+      this.updateModelValue()
     },
 
     setSelectedFromValue (isFirst) {
-      this.value.forEach(item => {
+      this.modelValue.forEach(item => {
         const selected = this.optionsList.find(option => {
           return option[this.valueKey] === (this.emitValue ? item : item[this.valueKey])
         })
@@ -224,8 +223,8 @@ export default {
       this.handleSelectedList(isFirst)
     },
 
-    updateValue () {
-      return this.$emit('input', this.handleEmit())
+    updateModelValue () {
+      return this.$emit('update:modelValue', this.getModelValue())
     }
   }
 }

package/src/components/transfer/QasTransfer.yml

@@ -0,0 +1,59 @@
+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
+
+  model-value:
+    desc: Model do componente, controla quais itens estão na segunda coluna.
+    default: []
+    type: Array
+
+  fuse-options:
+    desc: Configurações do [fuse.js](https://fusejs.io/api/options.html).
+    default: { keys: ['label'] }
+    type: Object
+
+  label:
+    desc: Rotulo que vai ficar em cima da primeira coluna.
+    type: String
+    required: true
+
+  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
+
+  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