@bildvitta/quasar-ui-asteroid 3.0.0-alpha.3 → 3.0.0-beta.3

package/src/components/input/QasInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-input ref="input" v-model="model" bottom-slots v-bind="$attrs" :mask="mask" :outlined="outlined" :unmasked-value="unmaskedValue">
+    <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessageData" :mask="mask" :outlined="outlined" :unmasked-value="unmaskedValue">
       <template v-for="(_, name) in $slots" #[name]="context">
         <slot :name="name" v-bind="context || {}" />
       </template>
@@ -17,7 +17,7 @@ export default {
   props: {
     modelValue: {
       default: '',
-      type: String
+      type: [String, Number]
     },
 
     unmaskedValue: {
@@ -28,11 +28,31 @@ export default {
     outlined: {
       default: true,
       type: Boolean
+    },
+
+    removeErrorOnType: {
+      type: Boolean
+    },
+
+    error: {
+      type: Boolean
+    },
+
+    errorMessage: {
+      type: String,
+      default: ''
     }
   },
 
   emits: ['update:modelValue'],
 
+  data () {
+    return {
+      errorData: false,
+      messageErrorData: ''
+    }
+  },
+
   computed: {
     hasError () {
       return this.inputReference.hasError
@@ -65,6 +85,11 @@ export default {
       },
 
       set (value) {
+        if (this.removeErrorOnType && this.error) {
+          this.errorData = false
+          this.errorMessageData = ''
+        }
+
         return this.$emit('update:modelValue', value)
       }
     }
@@ -77,6 +102,22 @@ export default {
       requestAnimationFrame(() => {
         input.selectionStart = input.value ? input.value.length : ''
       })
+    },
+
+    error: {
+      handler (value) {
+        this.errorData = value
+      },
+
+      immediate: true
+    },
+
+    errorMessage: {
+      handler (value) {
+        this.errorMessageData = value
+      },
+
+      immediate: true
     }
   },
 

package/src/components/input/QasInput.yml

@@ -9,7 +9,7 @@ meta:
 props:
   model-value:
     desc: Model do componente.
-    type: String
+    type: [String, Input]
     examples: [v-model="value"]
     model: true
 
@@ -23,6 +23,18 @@ props:
     default: true
     type: Boolean
 
+  error:
+    desc: Controla cor da borda do input.
+    type: Boolean
+
+  error-message:
+    desc: Controla mensagem de erro (apenas quando "error" for "true").
+    type: String
+
+  remove-error-on-type:
+    desc: Limpa os erros do campo caso os mesmos existam toda vez que o model atualiza.
+    type: Boolean
+
 events:
   '@update:model-value -> function (value)':
     desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.

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

@@ -4,46 +4,44 @@
       <qas-label v-if="useSingleLabel" :label="fieldLabel" />
     </div>
 
-    <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="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">
-                  <qas-label v-if="!useSingleLabel" :label="setRowLabel(index)" />
-
-                  <div v-if="!useInlineActions" class="q-gutter-x-sm">
-                    <qas-btn v-if="useDuplicate" v-bind="btnDuplicateProps" @click="add(row)" />
-                    <qas-btn v-if="showDestroyBtn" v-bind="btnDestroyProps" @click="destroy(index, row)" />
-                  </div>
+    <div ref="inputContent">
+      <component :is="componentTag" v-bind="componentProps">
+        <div v-for="(row, index) in nested" :id="`row-${index}`" :key="`row-${index}`" class="full-width">
+          <div v-if="!row[destroyKey]" :key="index" class="col-12 q-mt-md">
+            <div>
+              <div class="flex items-center justify-between q-py-xs">
+                <qas-label v-if="!useSingleLabel" :label="setRowLabel(index)" />
+
+                <div v-if="!useInlineActions" class="q-gutter-x-sm">
+                  <qas-btn v-if="useDuplicate" v-bind="btnDuplicateProps" @click="add(row)" />
+                  <qas-btn v-if="showDestroyBtn" v-bind="btnDestroyProps" @click="destroy(index, row)" />
                 </div>
+              </div>
 
-                <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-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">
-                    <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 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-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">
+                  <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 :fields="children" :index="index" :model="nested[index]" name="custom-fields" :update-value="updateValuesFromInput" />
-                </div>
+              <div class="col-12">
+                <slot :fields="children" :index="index" :model="nested[index]" name="custom-fields" :update-value="updateValuesFromInput" />
               </div>
             </div>
-          </component>
+          </div>
         </div>
       </component>
 
@@ -60,7 +58,7 @@
           </div>
 
           <div v-else class="q-mt-lg">
-            <qas-btn class="full-width q-py-sm" icon="o_add" outline @click="add()">{{ addInputLabel }}</qas-btn>
+            <qas-btn class="full-width q-py-md" icon="o_add" outline @click="add()">{{ addInputLabel }}</qas-btn>
           </div>
         </slot>
       </div>
@@ -73,6 +71,7 @@ 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 { TransitionGroup } from 'vue'
 
 import { constructObject } from '../../helpers'
 import { extend } from 'quasar'
@@ -85,7 +84,10 @@ export default {
     QasBtn,
     QasFormGenerator,
     QasInput,
-    QasLabel
+    QasLabel,
+
+    // vue
+    TransitionGroup
   },
 
   props: {
@@ -249,6 +251,16 @@ export default {
 
     componentTag () {
       return this.useAnimation ? 'transition-group' : 'div'
+    },
+
+    componentProps () {
+      if (!this.useAnimation) return {}
+
+      return {
+        tag: 'div',
+        enterActiveClass: 'animated slideInDown',
+        leaveActiveClass: 'animated slideOutUp'
+      }
     }
   },
 

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

@@ -16,7 +16,9 @@
 
 <script>
 import { castArray } from 'lodash-es'
-import { history, getPreviousRoute } from '../../store/history'
+import { useHistory } from '../../composables'
+
+const { hasPreviousRoute, history, getPreviousRoute } = useHistory()
 
 export default {
   name: 'QasPageHeader',
@@ -45,7 +47,7 @@ export default {
 
   computed: {
     hasPreviousRoute () {
-      return history.hasPreviousRoute
+      return hasPreviousRoute.value
     },
 
     transformedBreadcrumbs () {

package/src/components/password-input/QasPasswordInput.vue

@@ -1,17 +1,19 @@
 <template>
-  <qas-input v-model="model" bottom-slots :type="type">
-    <template #append>
-      <q-icon class="cursor-pointer" :color="iconColor" :name="icon" @click="toggle" />
-    </template>
-
-    <template v-for="(_, name) in $slots" #[name]="context">
-      <slot :name="name" v-bind="context || {}" />
-    </template>
-
-    <template v-if="useStrengthChecker" #hint>
-      <qas-password-strength-checker v-bind="strengthCheckerProps" :password="model" />
-    </template>
-  </qas-input>
+  <div>
+    <qas-input v-model="model" bottom-slots v-bind="$attrs" remove-error-on-type :type="type">
+      <template #append>
+        <q-icon class="cursor-pointer" :color="iconColor" :name="icon" @click="toggle" />
+      </template>
+
+      <template v-for="(_, name) in $slots" #[name]="context">
+        <slot :name="name" v-bind="context || {}" />
+      </template>
+
+      <template v-if="!hideStrengthChecker" #hint>
+        <qas-password-strength-checker v-bind="strengthCheckerProps" :password="model" />
+      </template>
+    </qas-input>
+  </div>
 </template>
 
 <script>
@@ -28,9 +30,8 @@ export default {
   mixins: [passwordMixin],
 
   props: {
-    useStrengthChecker: {
-      type: Boolean,
-      default: true
+    hideStrengthChecker: {
+      type: Boolean
     },
 
     iconColor: {
@@ -48,7 +49,6 @@ export default {
 
   data () {
     return {
-      key: 'error',
       toggleType: true
     }
   },
@@ -78,15 +78,6 @@ export default {
     }
   },
 
-  watch: {
-    modelValue () {
-      if (this.$attrs.error) {
-        this.$attrs.error = false
-        this.$attrs.errorMessage = ''
-      }
-    }
-  },
-
   methods: {
     toggle () {
       this.toggleType = !this.toggleType

package/src/components/password-input/QasPasswordInput.yml

@@ -5,7 +5,7 @@ meta:
 
 mixins:
   - '@bildvitta/quasar-ui-asteroid/dist/api/QasInput.json'
-
+  - quasar/dist/api/QInput.json
 props:
   use-strength-checker:
     desc: Controla exibição do componente `QasStrenghtChecker`.

package/src/components/profile/QasProfile.vue

@@ -25,7 +25,6 @@
 
 <script>
 import filterObject from '../../helpers/filter-object'
-import screenMixin from '../../mixins/screen'
 
 import QasAvatar from '../avatar/QasAvatar.vue'
 import QasBox from '../box/QasBox.vue'
@@ -40,8 +39,6 @@ export default {
     QasGridGenerator
   },
 
-  mixins: [screenMixin],
-
   props: {
     columns: {
       type: Object,
@@ -82,7 +79,7 @@ export default {
 
   computed: {
     directionClasses () {
-      return this.mx_untilMedium ? 'col' : 'row items-center'
+      return this.$qas.screen.untilMedium ? 'col' : 'row items-center'
     },
 
     userAvatarImage () {
@@ -90,7 +87,7 @@ export default {
     },
 
     avatarSize () {
-      return this.mx_isSmall ? '145px' : '188px'
+      return this.$qas.screen.isSmall ? '145px' : '188px'
     }
   },
 

package/src/components/search-box/QasSearchBox.vue

@@ -125,6 +125,7 @@ export default {
         this.fuse = new Fuse(value, this.defaultFuseOptions)
 
         this.setResults(this.search)
+        this.updateResultsModel(value)
       },
 
       deep: true
@@ -141,7 +142,7 @@ export default {
 
     searchResults: {
       handler (value) {
-        this.$emit('update:results', value.map(result => result.item || result))
+        this.updateResultsModel(value)
       },
       immediate: true
     }
@@ -158,6 +159,10 @@ export default {
       this.searchResults = value
         ? this.fuse.search(value)
         : this.list
+    },
+
+    updateResultsModel (value) {
+      this.$emit('update:results', value.map(result => result.item || result))
     }
   }
 }

package/src/components/select-list/QasSelectList.vue

@@ -24,7 +24,6 @@
 
 <script>
 import { sortBy } from 'lodash-es'
-import { screenMixin } from '../../mixins'
 
 import QasBtn from '../btn/QasBtn.vue'
 import QasSearchBox from '../search-box/QasSearchBox.vue'
@@ -37,8 +36,6 @@ export default {
     QasSearchBox
   },
 
-  mixins: [screenMixin],
-
   props: {
     deleteOnly: {
       type: Boolean
@@ -119,15 +116,17 @@ export default {
       immediate: true
     },
 
-    modelValue (value) {
-      this.values = [...value]
+    modelValue: {
+      handler (value) {
+        this.values = [...value]
+      },
+
+      immediate: true
     }
   },
 
   created () {
-    this.values = [...this.modelValue]
-
-    this.handleOptions()
+    this.handleList()
   },
 
   methods: {
@@ -142,9 +141,9 @@ export default {
       const isSelected = this.values.includes(value)
 
       return {
-        dense: this.mx_isSmall,
+        dense: this.$qas.screen.isSmall,
         hideLabelOnSmallScreen: true,
-        icon: !this.mx_isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
+        icon: !this.$qas.screen.isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
         label: isSelected ? 'Remover' : 'Adicionar',
         outline: isSelected,
         size: 'sm'
@@ -155,7 +154,7 @@ export default {
       return this.values.includes(item.value) ? this.remove(item) : this.add(item)
     },
 
-    handleOptions () {
+    handleList () {
       if (this.modelValue.length) {
         return this.sortList()
       }
@@ -186,8 +185,8 @@ export default {
 
     sortList () {
       this.sortedList = this.deleteOnly
-        ? this.list.filter(option => this.modelValue.includes(option.value))
-        : sortBy(this.list, option => !this.modelValue.includes(option.value))
+        ? this.list.filter(item => this.modelValue.includes(item.value))
+        : sortBy(this.list, item => !this.modelValue.includes(item.value))
     },
 
     updateModel (model) {

package/src/components/signature-uploader/QasSignatureUploader.vue

@@ -15,13 +15,15 @@
       </template>
     </qas-uploader>
 
-    <qas-dialog v-model="isOpenedDialog">
+    <qas-dialog v-model="isOpenedDialog" v-bind="defaultDialogProps">
       <template #header>
         <div class="text-bold text-center">Insira sua assinatura digital no campo abaixo</div>
       </template>
 
       <template #description>
-        <qas-signature-pad ref="signaturePadModal" v-model:empty="isEmpty" height="250" />
+        <div :style="signaturePadWidth">
+          <qas-signature-pad ref="signaturePadModal" v-model:empty="isEmpty" :height="signaturePadHeight" />
+        </div>
       </template>
 
       <template #actions>
@@ -49,6 +51,11 @@ export default {
   },
 
   props: {
+    dialogProps: {
+      type: Object,
+      default: () => ({})
+    },
+
     uploadLabel: {
       default: '',
       type: String
@@ -97,6 +104,32 @@ export default {
 
     headerClass () {
       return `q-pa-${this.readonly ? 'md' : 'sm'}`
+    },
+
+    defaultDialogProps () {
+      return {
+        maxWidth: '620px',
+        ...this.dialogProps
+      }
+    },
+
+    signaturePadWidth () {
+      const sizes = {
+        [this.$qas.screen.isSmall]: { width: '100%' },
+        [this.$qas.screen.isMedium]: { width: '570px' },
+        [this.$qas.screen.isLarge]: { width: '350px' }
+      }
+      return sizes.true
+    },
+
+    signaturePadHeight () {
+      const sizes = {
+        [this.$qas.screen.isSmall]: '250',
+        [this.$qas.screen.isMedium]: '400',
+        [this.$qas.screen.isLarge]: '250'
+      }
+
+      return sizes.true
     }
   },
 

package/src/components/signature-uploader/QasSignatureUploader.yml

@@ -4,6 +4,11 @@ meta:
 desc: Componente que implementa o "QasUploader" e "QasSignaturePad" para fazer upload de assinatura.
 
 props:
+  dialog-props:
+    desc: Repassa propriedades para o "QasDialog".
+    type: Object
+    default: { maxWidth: '620px' }
+
   upload-label:
     desc: Rótulo do uploader.
     type: String

package/src/components/table-generator/QasTableGenerator.vue

@@ -16,13 +16,10 @@
 import { extend } from 'quasar'
 import { humanize } from '../../helpers/filters'
 import { setScrollOnGrab } from '../../helpers'
-import screenMixin from '../../mixins/screen'
 
 export default {
   name: 'QasTableGenerator',
 
-  mixins: [screenMixin],
-
   props: {
     columns: {
       default: () => [],
@@ -149,7 +146,7 @@ export default {
     },
 
     tableClass () {
-      return this.mx_isSmall && 'qas-table-generator--mobile'
+      return this.$qas.screen.isSmall && 'qas-table-generator--mobile'
     },
 
     hasScrollOnGrab () {
@@ -190,8 +187,8 @@ export default {
     },
 
     getFullTableWidth () {
-      const tableElemet = this.getTableElement()
-      return tableElemet?.getBoundingClientRect?.()?.width
+      const tableElement = this.getTableElement()
+      return tableElement?.getBoundingClientRect?.()?.width
     },
 
     getContainerTableWidth () {

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

@@ -18,7 +18,6 @@
 </template>
 
 <script>
-import screenMixin from '../../mixins/screen'
 import QasDialog from '../dialog/QasDialog.vue'
 
 export default {
@@ -28,8 +27,6 @@ export default {
     QasDialog
   },
 
-  mixins: [screenMixin],
-
   props: {
     dialogProps: {
       type: Object,
@@ -69,7 +66,7 @@ export default {
 
   computed: {
     truncateTextClass () {
-      return (this.isTruncated || this.mx_isSmall) && 'ellipsis q-pr-sm'
+      return (this.isTruncated || this.$qas.screen.isSmall) && 'ellipsis q-pr-sm'
     },
 
     isTruncated () {

package/src/components/transfer/QasTransfer.vue

@@ -4,10 +4,10 @@
     <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 }">
+      <qas-search-box v-model:results="firstResults" :list="optionsList" outlined v-bind="searchBoxProps">
+        <template #default>
           <q-list separator>
-            <q-item v-for="(item, index) in results" :key="index" :class="getItemClass(item, true)" clickable @click="onSelectQueue(item, true)">
+            <q-item v-for="(item, index) in firstResults" :key="index" :class="getItemClass(item, true)" clickable @click="onSelectQueue(item, true)">
               <slot name="item-first-column">
                 <q-item-section>{{ getItemLabel(item) }}</q-item-section>
               </slot>
@@ -33,10 +33,10 @@
     <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">
-        <template #default="{ results }">
+      <qas-search-box v-model:results="secondResults" v-bind="searchBoxProps" empty-list-height="300px" label="Selecionadas" :list="selectedList" outlined>
+        <template #default>
           <q-list separator>
-            <q-item v-for="(item, index) in results" :key="index" :class="getItemClass(item)" clickable @click="onSelectQueue(item)">
+            <q-item v-for="(item, index) in secondResults" :key="index" :class="getItemClass(item)" clickable @click="onSelectQueue(item)">
               <slot name="item-second-column">
                 <q-item-section>{{ getItemLabel(item) }}</q-item-section>
               </slot>
@@ -49,7 +49,6 @@
 </template>
 
 <script>
-import { screenMixin } from '../../mixins'
 import { extend } from 'quasar'
 
 import QasBtn from '../btn/QasBtn.vue'
@@ -65,8 +64,6 @@ export default {
     QasSearchBox
   },
 
-  mixins: [screenMixin],
-
   props: {
     emitValue: {
       type: Boolean
@@ -116,21 +113,23 @@ export default {
       firstQueue: [],
       optionsList: [],
       secondQueue: [],
-      selectedList: []
+      selectedList: [],
+      firstResults: [],
+      secondResults: []
     }
   },
 
   computed: {
     actionsClass () {
-      return !this.mx_isSmall && 'column'
+      return !this.$qas.screen.isSmall && 'column'
     },
 
     gutterClass () {
-      return `q-col-gutter-${this.mx_untilLarge ? 'md' : 'xl'}`
+      return `q-col-gutter-${this.$qas.screen.untilLarge ? 'md' : 'xl'}`
     },
 
     iconClass () {
-      return !this.mx_isSmall && 'qas-transfer__icon'
+      return !this.$qas.screen.isSmall && 'qas-transfer__icon'
     },
 
     searchBoxProps () {