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

package/src/components/avatar/QasAvatar.yml

@@ -0,0 +1,38 @@
+type: component
+
+mixins:
+  - quasar/dist/api/QAvatar.json
+
+meta:
+  desc: Cria um elemento escalável e colorido que pode ter texto, ícone ou imagem em sua forma. Usa como base o componente [QAvatar](https://quasar.dev/vue-components/avatar#introduction).
+
+props:
+  color:
+    desc: Cor de fundo (background-color).
+    type: String
+    examples: ['primary', 'positive']
+
+  dark:
+    desc: Habilita o modo escuro.
+    type: Boolean
+
+  icon:
+    desc: Ícone de fundo do avatar que vai aparecer caso não tenha imagem nem título.
+    default: o_error
+    type: String
+
+  image:
+    desc: Imagem de fundo (maior prioridade).
+    type: String
+
+  text-color:
+    desc: Cor de texto (caso não tenha imagem).
+    default: primary
+    type: String
+
+  title:
+    desc: Caso não tenha imagem, o avatar vai aparecer com a inicial do titulo.
+    type: String
+    examples: [
+      'John Doe'
+    ]

package/src/components/box/QasBox.vue

@@ -1,21 +1,29 @@
 <template>
-  <div v-bind="$attrs" class="bg-white q-px-md q-py-lg rounded-borders" :class="boxClass" v-on="$listeners">
+  <div class="bg-white q-px-md q-py-lg rounded-borders" :class="boxClass">
     <slot />
   </div>
 </template>
 
 <script>
 export default {
+  name: 'QasBox',
+
   props: {
-    // TODO: Alterar para o outlined e unelevated.
-    formMode: {
+    outlined: {
+      type: Boolean
+    },
+
+    unelevated: {
       type: Boolean
     }
   },
 
   computed: {
     boxClass () {
-      return this.formMode ? 'border-primary-contrast' : 'shadow-primary'
+      return {
+        'border-primary-contrast': this.outlined,
+        'shadow-primary': !this.unelevated
+      }
     }
   }
 }

package/src/components/box/QasBox.yml

@@ -0,0 +1,13 @@
+type: component
+
+meta:
+  desc: Um simples componente com fundo branco e bordas arredondadas para encapsular o seu conteúdo.
+
+props:
+  outlined:
+    desc: Insere uma borda sólida em volta do componente.
+    type: Boolean
+
+  unelevated:
+    desc: Remove a sombra do componente.
+    type: Boolean

package/src/components/breakline/QasBreakline.vue

@@ -0,0 +1,37 @@
+<template>
+  <component :is="tag" v-for="(line, index) in lines" :key="index" v-bind="$attrs">
+    {{ line }}
+  </component>
+</template>
+
+<script>
+import { getSlotChildrenText } from '../../helpers'
+
+export default {
+  name: 'QasBreakline',
+
+  props: {
+    split: {
+      default: '\n',
+      type: String
+    },
+
+    tag: {
+      default: 'div',
+      type: String
+    },
+
+    text: {
+      default: '',
+      type: String
+    }
+  },
+
+  computed: {
+    lines () {
+      const text = this.text || getSlotChildrenText(this.$slots.default())
+      return text.split(this.split)
+    }
+  }
+}
+</script>

package/src/components/breakline/QasBreakline.yml

@@ -0,0 +1,25 @@
+type: component
+
+meta:
+  desc: Permite encapsular quebra de linhas (\n) de um texto em uma tag HTML ou componente Vue.
+
+props:
+  split:
+    default: '\n'
+    desc: Carácter ou conjunto de caracteres que serão utilizados para dividir o texto.
+    type: String
+
+  tag:
+    default: div
+    desc: Tag HTML que será utilizada para encapsular o texto dividido.
+    examples: [p, span]
+    type: String
+
+  text:
+    default: ''
+    desc: Texto que será dividido.
+    type: String
+
+slots:
+  default:
+    desc: Texto que será dividido.

package/src/components/btn/QasBtn.vue

@@ -1,43 +1,46 @@
+<template>
+  <q-btn color="primary" no-caps unelevated v-bind="attributes">
+    <slot v-if="showLabel">{{ $attrs.label }}</slot>
+
+    <template v-for="(_, name) in slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
+  </q-btn>
+</template>
+
 <script>
-import { QBtn } from 'quasar'
+import { screenMixin } from '../../mixins'
 
 export default {
-  extends: QBtn,
-
-  props: {
-    color: {
-      default: 'primary',
-      type: String
-    },
+  name: 'QasBtn',
 
-    // FIXME: Alterar para hideLabel="xs". Remover todos os "mobiles".
-    hideMobileLabel: {
-      type: Boolean
-    },
+  mixins: [screenMixin],
 
-    noCaps: {
-      default: true,
-      type: Boolean
-    },
+  inheritAttrs: false,
 
-    unelevated: {
-      default: true,
+  props: {
+    hideLabelOnSmallScreen: {
       type: Boolean
     }
   },
 
   computed: {
-    // Computada original do Quasar, modificada para esconder o rótulo em dispositivos móveis.
+    attributes () {
+      const { label, ...attributes } = this.$attrs
+      return attributes
+    },
+
     hasLabel () {
-      return !!this.label && this.mobileLabel
+      return !!(this.$attrs.label || this.$slots.default)
     },
 
-    isMobile () {
-      return this.$q.screen.xs
+    showLabel () {
+      return this.hasLabel && !(this.hideLabelOnSmallScreen && this.mx_isSmall)
     },
 
-    mobileLabel () {
-      return !(this.hideMobileLabel && this.isMobile)
+    slots () {
+      const { default: _, ...slots } = this.$slots
+      return slots
     }
   }
 }

package/src/components/btn/QasBtn.yml

@@ -0,0 +1,13 @@
+type: component
+
+mixins:
+  - quasar/dist/api/QBtn.json
+
+meta:
+  desc: O mesmo botão do Quasar (QBtn), mas com o nosso estilo, tem acesso a todas propriedades do componente do quasar. Tem a função de criar gatilhos para ações. Eles podem ser utilizados isoladamente ou ​​como parte de outros componentes de padrões maiores, como formulários, caixas de diálogo e feedbacks.
+
+props:
+  hide-label-on-small-screen:
+    desc: Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno.
+    type: Boolean
+    default: 'false'

package/src/components/card/QasCard.vue

@@ -1,27 +1,29 @@
 <template>
   <div class="col-12 col-lg-3 col-md-4 col-sm-6">
-    <q-card class="border-radius-lg column full-height" :class="cardClasses">
-      <div v-if="useHeader" class="overflow-hidden relative-position w-full">
+    <q-card class="border-radius-lg column full-height overflow-hidden" :class="cardClasses">
+      <header v-if="useHeader" class="overflow-hidden relative-position w-full">
         <slot name="header">
           <q-carousel v-model="slideImage" animated class="cursor-pointer" height="205px" infinite :navigation="hasImages" navigation-icon="o_fiber_manual_record" swipeable>
             <template #navigation-icon="{ active, btnProps, onClick }">
               <qas-btn color="white" dense flat :icon="getNavigationIcon(active, btnProps)" round size="sm" @click="onClick" />
             </template>
-            <q-carousel-slide v-for="(item, index) in imagesList" :key="index" class="bg-no-repeat" :class="bgImagePositionClasses" :img-src="item" :name="index" />
+
+            <q-carousel-slide v-for="(item, index) in imagesList" :key="index" class="bg-no-repeat" :class="bgImagePositionClass" :img-src="item" :name="index" />
           </q-carousel>
+
           <div class="absolute-top flex items-center q-pa-md">
             <slot name="carousel-header" />
           </div>
         </slot>
-      </div>
+      </header>
 
       <q-card-section class="col-grow column justify-between w-full">
-        <div class="w-full" :class="gutterClasses">
+        <div class="w-full" :class="gutterClass">
           <slot />
         </div>
       </q-card-section>
 
-      <div v-if="useActions" class="border-primary-contrast border-top overflow-hidden row">
+      <div v-if="hasActionsSlot" class="border-primary-contrast border-top overflow-hidden row">
         <slot name="actions" />
       </div>
     </q-card>
@@ -30,29 +32,26 @@
 
 <script>
 export default {
+  name: 'QasCard',
+
   props: {
     bgImagePosition: {
       type: String,
       default: 'center'
     },
 
+    formMode: {
+      type: Boolean
+    },
+
     gutter: {
       type: String,
       default: 'sm'
     },
 
     images: {
-      type: Array,
-      default: () => ([])
-    },
-
-    outlined: {
-      type: Boolean
-    },
-
-    result: {
-      type: Object,
-      default: () => ({})
+      default: () => [],
+      type: Array
     },
 
     useHeader: {
@@ -67,38 +66,38 @@ export default {
   },
 
   computed: {
-    bgImagePositionClasses () {
-      return [`bg-position-${this.bgImagePosition}`]
+    bgImagePositionClass () {
+      return `bg-position-${this.bgImagePosition}`
     },
 
-    hasImages () {
-      return this.images.length > 1
+    cardClasses () {
+      return this.formMode ? 'bg-white border-primary no-shadow' : 'box-shadow-1'
     },
 
-    imagesLength () {
-      return this.images?.length
+    gutterClass () {
+      return `q-col-gutter-${this.gutter}`
     },
 
-    imagesList () {
-      return this.imagesLength && this.images.slice(0, 3)
+    hasActionsSlot () {
+      return !!this.$slots.actions
     },
 
-    cardClasses () {
-      return [this.formMode ? 'bg-white border-primary no-shadow' : 'box-shadow-1']
+    hasImages () {
+      return this.images.length > 1
     },
 
-    gutterClasses () {
-      return [`q-col-gutter-${this.gutter}`]
+    imagesLength () {
+      return this.images?.length
     },
 
-    useActions () {
-      return !!(this.$slots.actions || this.$scopedSlots.actions)
+    imagesList () {
+      return this.imagesLength && this.images.slice(0, 3)
     }
   },
 
   methods: {
-    getNavigationIcon (active, btn) {
-      return active ? 'o_radio_button_checked' : btn.icon
+    getNavigationIcon (active, { icon }) {
+      return active ? 'o_radio_button_checked' : icon
     }
   }
 }

package/src/components/card/QasCard.yml

@@ -0,0 +1,42 @@
+type: component
+
+meta:
+  desc: Componente de card.
+
+props:
+  bg-image-position:
+    desc: Posição da imagem "background-position".
+    default: center
+    type: String
+
+  form-mode:
+    desc: Modo de formulário, altera o estilo quando está em uma pagina de formulário.
+    type: Boolean
+
+  gutter:
+    desc: Espaçamento dentro <q-card-section /> onde fica o slot "default".
+    default: sm
+    type: String
+    examples: [xs, sm, md, lg, xl]
+
+  images:
+    desc: Imagens do carousel.
+    default: []
+    type: Array
+
+  use-header:
+    desc: Controla se vai ter ou não o header com carousel.
+    type: Boolean
+
+slots:
+  header:
+    desc: Slot para acessar área no lugar do "<q-carousel />".
+
+  carousel-header:
+    desc: Slot para acessar usar de header do "<q-carousel />".
+
+  default:
+    desc: Slot para acessar conteúdo dentro do "<q-card-section />".
+
+  actions:
+    desc: Slot para acessar conteúdo de ações como botão.

package/src/components/checkbox-group/QasCheckboxGroup.vue

@@ -1,26 +1,38 @@
 <template>
-  <div>
+  <div :class="classes">
     <div v-for="(option, index) in options" :key="index">
-      <q-checkbox :class="hasChildren(option) ? titleClass : []" :label="option.label" :value="hasChildren(option) ? group[index] : option.value" @input="updateCheckbox($event, option, index)" />
-      <q-option-group v-if="hasChildren(option)" class="q-ml-sm" inline :options="option.children" type="checkbox" :value="value" @input="updateChildren($event, option, index)" />
+      <q-checkbox v-if="hasChildren(option)" :class="getCheckboxClass(option)" :label="option.label" :model-value="getModelValue(index)" @update:model-value="updateCheckbox($event, option, index)" />
+
+      <q-option-group v-if="hasChildren(option)" class="q-ml-sm" :inline="inline" :model-value="modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
+
+      <q-option-group v-else v-model="model" v-bind="$attrs" :options="[option]" type="checkbox" />
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  name: 'QasCheckboxGroup',
+
   props: {
     options: {
       default: () => [],
       type: Array
     },
 
-    value: {
+    modelValue: {
       default: () => [],
       type: Array
+    },
+
+    inline: {
+      default: true,
+      type: Boolean
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       group: {}
@@ -28,8 +40,18 @@ export default {
   },
 
   computed: {
-    titleClass () {
-      return ['text-weight-bold']
+    model: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        this.$emit('update:modelValue', value)
+      }
+    },
+
+    classes () {
+      return this.inline && 'flex q-gutter-x-sm'
     }
   },
 
@@ -48,7 +70,7 @@ export default {
       for (const index in this.options) {
         const option = this.options[index]
         if (this.hasChildren(option)) {
-          this.setGroupIntersection(this.value, option, index)
+          this.setGroupIntersection(this.modelValue, option, index)
         }
       }
     },
@@ -60,25 +82,36 @@ export default {
     setGroupIntersection (value, option, index) {
       const options = option.children.map(item => item.value)
       const intersection = options.filter(item => value.includes(item))
-      this.$set(this.group, index, intersection.length ? (intersection.length === options.length ? true : null) : false)
+
+      this.group[index] = intersection.length && (intersection.length === options.length ? true : null)
     },
 
     updateCheckbox (value, option, index) {
-      if (!this.hasChildren(option)) {
-        // Arrumar
-        return this.$emit('input', this.value)
-      }
-      this.$set(this.group, index, value)
+      this.group[index] = value
       const groupValues = option.children.map(item => item.value)
+
       const updatedValue = value
-        ? [...this.value, ...groupValues]
-        : this.value.filter(item => !groupValues.includes(item))
-      this.$emit('input', updatedValue)
+        ? [...new Set([...this.modelValue, ...groupValues])]
+        : this.modelValue.filter(item => !groupValues.includes(item))
+
+      this.updateModelValue(updatedValue)
     },
 
     updateChildren (value, option, index) {
       this.setGroupIntersection(value, option, index)
-      this.$emit('input', value)
+      this.updateModelValue(value)
+    },
+
+    getCheckboxClass (option) {
+      return this.hasChildren(option) && 'text-weight-bold'
+    },
+
+    getModelValue (index) {
+      return this.group[index]
+    },
+
+    updateModelValue (value) {
+      this.$emit('update:modelValue', value)
     }
   }
 }

package/src/components/checkbox-group/QasCheckboxGroup.yml

@@ -0,0 +1,30 @@
+type: component
+
+meta:
+  desc: Componente para gerar dinamicamente checkbox agrupados.
+
+props:
+  options:
+    desc: Opções para gerar os checkbox.
+    default: []
+    type: Array
+
+  model-value:
+    desc: Model do componente, usado para v-model.
+    default: []
+    type: Array
+    examples: [v-model"value"]
+    model: true
+
+  inline:
+    desc: Controla se o componente vai aparece em linha ou em bloco.
+    default: true
+    type: Boolean
+
+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: []

package/src/components/copy/QasCopy.vue

@@ -1,42 +1,53 @@
 <template>
   <span>
-    <slot>{{ label }}</slot>
+    <slot>{{ text }}</slot>
 
-    <q-btn class="q-ml-xs" color="grey-5" flat :icon="icon" round :size="size" @click="copy">
+    <qas-btn class="q-ml-xs" color="grey-5" flat :icon="icon" :loading="isLoading" round :size="size" @click="copy">
       <q-tooltip>Copiar</q-tooltip>
-    </q-btn>
+    </qas-btn>
   </span>
 </template>
 
 <script>
 import { copyToClipboard } from 'quasar'
-import { NotifyError, NotifySuccess } from '../../plugins'
 
 export default {
+  name: 'QasCopy',
+
   props: {
     icon: {
       default: 'o_file_copy',
       type: String
     },
 
-    label: {
-      required: true,
+    size: {
+      default: 'xs',
       type: String
     },
 
-    size: {
-      default: 'sm',
+    text: {
+      required: true,
       type: String
     }
   },
 
+  data () {
+    return {
+      isLoading: false
+    }
+  },
+
   methods: {
     async copy () {
+      this.isLoading = true
+
       try {
-        await copyToClipboard(this.label)
-        NotifySuccess('Copiado!', this.label)
+        await copyToClipboard(this.text)
+        this.$qas.success('Copiado!', this.text)
       } catch (error) {
-        NotifyError('Não foi possível copiar.', this.label)
+        this.$qas.error('Não foi possível copiar.', this.text)
+      } finally {
+        setTimeout(() => { this.isLoading = false }, 500)
       }
     }
   }

package/src/components/copy/QasCopy.yml

@@ -0,0 +1,20 @@
+type: component
+
+meta:
+  desc: Copia algum texto para o clipboard após clicar no botão.
+
+props:
+  icon:
+    desc: Ícone para mostrar no botão.
+    type: String
+    default: o_file_copy
+
+  size:
+    desc: Tamanho do botão.
+    type: String
+    default: xs
+    examples: [xs, sm, md, lg, xl]
+
+  text:
+    desc: Texto a ser copiado.
+    type: String