@bildvitta/quasar-ui-asteroid 3.17.0-beta.20 → 3.17.0-beta.21

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

@@ -1,110 +1,110 @@
-<template>
-  <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>
-      <qas-btn color="primary" :icon="icon" variant="tertiary" @click="toggle" />
-    </template>
-
-    <template v-for="(_, name) in $slots" #[name]="context">
-      <slot :name="name" v-bind="context || {}" />
-    </template>
-
-    <template v-if="hasStrengthChecker" #hint>
-      <qas-password-strength-checker v-bind="strengthCheckerProps" :password="model" @update:current-level="updateCurrentLevel" />
-    </template>
-  </qas-input>
-</template>
-
-<script>
-import QasInput from '../input/QasInput.vue'
-import passwordMixin from '../../mixins/password.js'
-import QasPasswordStrengthChecker from '../password-strength-checker/QasPasswordStrengthChecker.vue'
-
-export default {
-  name: 'QasPasswordInput',
-
-  components: {
-    QasInput,
-    QasPasswordStrengthChecker
-  },
-
-  mixins: [passwordMixin],
-
-  inheritAttrs: false,
-
-  props: {
-    useStrengthChecker: {
-      default: true,
-      type: Boolean
-    },
-
-    modelValue: {
-      type: String,
-      default: ''
-    }
-  },
-
-  emits: ['update:modelValue', 'update:currentLevel'],
-
-  data () {
-    return {
-      toggleType: true
-    }
-  },
-
-  computed: {
-    icon () {
-      return this.toggleType ? 'sym_r_visibility_off' : 'sym_r_visibility'
-    },
-
-    model: {
-      get () {
-        return this.modelValue
-      },
-
-      set (value) {
-        return this.$emit('update:modelValue', value)
-      }
-    },
-
-    strengthCheckerProps () {
-      const {
-        modelValue,
-        useStrengthChecker,
-        ...props
-      } = this.$props
-
-      return props
-    },
-
-    type () {
-      return this.toggleType ? 'password' : 'text'
-    },
-
-    hasBottomSlots () {
-      return !!this.model.length
-    },
-
-    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)
-    }
-  }
-}
-</script>
+<template>
+  <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>
+      <qas-btn color="primary" :icon="icon" variant="tertiary" @click="toggle" />
+    </template>
+
+    <template v-for="(_, name) in $slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
+
+    <template v-if="hasStrengthChecker" #hint>
+      <qas-password-strength-checker v-bind="strengthCheckerProps" :password="model" @update:current-level="updateCurrentLevel" />
+    </template>
+  </qas-input>
+</template>
+
+<script>
+import QasInput from '../input/QasInput.vue'
+import passwordMixin from '../../mixins/password.js'
+import QasPasswordStrengthChecker from '../password-strength-checker/QasPasswordStrengthChecker.vue'
+
+export default {
+  name: 'QasPasswordInput',
+
+  components: {
+    QasInput,
+    QasPasswordStrengthChecker
+  },
+
+  mixins: [passwordMixin],
+
+  inheritAttrs: false,
+
+  props: {
+    useStrengthChecker: {
+      default: true,
+      type: Boolean
+    },
+
+    modelValue: {
+      type: String,
+      default: ''
+    }
+  },
+
+  emits: ['update:modelValue', 'update:currentLevel'],
+
+  data () {
+    return {
+      toggleType: true
+    }
+  },
+
+  computed: {
+    icon () {
+      return this.toggleType ? 'sym_r_visibility_off' : 'sym_r_visibility'
+    },
+
+    model: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        return this.$emit('update:modelValue', value)
+      }
+    },
+
+    strengthCheckerProps () {
+      const {
+        modelValue,
+        useStrengthChecker,
+        ...props
+      } = this.$props
+
+      return props
+    },
+
+    type () {
+      return this.toggleType ? 'password' : 'text'
+    },
+
+    hasBottomSlots () {
+      return !!this.model.length
+    },
+
+    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)
+    }
+  }
+}
+</script>

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

@@ -1,111 +1,111 @@
-type: component
-
-meta:
-  desc: Componente para input de senhas que implementa o "QasInput" repassando todos os slots menos "#hint" e todos os eventos.
-
-mixins:
-  - '@bildvitta/quasar-ui-asteroid/dist/api/QasInput.json'
-  - quasar/dist/api/QInput.json
-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]
-    examples: ["{ label: 'Meu botão de cancelar', onClick: () => alert('fui clicado!') }"]
-    debugger: true
-    default:
-      0:
-        color: 'negative'
-        label: 'Muito fraco'
-        progress: 0.05
-        textClass: 'text-negative'
-
-      1:
-        color: warning
-        label: Fraco
-        progress: 0.25
-        textClass: text-warning
-
-      2:
-        color: warning
-        label: Bom
-        progress: 0.5
-        textClass: text-warning
-
-      3:
-        color: positive
-        label: Forte
-        progress: 0.75
-        textClass: text-positive
-
-      4:
-        color: positive
-        label: Muito forte
-        progress: 1
-        textClass: text-positive
-
-  model-value:
-    desc: Model do componente.
-    type: String
-    examples: [v-model="value"]
-    model: true
-
-  minlength:
-    desc: Número mínimo de caracteres.
-    default: 8
-    type: [Number, String]
-
-  specials:
-    desc: Expressão regular para definir quais tipos de caracteres especiais vai aceitar.
-    default: /[!@#$%^&*()_+\-=[\]{}|;:'",<.>/?`~]/g
-    type: RegExp
-
-  track-color:
-    desc: Cor da barra de progresso.
-    default: blue-grey-1
-    type: String
-
-  use-strength-checker:
-    desc: Controla exibição do componente `QasStrengthChecker`.
-    default: true
-    type: Boolean
-
-  use-lowercase:
-    desc: Obrigatório uso de letra(s) minuscula.
-    default: true
-    type: Boolean
-
-  use-numbers:
-    desc: Obrigatório uso de número(s) minuscula.
-    default: true
-    type: Boolean
-
-  use-special:
-    desc: Obrigatório uso de carácter especial.
-    default: true
-    type: Boolean
-
-  use-uppercase:
-    desc: Obrigatório uso de letra(s) maiúsculas.
-    default: true
-    type: Boolean
-
-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: 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
+type: component
+
+meta:
+  desc: Componente para input de senhas que implementa o "QasInput" repassando todos os slots menos "#hint" e todos os eventos.
+
+mixins:
+  - '@bildvitta/quasar-ui-asteroid/dist/api/QasInput.json'
+  - quasar/dist/api/QInput.json
+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]
+    examples: ["{ label: 'Meu botão de cancelar', onClick: () => alert('fui clicado!') }"]
+    debugger: true
+    default:
+      0:
+        color: 'negative'
+        label: 'Muito fraco'
+        progress: 0.05
+        textClass: 'text-negative'
+
+      1:
+        color: warning
+        label: Fraco
+        progress: 0.25
+        textClass: text-warning
+
+      2:
+        color: warning
+        label: Bom
+        progress: 0.5
+        textClass: text-warning
+
+      3:
+        color: positive
+        label: Forte
+        progress: 0.75
+        textClass: text-positive
+
+      4:
+        color: positive
+        label: Muito forte
+        progress: 1
+        textClass: text-positive
+
+  model-value:
+    desc: Model do componente.
+    type: String
+    examples: [v-model="value"]
+    model: true
+
+  minlength:
+    desc: Número mínimo de caracteres.
+    default: 8
+    type: [Number, String]
+
+  specials:
+    desc: Expressão regular para definir quais tipos de caracteres especiais vai aceitar.
+    default: /[!@#$%^&*()_+\-=[\]{}|;:'",<.>/?`~]/g
+    type: RegExp
+
+  track-color:
+    desc: Cor da barra de progresso.
+    default: blue-grey-1
+    type: String
+
+  use-strength-checker:
+    desc: Controla exibição do componente `QasStrengthChecker`.
+    default: true
+    type: Boolean
+
+  use-lowercase:
+    desc: Obrigatório uso de letra(s) minuscula.
+    default: true
+    type: Boolean
+
+  use-numbers:
+    desc: Obrigatório uso de número(s) minuscula.
+    default: true
+    type: Boolean
+
+  use-special:
+    desc: Obrigatório uso de carácter especial.
+    default: true
+    type: Boolean
+
+  use-uppercase:
+    desc: Obrigatório uso de letra(s) maiúsculas.
+    default: true
+    type: Boolean
+
+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: 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,71 +1,71 @@
-<template>
-  <div v-if="length">
-    <slot :level="level">
-      <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>
-
-<script>
-import passwordMixin from '../../mixins/password.js'
-
-export default {
-  name: 'QasPasswordStrengthChecker',
-
-  mixins: [passwordMixin],
-
-  props: {
-    password: {
-      default: '',
-      type: String
-    }
-  },
-
-  emits: ['update:modelValue', 'update:currentLevel'],
-
-  computed: {
-    length () {
-      return this.password.length
-    },
-
-    level () {
-      return this.levels[this.score]
-    },
-
-    score () {
-      let score = -1
-
-      score += this.useLowercase
-        ? (this.password.match(/[a-z]/g) ? 1 : 0)
-        : 1
-
-      score += this.useNumbers
-        ? (this.password.match(/[0-9]/g) ? 1 : 0)
-        : 1
-
-      score += this.useSpecial
-        ? (this.password.match(this.specials) ? 1 : 0)
-        : 1
-
-      score += this.useUppercase
-        ? (this.password.match(/[A-Z]/g) ? 1 : 0)
-        : 1
-
-      score += this.length >= parseInt(this.minlength) ? 1 : 0
-
-      return score
-    }
-  },
-
-  watch: {
-    score: {
-      handler (score) {
-        this.$emit('update:currentLevel', score)
-      },
-
-      immediate: true
-    }
-  }
-}
-</script>
+<template>
+  <div v-if="length">
+    <slot :level="level">
+      <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>
+
+<script>
+import passwordMixin from '../../mixins/password.js'
+
+export default {
+  name: 'QasPasswordStrengthChecker',
+
+  mixins: [passwordMixin],
+
+  props: {
+    password: {
+      default: '',
+      type: String
+    }
+  },
+
+  emits: ['update:modelValue', 'update:currentLevel'],
+
+  computed: {
+    length () {
+      return this.password.length
+    },
+
+    level () {
+      return this.levels[this.score]
+    },
+
+    score () {
+      let score = -1
+
+      score += this.useLowercase
+        ? (this.password.match(/[a-z]/g) ? 1 : 0)
+        : 1
+
+      score += this.useNumbers
+        ? (this.password.match(/[0-9]/g) ? 1 : 0)
+        : 1
+
+      score += this.useSpecial
+        ? (this.password.match(this.specials) ? 1 : 0)
+        : 1
+
+      score += this.useUppercase
+        ? (this.password.match(/[A-Z]/g) ? 1 : 0)
+        : 1
+
+      score += this.length >= parseInt(this.minlength) ? 1 : 0
+
+      return score
+    }
+  },
+
+  watch: {
+    score: {
+      handler (score) {
+        this.$emit('update:currentLevel', score)
+      },
+
+      immediate: true
+    }
+  }
+}
+</script>