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

package/src/components/nested-fields/QasNestedFields.vue

@@ -1,13 +1,13 @@
 <template>
   <div :id="fieldName" class="qas-nested-fields">
     <div class="text-left">
-      <qas-label v-if="useSingleLabel" :label="label" />
+      <qas-label v-if="useSingleLabel" :label="fieldLabel" />
     </div>
 
     <div>
-      <component :is="componentIs" ref="inputContent" name="fade" tag="div">
+      <component :is="componentTag" ref="inputContent" name="fade" tag="div">
         <div v-for="(row, index) in nested" :id="`row-${index}`" :key="index" class="full-width">
-          <component :is="componentIs" name="fade" tag="div">
+          <component :is="componentTag" name="fade" tag="div">
             <div v-if="!row[destroyKey]" :key="index" class="col-12 q-mt-md">
               <div>
                 <div class="flex items-center justify-between q-py-xs">
@@ -21,21 +21,25 @@
 
                 <div ref="formGenerator" class="col-12 justify-between q-col-gutter-x-md row">
                   <slot :errors="transformedErrors" :fields="children" :index="index" name="fields" :update-value="updateValuesFromInput">
-                    <qas-form-generator v-model="nested[index]" :class="formClasses" :columns="formColumns" :errors="transformedErrors[index]" :fields="children" :fields-events="fieldsEvents" :fields-props="fieldsProps" @input="updateValuesFromInput($event, index)">
-                      <template v-for="(slot, key) in $scopedSlots" :slot="key" slot-scope="scope">
-                        <slot :name="key" v-bind="scope" />
+                    <qas-form-generator v-model="nested[index]" :class="formClasses" :columns="formColumns" :errors="transformedErrors[index]" :fields="children" :fields-props="fieldsProps" @update:model-value="updateValuesFromInput($event, index)">
+                      <template v-for="(slot, key) in $slots" #[key]="scope">
+                        <slot v-bind="scope" :errors="transformedErrors" :index="index" :name="key" />
                       </template>
                     </qas-form-generator>
                   </slot>
 
                   <div v-if="useInlineActions" class="flex items-center qas-nested-fields__actions">
-                    <qas-btn v-if="useDuplicate" class="col-auto" color="primary" flat icon="o_content_copy" round @click="add(row)" />
-                    <qas-btn v-if="showDestroyBtn" class="col-auto" color="negative" flat icon="o_cancel" round @click="destroy(index, row)" />
+                    <div class="col-auto">
+                      <qas-btn v-if="useDuplicate" color="primary" flat icon="o_content_copy" round @click="add(row)" />
+                    </div>
+                    <div class="col-auto">
+                      <qas-btn v-if="showDestroyBtn" color="negative" flat icon="o_cancel" round @click="destroy(index, row)" />
+                    </div>
                   </div>
                 </div>
 
                 <div class="col-12">
-                  <slot :index="index" :model-value="nested[index]" name="custom-fields" :update-value="updateValuesFromInput" />
+                  <slot :fields="children" :index="index" :model="nested[index]" name="custom-fields" :update-value="updateValuesFromInput" />
                 </div>
               </div>
             </div>
@@ -43,30 +47,34 @@
         </div>
       </component>
 
-      <slot :add="add" name="add-input">
-        <div v-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" @click="add()">
-          <qas-input class="col disabled no-pointer-events" hide-bottom-space :label="addInputLabel" outlined @focus="add()" />
+      <div class="q-mt-md">
+        <slot :add="add" name="add-input">
+          <div v-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" @click="add()">
+            <div class="col">
+              <qas-input class="disabled no-pointer-events" hide-bottom-space :label="addInputLabel" outlined @focus="add()" />
+            </div>
 
-          <div>
-            <qas-btn class="col-auto" color="green" flat icon="o_add_circle_outline" round />
+            <div class="col-auto">
+              <qas-btn color="green" flat icon="o_add_circle_outline" round />
+            </div>
           </div>
-        </div>
 
-        <div v-else class="q-mt-lg">
-          <qas-btn ref="test" class="full-width q-py-sm" icon="o_add" outline @click="add()">{{ addInputLabel }}</qas-btn>
-        </div>
-      </slot>
+          <div v-else class="q-mt-lg">
+            <qas-btn class="full-width q-py-sm" icon="o_add" outline @click="add()">{{ addInputLabel }}</qas-btn>
+          </div>
+        </slot>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import QasBtn from '../btn/QasBtn'
-import QasFormGenerator from '../form-generator/QasFormGenerator'
-import QasInput from '../input/QasInput'
-import QasLabel from '../label/QasLabel'
-import { constructObject } from '../../helpers'
+import QasBtn from '../btn/QasBtn.vue'
+import QasFormGenerator from '../form-generator/QasFormGenerator.vue'
+import QasInput from '../input/QasInput.vue'
+import QasLabel from '../label/QasLabel.vue'
 
+import { constructObject } from '../../helpers'
 import { extend } from 'quasar'
 import { camelize } from 'humps'
 
@@ -126,11 +134,6 @@ export default {
       default: () => ({})
     },
 
-    fieldsEvents: {
-      type: Object,
-      default: () => ({})
-    },
-
     fieldsProps: {
       type: Object,
       default: () => ({})
@@ -191,12 +194,19 @@ export default {
       type: Boolean
     },
 
-    value: {
+    useRemoveOnDestroy: {
+      type: Boolean,
+      default: true
+    },
+
+    modelValue: {
       type: Array,
       default: () => []
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       nested: []
@@ -204,7 +214,7 @@ export default {
   },
 
   computed: {
-    label () {
+    fieldLabel () {
       return this.field?.label
     },
 
@@ -234,16 +244,16 @@ export default {
     },
 
     transformedErrors () {
-      return constructObject(this.fieldName, this.errors)
+      return Array.isArray(this.errors) ? this.errors : constructObject(this.fieldName, this.errors)
     },
 
-    componentIs () {
+    componentTag () {
       return this.useAnimation ? 'transition-group' : 'div'
     }
   },
 
   watch: {
-    value: {
+    modelValue: {
       handler (value) {
         this.nested = extend(true, [], value)
       },
@@ -251,8 +261,8 @@ export default {
     },
 
     field: {
-      handler (value) {
-        !this.value.length && this.setDefaultValue()
+      handler () {
+        !this.modelValue.length && this.setDefaultNestedValue()
       },
       immediate: true
     }
@@ -267,7 +277,7 @@ export default {
         this.setFocus()
       })
 
-      return this.emitter()
+      return this.updateModelValue()
     },
 
     setFocus () {
@@ -277,31 +287,31 @@ export default {
       return firstElementToBeFocused?.focus && firstElementToBeFocused.focus()
     },
 
-    emitter (value, index) {
-      return this.$emit('input', value || this.nested)
+    updateModelValue (value) {
+      return this.$emit('update:modelValue', value || this.nested)
     },
 
     destroy (index, row) {
-      row.uuid
-        ? this.nested.splice(index, 1, { [this.destroyKey]: true, ...row })
-        : this.nested.splice(index, 1)
+      this.useRemoveOnDestroy
+        ? this.nested.splice(index, 1)
+        : this.nested.splice(index, 1, { [this.destroyKey]: true, ...row })
 
-      return this.emitter()
+      return this.updateModelValue()
     },
 
     updateValuesFromInput (value, index) {
       this.nested.splice(index, 1, value)
 
-      return this.emitter(null, index)
+      return this.updateModelValue(null, index)
     },
 
-    setDefaultValue () {
+    setDefaultNestedValue () {
       this.nested.splice(0, 0, { ...this.rowObject })
     },
 
     setScroll () {
       const elements = this.$refs.inputContent.children
-      const element = elements[elements.length - 1].elm
+      const element = elements[elements.length - 1]
       const { top } = element.getBoundingClientRect()
       const pageOffset = window.pageYOffset
 
@@ -316,7 +326,7 @@ export default {
         return this.useIndexLabel ? `${this.rowLabel} ${rowKey + 1}` : this.rowLabel
       }
 
-      return this.label
+      return this.fieldLabel
     }
   }
 }

package/src/components/nested-fields/QasNestedFields.yml

@@ -0,0 +1,180 @@
+type: component
+
+meta:
+  desc: Componente para gerar dinamicamente campos nested.
+
+props:
+  add-input-label:
+    desc: Rótulo do input de adicionar novos campos.
+    default: Inserir novo campo
+    type: Boolean
+
+  btn-destroy-props:
+    desc: Props do botão de excluir linha contendo os campos.
+    default: "{ label: 'Remover', o_cancel, flat: true, dense: true }"
+    debugger: true
+    type: Object
+
+  btn-duplicate-props:
+    desc: Props do botão de duplicar linha contendo os campos.
+    default: "{ label: 'Duplicar', o_content_copy, flat: true, dense: true, hideMobileLabel: true }"
+    debugger: true
+    type: Object
+
+  destroy-key:
+    desc: Quando excluímos uma "row" e propriedade "useRemoveOnDestroy" for "false", adicionamos uma propriedade para saber que é para ser deletada, com esta prop você escolhe como se chamará essa chave.
+    default: destroyed
+    type: String
+
+  model-value:
+    desc: Model do componente
+    default: []
+    type: Array
+    examples: [v-model="value"]
+    model: true
+
+  errors:
+    desc: Propriedade de erros para mostrar nos campos gerados.
+    default: {}
+    type: [Array, Object]
+
+  field:
+    desc: Field contendo informações necessárias para a criação do campo correspondente.
+    default: {}
+    required: true
+    type: Object
+    examples: ["{ name: 'meuNested', type: 'nested', label: 'Campo nested', children: [...] }"]
+
+  fields-props:
+    desc: Propriedade para repassar propriedades para cada campo individualmente.
+    default: {}
+    type: Object
+    examples: ["{ name: { dense: true, onClick: () => alert('Estou sendo clicado') } }"]
+
+  form-columns:
+    desc: Colunas do grid de cada campo.
+    default: {}
+    type: Object
+    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]"]
+
+  form-gutter:
+    desc: Espaçamento entre cada campo.
+    default: md
+    type: String
+    examples: [xs, sm, md, lg, xl]
+
+  row-label:
+    desc: Rótulo entre cada linha (row).
+    type: String
+
+  row-object:
+    desc: Objeto contendo valores iniciais do model de cada linha (row).
+    default: {}
+    type: Object
+    examples: ["{ name: '', cities: [] }"]
+
+  use-animation:
+    desc: Controla a animação na hora de setar o scroll.
+    default: true
+    type: Boolean
+
+  use-destroy-always:
+    desc: Controla o botão de remover em todas linhas (row), incluindo a primeira.
+    type: Boolean
+
+  use-duplicate:
+    desc: Controla o botão de duplicar linha.
+    default: true
+    type: Boolean
+
+  use-index-label:
+    desc: Se tiver "rowLabel" esta prop controla se cada label da linha vai ter o index como sufixo.
+    type: Boolean
+
+  use-inline-actions:
+    desc: Controla o comportamento referente aos estilos das ações de duplicar/adicionar/remover
+    type: Boolean
+
+  use-single-label:
+    desc: Se o valor for "true", então vai exibir apenas uma label referente a todas linhas (row) e não uma por linha
+    type: Boolean
+
+  use-remove-on-destroy:
+    desc: Se o valor for "true" o valor do model será removido senão será adicionar uma flag como `destroyed` por exemplo.
+    default: true
+    type: Boolean
+
+slots:
+  fields:
+    desc: Substitui o "QasFormGenerator".
+    scope:
+      fields:
+        desc: Campos atuais.
+        default: {}
+        type: Object
+
+      index:
+        desc: Index atual dos campos
+        type: Number
+
+      errors:
+        desc: Index atual dos campos
+        type: Number
+
+      'updateValue -> function(value, index)':
+        desc: Função para atualizar o model, passando o novo valor e o index.
+        type: Function
+        examples: ["updateValue({ name: 'novo valor' }, 2)"]
+
+  'field-[nome-da-chave]':
+    desc: Repassa todos os slots e escopos do "QasFormGenerator".
+    scope:
+      index:
+        desc: Index atual dos campos
+        type: Number
+
+      errors:
+        desc: Index atual dos campos
+        type: Number
+
+      'updateValue -> function(value, index)':
+        desc: Função para atualizar o model, passando o novo valor e o index.
+        type: Function
+        examples: ["updateValue({ name: 'novo valor' }, 2)"]
+
+  custom-fields:
+    desc: Slot para adicionar um campo customizado.
+    scope:
+      fields:
+        desc: Campos atuais.
+        default: {}
+        type: Object
+
+      index:
+        desc: Index atual dos campos
+        type: Number
+
+      errors:
+        desc: Index atual dos campos
+        type: Number
+
+      'updateValue -> function(value, index)':
+        desc: Função para atualizar o model, passando o novo valor e o index.
+        type: Function
+        examples: ["updateValue({ name: 'novo valor' }, 2)"]
+
+  add-input:
+    desc: Slot para acessar campo de adicionar.
+    scope:
+      'add -> function(row)':
+        desc: Função para adicionar novos campos no model.
+        type: Function
+        examples: ["add({ name: 'novo valor' })"]
+
+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/numeric-input/QasNumericInput.vue

@@ -1,22 +1,24 @@
 <template>
-  <div>
-    <q-field v-model="model" v-bind="$attrs">
-      <template #control="{ emitValue, floatingLabel, id, value: modelValue }">
-        <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :model-value="modelValue" @input="emitValue($event.target.value)">
-      </template>
-    </q-field>
-  </div>
+  <q-field v-model="model" outlined>
+    <template #control="{ emitValue, floatingLabel, id, value }">
+      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :model-value="value" @input="emitValue($event.target.value)">
+    </template>
+  </q-field>
 </template>
 
 <script>
+import AutoNumeric from 'autonumeric'
+
 const defaultModes = {
-  integer: ['commaDecimalCharDotSeparator', 'integer'],
   decimal: 'commaDecimalCharDotSeparator',
-  percent: 'percentageEU2dec',
-  money: 'Brazilian'
+  integer: ['commaDecimalCharDotSeparator', 'integer'],
+  money: 'Brazilian',
+  percent: 'percentageEU2dec'
 }
 
 export default {
+  name: 'QasNumericInput',
+
   props: {
     allowNegative: {
       default: true,
@@ -44,19 +46,27 @@ export default {
       validator: value => ['integer', 'decimal', 'percent', 'money'].includes(value)
     },
 
+    modelValue: {
+      default: '',
+      type: [String, Number],
+      validator: value => {
+        return (
+          typeof value === 'number' ||
+          typeof value === 'string' ||
+          value === '' ||
+          value === null
+        )
+      }
+    },
+
     preset: {
       default: false,
       type: [Boolean, String]
-    },
-
-    value: {
-      default: '',
-      validator (value) {
-        return typeof value === 'number' || typeof value === 'string' || value === '' || value === null
-      }
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       autoNumeric: null
@@ -70,17 +80,16 @@ export default {
 
     model: {
       get () {
-        return this.value
+        return this.modelValue
       },
 
       set () {
-        this.$emit('input', this.autoNumeric.getNumber())
+        this.$emit('update:modelValue', this.autoNumeric.getNumber())
       }
     }
   },
 
   async created () {
-    const AutoNumeric = (await import('autonumeric')).default
     const autoNumericPredefinedOptions = AutoNumeric.getPredefinedOptions()
 
     let option = this.preset || this.defaultMode
@@ -110,12 +119,12 @@ export default {
     Object.assign(options, this.autonumericProps)
 
     this.$nextTick(() => {
-      this.$refs.input.value = this.value
+      this.$refs.input.value = this.modelValue
       this.autoNumeric = new AutoNumeric(this.$refs.input, options)
     })
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.autoNumeric.remove()
   }
 }

package/src/components/numeric-input/QasNumericInput.yml

@@ -0,0 +1,51 @@
+type: component
+
+mixins:
+  - quasar/dist/api/QField.json
+
+meta:
+  desc: Componente de input para decimal, inteiro, dinheiro e porcentagem.
+
+props:
+  allow-negative:
+    desc: Controla se pode ou não números negativos.
+    default: true
+    type: Boolean
+
+  allow-positive:
+    desc: Controla se pode ou não números positivos.
+    default: true
+    type: Boolean
+
+  autonumeric-props:
+    desc: Opções do autonumeric (http://autonumeric.org/guide).
+    default: {}
+    type: Object
+
+  decimal-places:
+    desc: Quantidade de casas decimais.
+    default: 2
+    type: Number
+
+  mode:
+    desc: Modo do componente.
+    default: integer
+    type: String
+    examples: [integer, decimal, percent, money]
+
+  model-value:
+    desc: Model do componente, usado para v-model, sempre que alterado transforma o valor para "Number".
+    default: ''
+    type: [String, Number]
+    model: true
+
+  preset:
+    desc: Propriedade preset serve para usar configuração de predefinição/nacionalidade da moeda pré setada pelo autonumeric (Brasil é o padrão).
+    type: [Boolean, 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

package/src/components/page-header/QasPageHeader.vue

@@ -6,28 +6,29 @@
         {{ title }}
       </q-toolbar-title>
 
-      <q-breadcrumbs v-if="!noBreadcrumbs" class="text-caption text-grey-6">
-        <q-breadcrumbs-el v-for="item in transformedBreadcrumbs" :key="item.label" :label="item.label" :to="item.route" />
+      <q-breadcrumbs v-if="useBreadcrumbs" class="text-caption" separator-color="grey-7">
+        <q-breadcrumbs-el v-for="(item, index) in transformedBreadcrumbs" :key="item.label" :class="getBreadcrumbsClass(index)" :label="item.label" :to="item.route" />
       </q-breadcrumbs>
     </div>
-
     <slot />
   </q-toolbar>
 </template>
 
 <script>
-import { castArray, get } from 'lodash'
-import { history, handleHistory } from '../../helpers/historyHandler'
+import { castArray } from 'lodash-es'
+import { history, getPreviousRoute } from '../../store/history'
 
 export default {
+  name: 'QasPageHeader',
+
   props: {
     breadcrumbs: {
       default: '',
-      type: [Array, Boolean, String]
+      type: [Array, String]
     },
 
-    noBreadcrumbs: {
-      default: false,
+    useBreadcrumbs: {
+      default: true,
       type: Boolean
     },
 
@@ -60,8 +61,10 @@ export default {
           item.route = { name: item.routeName }
         }
 
-        if (this.$history && get(item, 'route.name')) {
-          const previous = this.$history.find(history => history.name === item.route.name)
+        const historyList = history.list
+
+        if (historyList.length && item?.route?.name) {
+          const previous = historyList.find(history => history.name === item.route.name)
           item.route.query = previous ? previous.query : null
         }
 
@@ -72,7 +75,13 @@ export default {
 
   methods: {
     back () {
-      this.$router.push(handleHistory().getPreviousRoute(this.$route))
+      this.$router.push(getPreviousRoute(this.$route))
+    },
+
+    getBreadcrumbsClass (index) {
+      const lastIndex = this.transformedBreadcrumbs.length - 1
+
+      return lastIndex === index ? 'text-grey-7' : 'text-primary'
     }
   },
 

package/src/components/page-header/QasPageHeader.yml

@@ -0,0 +1,24 @@
+type: component
+
+mixins:
+  - quasar/dist/api/QToolbar.json
+
+meta:
+  desc: Componente para cabeçalho de páginas com breadcrumbs e botão de voltar baseado no histórico de navegação dentro da aplicação.
+
+props:
+  breadcrumbs:
+    desc: Configurações do QBreadcrumbs (https://quasar.dev/vue-components/breadcrumbs#introduction).
+    type: [Array, String]
+
+  use-breadcrumbs:
+    desc: Habilita ou não o breadcrumbs.
+    type: [Array, String]
+
+  title:
+    desc: Título do cabeçalho.
+    type: String
+
+  root:
+    desc: Rota raiz do breadcrumbs.
+    type: [Object, String]