@bildvitta/quasar-ui-asteroid 3.4.0 → 3.5.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.4.0",
+  "version": "3.5.0-beta.0",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/field/QasField.vue

@@ -11,9 +11,10 @@ import QasCheckboxGroup from '../checkbox-group/QasCheckboxGroup.vue'
 import QasDateTimeInput from '../date-time-input/QasDateTimeInput.vue'
 import QasInput from '../input/QasInput.vue'
 import QasNumericInput from '../numeric-input/QasNumericInput.vue'
+import QasOptionGroup from '../option-group/QasOptionGroup.vue'
 import QasPasswordInput from '../password-input/QasPasswordInput.vue'
-import QasUploader from '../uploader/QasUploader.vue'
 import QasSignatureUploader from '../signature-uploader/QasSignatureUploader.vue'
+import QasUploader from '../uploader/QasUploader.vue'
 
 const attributesProfile = {
   maxLength: 'maxlength',
@@ -29,9 +30,10 @@ export default {
     QasDateTimeInput,
     QasInput,
     QasNumericInput,
+    QasOptionGroup,
     QasPasswordInput,
-    QasUploader,
-    QasSignatureUploader
+    QasSignatureUploader,
+    QasUploader
   },
 
   inheritAttrs: false,
@@ -77,7 +79,6 @@ export default {
         maxFiles,
         useIso,
         useLazyLoading,
-        useSearch,
         useStrengthChecker
       } = this.formattedField
 
@@ -138,14 +139,14 @@ export default {
 
         boolean: { is: 'q-toggle', label, ...error },
         checkbox: { is: 'qas-checkbox-group', label, options, ...error },
-        radio: { is: 'q-option-group', label, options, type: 'radio', ...error },
+        radio: { is: 'qas-option-group', label, options },
 
         upload: { is: 'qas-uploader', accept, autoUpload: true, entity, label, multiple, readonly, maxFiles, ...error },
         editor: { is: 'q-editor', toolbar, ...error },
 
         'signature-uploader': { is: 'qas-signature-uploader', entity, uploadLabel: label, ...error },
 
-        select: { is: 'qas-select', entity, name, multiple, options, useSearch, useLazyLoading, ...input }
+        select: { is: 'qas-select', entity, name, multiple, options, useLazyLoading, ...input }
       }
 
       return { ...(profiles[type] || profiles.default), ...this.$attrs }

package/src/components/filters/QasFilters.vue

@@ -27,7 +27,7 @@
 
             <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="filter()">
               <div v-for="(field, index) in fields" :key="index">
-                <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" dense :field="field" />
+                <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" dense :field="field" v-bind="fieldsProps[field.name]" />
               </div>
 
               <div class="text-right">
@@ -78,6 +78,11 @@ export default {
       type: String
     },
 
+    fieldsProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     useFilterButton: {
       default: true,
       type: Boolean

package/src/components/filters/QasFilters.yml

@@ -9,6 +9,12 @@ props:
     required: true
     type: String
 
+  fields-props:
+    desc: Propriedade para repassar propriedades para cada campo individualmente.
+    default: {}
+    type: Object
+    examples: ["{ name: { dense: true, onClick: () => alert('Estou sendo clicado') } }"]
+
   search-placeholder:
     desc: Placeholder do campo de busca.
     default: Pesquisar...

package/src/components/option-group/QasOptionGroup.vue

@@ -0,0 +1,54 @@
+<template>
+  <q-option-group v-model="model" :options="options" v-bind="attributes">
+    <template v-for="(_, name) in $slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
+  </q-option-group>
+</template>
+
+<script>
+export default {
+  name: 'QasOptionGroup',
+
+  inheritAttrs: false,
+
+  props: {
+    options: {
+      default: () => [],
+      type: Array
+    },
+
+    type: {
+      type: String,
+      default: 'radio',
+      validator: value => ['radio', 'checkbox', 'toggle'].includes(value)
+    },
+
+    modelValue: {
+      default: '',
+      type: [String, Number, Array, Boolean]
+    }
+  },
+
+  emits: ['update:modelValue'],
+
+  computed: {
+    attributes () {
+      return {
+        ...this.$attrs,
+        inline: !this.$qas.screen.isSmall
+      }
+    },
+
+    model: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        return this.$emit('update:modelValue', value)
+      }
+    }
+  }
+}
+</script>

package/src/components/option-group/QasOptionGroup.yml

@@ -0,0 +1,30 @@
+type: component
+
+meta:
+  desc: Componente wrapper do [QOptionGroup](https://quasar.dev/vue-components/option-group#introduction).
+
+props:
+  options:
+    desc: Opções contendo objetos com chaves "label" e "value".
+    default: []
+    type: Array
+
+  model-value:
+    desc: Model do componente, usado para v-model.
+    default: []
+    type: [String, Number, Array, Boolean]
+    examples: [v-model"value"]
+    model: true
+
+  type:
+    desc: Tipo de componente, podendo ser radio, checkbox ou toggle.
+    default: 'radio'
+    type: String
+
+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/select/QasSelect.vue

@@ -68,10 +68,6 @@ export default {
     valueKey: {
       default: '',
       type: String
-    },
-
-    useSearch: {
-      type: Boolean
     }
   },
 
@@ -112,7 +108,7 @@ export default {
     },
 
     isSearchable () {
-      return this.useSearch || this.useLazyLoading
+      return this.hasFuse || this.useLazyLoading
     },
 
     defaultOptions () {
@@ -127,6 +123,17 @@ export default {
       return this.mx_isFetching || this.$attrs.loading
     },
 
+    hasFuse () {
+      /*
+      * quantidade de option que precisa ter para o fuse funcionar automaticamente
+      * sem necessidade de passar prop manualmente
+      */
+      const autoFuseQuantity = 10
+      const hasAutoFuseSearch = this.options.length >= autoFuseQuantity && !this.useLazyLoading
+
+      return hasAutoFuseSearch
+    },
+
     model: {
       get () {
         return this.modelValue
@@ -147,7 +154,7 @@ export default {
       handler () {
         if (this.useLazyLoading && this.mx_hasFilteredOptions) return
 
-        if (this.fuse) this.setFuse()
+        if (this.fuse || this.hasFuse) this.setFuse()
 
         this.mx_filteredOptions = this.defaultOptions
       },
@@ -163,7 +170,7 @@ export default {
 
   methods: {
     setFuse () {
-      if (this.useSearch) {
+      if (this.hasFuse) {
         this.fuse = new Fuse(this.defaultOptions, this.defaultFuseOptions)
       }
     },
@@ -173,7 +180,7 @@ export default {
         await this.mx_filterOptionsByStore(value)
       }
 
-      if (!this.useLazyLoading && this.useSearch) {
+      if (!this.useLazyLoading && this.hasFuse) {
         this.filterOptionsByFuse(value)
       }
 

package/src/components/select/QasSelect.yml

@@ -71,10 +71,6 @@ props:
     type: String
     examples: [value-key="uuid"]
 
-  use-search:
-    desc: Controla se vai ou não ter campo de busca no select.
-    type: Boolean
-
   use-lazy-loading:
     desc: Controla a busca pela store "fetchFieldOptions".
     default: false

package/src/css/variables/button.scss

@@ -1,3 +1,3 @@
-$button-font-size: 0.875rem;
+$button-font-size: 1rem;
 $button-line-height: 1.5rem;
-$button-font-weight: 500;
+$button-font-weight: 600;

package/src/css/variables/typography.scss

@@ -9,48 +9,48 @@
 
 // headings
 $h1: (
-  size: 6rem,
-  line-height: 6rem,
+  size: 3rem,
+  line-height: 1.5rem,
   letter-spacing: 0,
   weight: 800,
   margin: 0
 );
 
 $h2: (
-  size: 3.75rem,
-  line-height: 3.75rem,
+  size: 2rem,
+  line-height: 1.5rem,
   letter-spacing: 0,
   weight: 700,
   margin: 0
 );
 
 $h3: (
-  size: 3rem,
-  line-height: 2.5rem,
+  size: 1.5rem,
+  line-height: 1.5rem,
   letter-spacing: 0,
-  weight: 600,
+  weight: 700,
   margin: 0
 );
 
 $h4: (
-  size: 2.125rem,
-  line-height: 2.5rem,
+  size: 1.125rem,
+  line-height: 1.5rem,
   letter-spacing: 0,
-  weight: 800,
+  weight: 600,
   margin: 0
 );
 
 $h5: (
-  size: 1.5rem,
-  line-height: 2rem,
+  size: 1rem,
+  line-height: 1.5rem,
   letter-spacing: 0,
-  weight: 700,
+  weight: 600,
   margin: 0
 );
 
 $h6: (
-  size: 1.25rem,
-  line-height: 2rem,
+  size: 0.875rem,
+  line-height: 1.5rem,
   letter-spacing: 0,
   weight: 600,
   margin: 0
@@ -59,14 +59,14 @@ $h6: (
 // subtitles
 $subtitle1: (
   size: 1rem,
-  line-height: 1.75rem,
+  line-height: 1.5rem,
   letter-spacing: 0,
-  weight: 700
+  weight: 600
 );
 
 $subtitle2: (
   size: 0.875rem,
-  line-height: 1.375rem,
+  line-height: 1.5rem,
   letter-spacing: 0,
   weight: 600
 );
@@ -76,20 +76,20 @@ $body1: (
   size: 1rem,
   line-height: 1.5rem,
   letter-spacing: 0,
-  weight: 500
+  weight: 400
 );
 
 $body2: (
   size: 0.875rem,
-  line-height: 1.25rem,
+  line-height: 1.5rem,
   letter-spacing: 0,
   weight: 400
 );
 
 // overline
 $overline: (
-  size: 0.75rem,
-  line-height: 2rem,
+  size: 0.875rem,
+  line-height: 1.5rem,
   letter-spacing: 0.25rem,
   weight: 600
 );
@@ -97,9 +97,9 @@ $overline: (
 // caption
 $caption: (
   size: 0.75rem,
-  line-height: 1.25rem,
+  line-height: 1.5rem,
   letter-spacing: 0,
-  weight: 700
+  weight: 600
 );
 
 $headings: (

package/src/vue-plugin.js

@@ -29,6 +29,7 @@ import QasListView from './components/list-view/QasListView.vue'
 import QasMap from './components/map/QasMap.vue'
 import QasNestedFields from './components/nested-fields/QasNestedFields.vue'
 import QasNumericInput from './components/numeric-input/QasNumericInput.vue'
+import QasOptionGroup from './components/option-group/QasOptionGroup.vue'
 import QasPageHeader from './components/page-header/QasPageHeader.vue'
 import QasPasswordInput from './components/password-input/QasPasswordInput.vue'
 import QasPasswordStrengthChecker from './components/password-strength-checker/QasPasswordStrengthChecker.vue'
@@ -99,6 +100,7 @@ function install (app) {
   app.component('QasMap', QasMap)
   app.component('QasNestedFields', QasNestedFields)
   app.component('QasNumericInput', QasNumericInput)
+  app.component('QasOptionGroup', QasOptionGroup)
   app.component('QasPageHeader', QasPageHeader)
   app.component('QasPasswordInput', QasPasswordInput)
   app.component('QasPasswordStrengthChecker', QasPasswordStrengthChecker)
@@ -170,6 +172,7 @@ export {
   QasMap,
   QasNestedFields,
   QasNumericInput,
+  QasOptionGroup,
   QasPageHeader,
   QasPasswordInput,
   QasPasswordStrengthChecker,