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

package/src/components/gallery/QasGallery.vue

@@ -1,12 +1,13 @@
+
 <template>
-  <qas-box class="col-12 gallery">
+  <qas-box class="gallery">
     <div class="q-col-gutter-md row">
-      <div v-for="(item, index) in initialitems()" :key="index" :class="galleryColumnsClasses">
-        <q-img class="cursor-pointer rounded-borders" :height="itemHeight" :src="item" @click="toggleCarouselDialog(index)" @error="onError(item)" />
+      <div v-for="(image, index) in initialImages()" :key="index" :class="galleryColumnsClasses">
+        <q-img class="cursor-pointer rounded-borders" :height="imageHeight" :src="image" @click="toggleCarouselDialog(index)" @error="onError(image)" />
       </div>
-      <slot name="default">
+      <slot>
         <div v-if="!hideShowMore" class="full-width text-center">
-          <span class="cursor-pointer justify-center text-primary text-weight-bolder" @click="showMore">{{ showMoreLabel }}</span>
+          <qas-btn class="text-weight-bolder" color="primary" flat @click="showMore">{{ showMoreLabel }}</qas-btn>
         </div>
       </slot>
       <qas-dialog v-model="carouselDialog" :cancel="false" class="q-pa-xl" min-width="1100px" :ok="false" :persistent="false">
@@ -16,9 +17,9 @@
           </div>
         </template>
         <template #description>
-          <q-carousel v-model="itemIndex" animated :arrows="!$_isSmall" control-text-color="primary" :fullscreen="$_isSmall" :height="carouselitemHeight" :next-icon="carouselNextIcon" :prev-icon="carouselPreviousIcon" swipeable :thumbnails="showThumbnails">
-            <q-carousel-slide v-for="(item, index) in items" :key="index" class="bg-no-repeat bg-size-contain" :img-src="item" :name="index">
-              <div v-if="$_isSmall" class="full-width justify-end row">
+          <q-carousel v-model="imageIndex" animated :arrows="!mx_isSmall" control-text-color="primary" :fullscreen="mx_isSmall" :height="carouselImageHeight" :next-icon="carouselNextIcon" :prev-icon="carouselPreviousIcon" swipeable :thumbnails="showThumbnails">
+            <q-carousel-slide v-for="(image, index) in clonedImages" :key="index" class="bg-no-repeat bg-size-contain" :img-src="image" :name="index">
+              <div v-if="mx_isSmall" class="full-width justify-end row">
                 <qas-btn dense flat icon="o_close" @click="toggleCarouselDialog" />
               </div>
             </q-carousel-slide>
@@ -33,6 +34,8 @@
 import screenMixin from '../../mixins/screen'
 
 export default {
+  name: 'QasGallery',
+
   mixins: [screenMixin],
 
   props: {
@@ -51,17 +54,17 @@ export default {
       default: ''
     },
 
-    initialLength: {
+    initialSize: {
       type: Number,
       default: 6
     },
 
-    items: {
+    images: {
       type: Array,
       default: () => []
     },
 
-    loadLength: {
+    loadSize: {
       type: Number,
       default: 6
     },
@@ -69,70 +72,84 @@ export default {
     showMoreLabel: {
       type: String,
       default: 'Ver mais'
+    },
+
+    useLoadAll: {
+      type: Boolean
     }
   },
 
   data () {
     return {
       carouselDialog: false,
-      itemIndex: [],
-      displayeditems: this.initialLength
+      clonedImages: [],
+      imageIndex: [],
+      displayedImages: this.initialSize
     }
   },
 
   computed: {
-    itemHeight () {
-      if (this.isSingleItem) {
+    imageHeight () {
+      if (this.isSingleImage) {
         return this.height || 'auto'
       }
 
-      return this.$_isSmall ? '90px' : '120px'
+      return this.mx_isSmall ? '90px' : '120px'
     },
 
     galleryColumnsClasses () {
-      if (this.isSingleItem) return 'col-12'
+      if (this.isSingleImage) return 'col-12'
 
-      return this.$_isSmall ? 'col-6' : 'col-2'
+      return this.mx_isSmall ? 'col-6' : 'col-2'
     },
 
     hideShowMore () {
-      return this.items.length <= this.displayeditems
+      return (this.clonedImages.length <= this.displayedImages) || this.useLoadAll
     },
 
-    carouselitemHeight () {
+    carouselImageHeight () {
       return 'calc((500/976) * 100vh)'
     },
 
     showThumbnails () {
-      return !this.isSingleItem
+      return !this.isSingleImage
     },
 
-    isSingleItem () {
-      return this.items.length === 1
+    isSingleImage () {
+      return this.clonedImages.length === 1
+    }
+  },
+
+  watch: {
+    images: {
+      handler (value) {
+        this.clonedImages = [...value]
+      },
+      immediate: true
     }
   },
 
   methods: {
-    toggleCarouselDialog (item) {
-      this.itemIndex = item
+    toggleCarouselDialog (image) {
+      this.imageIndex = image
       this.carouselDialog = !this.carouselDialog
     },
 
     showMore () {
-      this.displayeditems += this.loadLength
+      this.displayedImages += this.loadSize
     },
 
     onError (error) {
-      const index = this.items.findIndex(item => item === error)
+      const index = this.clonedImages.findIndex(image => image === error)
 
       if (~index) {
-        this.$delete(this.items, index)
+        this.clonedImages.splice(index, 1)
         this.$forceUpdate()
       }
     },
 
-    initialitems () {
-      return this.items.slice(0, this.displayeditems)
+    initialImages () {
+      return this.useLoadAll ? this.clonedImages : this.clonedImages.slice(0, this.displayedImages)
     }
   }
 }

package/src/components/gallery/QasGallery.yml

@@ -0,0 +1,51 @@
+type: component
+
+mixins:
+  - '@bildvitta/quasar-ui-asteroid/dist/api/QasBox.json'
+
+
+meta:
+  desc: Componente para galeria, mostrando images dentro de um "QasDialog" ao clicar nelas.
+
+props:
+  carousel-next-icon:
+    desc: Ícone dentro do carousel para passar para próxima imagem.
+    default: o_chevron_right
+    type: String
+
+  carousel-previous-icon:
+    desc: Ícone dentro do carousel para passar para a imagem anterior.
+    default: o_chevron_left
+    type: String
+
+  height:
+    desc: Altura da imagem (fora do dialog).
+    type: String
+
+  initial-size:
+    desc: Quantidade de imagens iniciais.
+    default: 6
+    type: Number
+
+  images:
+    desc: Imagens a serem exibidas.
+    default: 6
+    type: Number
+
+  load-size:
+    desc: Quantidade de fotos carregadas por vez.
+    default: 6
+    type: Number
+
+  show-more-label:
+    desc: Rótulo do botão de "mostrar mais".
+    default: Ver mais
+    type: String
+
+  use-load-all:
+    desc: Carrega todas imagens de uma única vez.
+    type: Boolean
+
+slots:
+  default:
+    desc: Slot para todo conteúdo onde fica o botão "mostrar mais".

package/src/components/grid-generator/QasGridGenerator.vue

@@ -1,9 +1,9 @@
 <template>
-  <div :class="classes">
-    <div v-for="(field, key) in formattedFields" :key="key" :class="getFieldClass(key, true)">
+  <div :class="mx_classes">
+    <div v-for="(field, key) in formattedFields" :key="key" :class="mx_getFieldClass(key, true)">
       <slot :field="slotValue[key]" :name="`field-${field.name}`">
         <slot :field="slotValue[key]" name="header">
-          <div :class="headerClass">{{ field.label }}</div>
+          <header :class="headerClass">{{ field.label }}</header>
         </slot>
 
         <slot :field="slotValue[key]" name="content">
@@ -15,12 +15,14 @@
 </template>
 
 <script>
-import generatorMixin from '../../mixins/generator'
+import { generatorMixin } from '../../mixins'
 import { humanize } from '../../helpers/filters'
 import { extend } from 'quasar'
-import { isObject } from 'lodash'
+import { isObject } from 'lodash-es'
 
 export default {
+  name: 'QasGridGenerator',
+
   mixins: [generatorMixin],
 
   props: {
@@ -79,16 +81,22 @@ export default {
     },
 
     resultsByFields () {
+      return this.getResultsByFields()
+    }
+  },
+
+  methods: {
+    getResultsByFields () {
       const formattedResult = {}
       const result = extend(true, {}, this.result)
+
       for (const key in result) {
         if (this.formattedFields[key]?.type) {
           formattedResult[key] = humanize(this.formattedFields[key], result[key]) || this.emptyResultText
-          // TODO: Rever.
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
           this.slotValue[key] = { ...this.formattedFields[key], formattedResult: formattedResult[key] }
         }
       }
+
       return formattedResult
     }
   }

package/src/components/grid-generator/QasGridGenerator.yml

@@ -0,0 +1,73 @@
+type: component
+
+meta:
+  desc: Componente para criação de textos dinâmicos.
+
+props:
+  content-class:
+    desc: Classe de cada "div" pai referente ao resultado.
+    default: ''
+    type: [Array, Object, String]
+
+  header-class:
+    desc: Classe de cada "header" pai referente ao "label".
+    default: 'text-bold'
+    type: [Array, Object, String]
+
+  hide-empty-result:
+    desc: Se o resultado de algum campo for vazio, ele remove todo o campo.
+    type: Boolean
+
+  empty-result-text:
+    desc: Se o resultado de algum campo for vazio, esta prop define qual será o valor padrão.
+    default: '-'
+    type: String
+
+  result:
+    desc: Resultado contendo todas informações para serem exibidas na tela.
+    default: {}
+    type: Object
+    examples: ["{ 'joah@examples.com' }"]
+
+  fields:
+    desc: Lista de field contendo informações necessárias para a criação do campo correspondente.
+    default: {}
+    type: Object
+    examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
+
+  columns:
+    desc: Colunas do grid de cada campo.
+    default: col-6
+    type: [Array, String, Object]
+    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]"]
+
+  gutter:
+    desc: Espaçamento entre colunas.
+    default: md
+    type: String
+    examples: [xs, sm, md, lg, xl]
+
+slots:
+  'field-[nome-da-chave]':
+    desc: Slot para todo o conteúdo dentro de cada grid (header e content).
+    scope:
+      field:
+        desc: Conteúdo do field atual mais o resultado formatado.
+        default: {}
+        type: Object
+
+  header:
+    desc: Slot para o header.
+    scope:
+      field:
+        desc: Conteúdo do field atual mais o resultado formatado.
+        default: {}
+        type: Object
+
+  content:
+    desc: Slot para o conteúdo (content).
+    scope:
+      field:
+        desc: Conteúdo do field atual mais o resultado formatado.
+        default: {}
+        type: Object

package/src/components/input/QasInput.vue

@@ -1,9 +1,8 @@
 <template>
   <div>
-    <q-input ref="mask" v-model="model" v-bind="$attrs" bottom-slots :mask="mask" unmasked-value v-on="listeners">
-      <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" />
+    <q-input ref="input" v-model="model" bottom-slots v-bind="$attrs" :mask="mask" :outlined="outlined" :unmasked-value="unmaskedValue">
+      <template v-for="(_, name) in $slots" #[name]="context">
+        <slot :name="name" v-bind="context || {}" />
       </template>
     </q-input>
   </div>
@@ -13,43 +12,41 @@
 export default {
   name: 'QasInput',
 
+  inheritAttrs: false,
+
   props: {
-    value: {
+    modelValue: {
       default: '',
       type: String
-    }
-  },
-
-  computed: {
-    model: {
-      get () {
-        return this.value
-      },
-
-      set (value) {
-        return this.$emit('input', value)
-      }
     },
 
-    listeners () {
-      const { input, ...listeners } = this.$listeners
-      return listeners
+    unmaskedValue: {
+      default: true,
+      type: Boolean
     },
 
-    inputReference () {
-      return this.$refs.mask
-    },
+    outlined: {
+      default: true,
+      type: Boolean
+    }
+  },
+
+  emits: ['update:modelValue'],
 
+  computed: {
     hasError () {
       return this.inputReference.hasError
     },
 
+    inputReference () {
+      return this.$refs.input
+    },
+
     mask () {
       const { mask } = this.$attrs
+      const hasDefaultMask = Object.prototype.hasOwnProperty.call(this.masks, mask)
 
-      return Object.prototype.hasOwnProperty.call(this.masks, mask)
-        ? this.masks[mask]()
-        : mask
+      return hasDefaultMask ? this.masks[mask]() : mask
     },
 
     masks () {
@@ -60,12 +57,22 @@ export default {
         phone: () => this.toggleMask('(##) ####-#####', '(##) #####-####'),
         'postal-code': () => '#####-###'
       }
+    },
+
+    model: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        return this.$emit('update:modelValue', value)
+      }
     }
   },
 
   watch: {
     mask () {
-      const input = this.$refs.mask.$refs.input
+      const input = this.inputReference.$el?.querySelector('input')
 
       requestAnimationFrame(() => {
         input.selectionStart = input.value ? input.value.length : ''
@@ -74,21 +81,21 @@ export default {
   },
 
   methods: {
-    toggleMask (first, second) {
-      const length = first.split('#').length - 2
-      return this.value?.length > length ? second : first
-    },
-
-    validate (value) {
-      return this.inputReference.validate(value)
-    },
-
     focus () {
       return this.inputReference.focus()
     },
 
     resetValidation () {
       return this.inputReference.resetValidation()
+    },
+
+    toggleMask (first, second) {
+      const length = first.split('#').length - 2
+      return this.modelValue?.length > length ? second : first
+    },
+
+    validate (value) {
+      return this.inputReference.validate(value)
     }
   }
 }

package/src/components/input/QasInput.yml

@@ -0,0 +1,32 @@
+type: component
+
+mixins:
+  - quasar/dist/api/QInput.json
+
+meta:
+  desc: Componente para input que implementa o "QInput" repassando propriedades, slots e eventos.
+
+props:
+  model-value:
+    desc: Model do componente.
+    type: String
+    examples: [v-model="value"]
+    model: true
+
+  unmasked-value:
+    desc: Remove a mascara do v-model.
+    default: true
+    type: Boolean
+
+  outlined:
+    desc: Controla borda do input.
+    default: true
+    type: Boolean
+
+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: String

package/src/components/label/QasLabel.vue

@@ -1,17 +1,21 @@
 <template>
-  <div class="text-bold text-subtitle2" :class="labelClasses" v-bind="$attrs" v-on="$listeners">
-    <!-- TODO: Remover camelCase. -->
-    <slot :formattedLabel="formattedLabel">
-      {{ formattedLabel }}
-    </slot>
+  <div class="text-bold text-subtitle2" :class="labelClass">
+    <slot :label-with-suffix="labelWithSuffix">{{ labelWithSuffix }}</slot>
   </div>
 </template>
 
 <script>
-import formatLabel from '../../helpers/label'
+import { addCounterSuffix } from '../../helpers'
 
 export default {
+  name: 'QasLabel',
+
   props: {
+    count: {
+      default: 0,
+      type: [Number, String]
+    },
+
     label: {
       default: '',
       type: String
@@ -20,21 +24,16 @@ export default {
     margin: {
       default: 'sm',
       type: String
-    },
-
-    quantity: {
-      default: 0,
-      type: Number
     }
   },
 
   computed: {
-    formattedLabel () {
-      return formatLabel(this.quantity, this.label)
+    labelClass () {
+      return `q-mb-${this.margin}`
     },
 
-    labelClasses () {
-      return `q-mb-${this.margin}`
+    labelWithSuffix () {
+      return addCounterSuffix(this.label, parseFloat(this.count))
     }
   }
 }

package/src/components/label/QasLabel.yml

@@ -0,0 +1,28 @@
+type: component
+
+meta:
+  desc: Componente para controlar textos que separam conteúdos, formatando com um sufixo quando existe um contador.
+
+props:
+  count:
+    desc: Contador que vai ficar ao lado do texto.
+    default: 0
+    type: Number
+
+  label:
+    desc: Texto a ser exibido.
+    type: String
+
+  margin:
+    desc: Espaçamento entre o texto e o contador.
+    default: sm
+    type: String
+    examples: [xs, sm, md, lg, xl]
+
+slots:
+  default:
+    desc: Slot para acessar elemento do texto.
+    scope:
+      label-with-suffix:
+        desc: Objeto com texto formatado contendo ou não um sufixo
+        type: String

package/src/components/layout/QasLayout.vue

@@ -1,11 +1,11 @@
 <template>
   <q-layout view="hHh Lpr lFf">
     <slot name="app-bar">
-      <qas-app-bar v-bind="appBarProps" v-on="appBarEvents" @toggle-menu="toggleMenuDrawer" />
+      <qas-app-bar v-bind="appBarProps" @toggle-menu="toggleMenuDrawer" />
     </slot>
 
     <slot name="app-menu">
-      <qas-app-menu v-model="menuDrawer" v-bind="defaultAppMenuProps" v-on="appMenuEvents" />
+      <qas-app-menu v-model="menuDrawer" v-bind="defaultAppMenuProps" />
     </slot>
 
     <slot>
@@ -17,28 +17,18 @@
 </template>
 
 <script>
-import QasAppMenu from '../app-menu/QasAppMenu'
-import QasAppBar from '../app-bar/QasAppBar'
+import QasAppBar from '../app-bar/QasAppBar.vue'
+import QasAppMenu from '../app-menu/QasAppMenu.vue'
 
 export default {
   name: 'QasLayout',
 
   components: {
-    QasAppMenu,
-    QasAppBar
+    QasAppBar,
+    QasAppMenu
   },
 
   props: {
-    value: {
-      default: true,
-      type: Boolean
-    },
-
-    appBarEvents: {
-      default: () => ({}),
-      type: Object
-    },
-
     appBarProps: {
       default: () => ({}),
       type: Object
@@ -49,12 +39,14 @@ export default {
       type: Object
     },
 
-    appMenuEvents: {
-      default: () => ({}),
-      type: Object
+    modelValue: {
+      default: true,
+      type: Boolean
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       menuDrawer: true
@@ -71,7 +63,7 @@ export default {
   },
 
   watch: {
-    value: {
+    modelValue: {
       handler (value) {
         this.menuDrawer = value
       },
@@ -82,7 +74,7 @@ export default {
   methods: {
     toggleMenuDrawer () {
       this.menuDrawer = !this.menuDrawer
-      this.$emit('input', this.menuDrawer)
+      this.$emit('update:modelValue', this.menuDrawer)
     }
   }
 }