@bildvitta/quasar-ui-asteroid 3.7.0-beta.2 → 3.7.0-beta.3

package/package.json

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

package/src/components/input/QasInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessageData" :mask="mask" :outlined="outlined" :unmasked-value="unmaskedValue" @paste="onPaste">
+  <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessage" :mask="mask" :outlined="outlined" :unmasked-value="unmaskedValue" @paste="onPaste">
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
@@ -47,7 +47,6 @@ export default {
   data () {
     return {
       errorData: false,
-      messageErrorData: '',
       mask: ''
     }
   },
@@ -107,14 +106,6 @@ export default {
         this.errorData = value
       },
 
-      immediate: true
-    },
-
-    errorMessage: {
-      handler (value) {
-        this.errorMessageData = value
-      },
-
       immediate: true
     }
   },
@@ -156,7 +147,6 @@ export default {
     handleErrors () {
       if (this.useRemoveErrorOnType && this.error) {
         this.errorData = false
-        this.errorMessageData = ''
       }
     },
 

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

@@ -1,7 +1,11 @@
 <template>
-  <qas-input v-model="model" :bottom-slots="hasBottomSlots" v-bind="$attrs" :type="type" use-remove-error-on-type>
+  <qas-input v-model="model" class="qas-password-input" :hide-bottom-space="hideBottomSpace" v-bind="$attrs" :type="type" use-remove-error-on-type>
+    <template #prepend>
+      <q-icon color="grey-8" name="sym_r_lock" />
+    </template>
+
     <template #append>
-      <q-icon class="cursor-pointer" :color="iconColor" :name="icon" @click="toggle" />
+      <qas-btn color="primary" :icon="icon" variant="tertiary" @click="toggle" />
     </template>
 
     <template v-for="(_, name) in $slots" #[name]="context">
@@ -9,7 +13,7 @@
     </template>
 
     <template v-if="hasStrengthChecker" #hint>
-      <qas-password-strength-checker v-bind="strengthCheckerProps" :password="model" />
+      <qas-password-strength-checker v-bind="strengthCheckerProps" :password="model" @update:current-level="updateCurrentLevel" />
     </template>
   </qas-input>
 </template>
@@ -37,18 +41,13 @@ export default {
       type: Boolean
     },
 
-    iconColor: {
-      type: String,
-      default: 'primary'
-    },
-
     modelValue: {
       type: String,
       default: ''
     }
   },
 
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'update:currentLevel'],
 
   data () {
     return {
@@ -72,7 +71,12 @@ export default {
     },
 
     strengthCheckerProps () {
-      const { modelValue, ...props } = this.$props
+      const {
+        modelValue,
+        useStrengthChecker,
+        ...props
+      } = this.$props
+
       return props
     },
 
@@ -86,12 +90,20 @@ export default {
 
     hasStrengthChecker () {
       return this.useStrengthChecker && this.hasBottomSlots
+    },
+
+    hideBottomSpace () {
+      return this.$attrs.error || !!this.model.length
     }
   },
 
   methods: {
     toggle () {
       this.toggleType = !this.toggleType
+    },
+
+    updateCurrentLevel (currentLevel) {
+      this.$emit('update:currentLevel', currentLevel)
     }
   }
 }

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

@@ -7,10 +7,11 @@ mixins:
   - '@bildvitta/quasar-ui-asteroid/dist/api/QasInput.json'
   - quasar/dist/api/QInput.json
 props:
-  icon-color:
-    desc: Cor do ícone do input.
-    default: primary
-    type: String
+  current-level:
+    desc: model que tem o valor atual do level.
+    default: 0
+    type: Number
+    model: true
 
   levels:
     desc: Níveis de força da senha, é um objeto de objeto.
@@ -101,3 +102,10 @@ events:
       value:
         desc: Novo valor do v-model
         type: Boolean
+
+  '@update:current-level -> function (level)':
+    desc: Dispara toda vez que o level (score) é atualizado.
+    params:
+      level:
+        desc: Novo valor do v-model:currentLevel
+        type: Boolean

package/src/components/password-strength-checker/QasPasswordStrengthChecker.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-if="length">
     <slot :level="level">
-      <q-linear-progress :color="level.color" :track-color="trackColor" :value="level.progress" />
-      <div class="text-caption" :class="level.textClass">{{ level.label }}</div>
+      <q-linear-progress :color="level.color" rounded :track-color="trackColor" :value="level.progress" />
+      <div class="q-mt-sm text-subtitle2" :class="level.textClass">{{ level.label }}</div>
     </slot>
   </div>
 </template>
@@ -16,18 +16,13 @@ export default {
   mixins: [passwordMixin],
 
   props: {
-    modelValue: {
-      default: false,
-      type: Boolean
-    },
-
     password: {
       default: '',
       type: String
     }
   },
 
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'update:currentLevel'],
 
   computed: {
     length () {
@@ -64,18 +59,12 @@ export default {
   },
 
   watch: {
-    password () {
-      this.emitValue()
-    }
-  },
-
-  created () {
-    this.emitValue()
-  },
+    score: {
+      handler (score) {
+        this.$emit('update:currentLevel', score)
+      },
 
-  methods: {
-    emitValue () {
-      this.$emit('update:modelValue', this.score === 4)
+      immediate: true
     }
   }
 }

package/src/components/password-strength-checker/QasPasswordStrengthChecker.yml

@@ -4,6 +4,12 @@ meta:
   desc: Componente para checar nível de força da senha.
 
 props:
+  current-level:
+    desc: model que tem o valor atual do level.
+    default: 0
+    type: Number
+    model: true
+
   levels:
     desc: Níveis de força da senha, é um objeto de objeto.
     type: [Object, Boolean]
@@ -44,12 +50,6 @@ props:
     desc: Senha para ser usado nas validações.
     type: String
 
-  model-value:
-    desc: Model do componente, retorna se passou ou não na validação de senha.
-    type: Boolean
-    examples: [v-model="value"]
-    model: true
-
   minlength:
     desc: Número mínimo de caracteres.
     default: 8
@@ -95,9 +95,9 @@ slots:
         type: Object
 
 events:
-  '@update:model-value -> function (value)':
-    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
+  '@update:current-level -> function (level)':
+    desc: Dispara toda vez que o level (score) é atualizado.
     params:
-      value:
-        desc: Novo valor do v-model
+      level:
+        desc: Novo valor do v-model:currentLevel
         type: Boolean

package/src/mixins/password.js

@@ -37,6 +37,11 @@ const levels = {
 
 export default {
   props: {
+    currentLevel: {
+      default: 0,
+      type: Number
+    },
+
     levels: {
       default: () => levels,
       type: Object