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

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

@@ -1,19 +1,17 @@
 <template>
-  <q-input ref="mask" v-model="model" v-bind="$attrs" bottom-slots :type="type" v-on="events">
-    <template v-if="!hideStrengthChecker" #hint>
-      <qas-password-strength-checker v-bind="$props" @password-success="onSuccess" />
-    </template>
-
+  <qas-input v-model="model" bottom-slots :type="type">
     <template #append>
       <q-icon class="cursor-pointer" :color="iconColor" :name="icon" @click="toggle" />
     </template>
 
-    <slot v-for="(slot, key) in $slots" :slot="key" :name="key" />
+    <template v-for="(_, name) in $slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
 
-    <template v-for="(slot, key) in $scopedSlots" :slot="key" slot-scope="scope">
-      <slot :name="key" v-bind="scope" />
+    <template v-if="useStrengthChecker" #hint>
+      <qas-password-strength-checker v-bind="strengthCheckerProps" :password="model" />
     </template>
-  </q-input>
+  </qas-input>
 </template>
 
 <script>
@@ -21,6 +19,8 @@ import passwordMixin from '../../mixins/password.js'
 import QasPasswordStrengthChecker from '../password-strength-checker/QasPasswordStrengthChecker.vue'
 
 export default {
+  name: 'QasPasswordInput',
+
   components: {
     QasPasswordStrengthChecker
   },
@@ -28,8 +28,9 @@ export default {
   mixins: [passwordMixin],
 
   props: {
-    hideStrengthChecker: {
-      type: Boolean
+    useStrengthChecker: {
+      type: Boolean,
+      default: true
     },
 
     iconColor: {
@@ -37,46 +38,48 @@ export default {
       default: 'primary'
     },
 
-    value: {
+    modelValue: {
       type: String,
       default: ''
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
+      key: 'error',
       toggleType: true
     }
   },
 
   computed: {
-    events () {
-      const { input, ...events } = this.$listeners
-
-      return events
-    },
-
     icon () {
       return this.toggleType ? 'o_visibility_off' : 'o_visibility'
     },
 
     model: {
       get () {
-        return this.value
+        return this.modelValue
       },
 
       set (value) {
-        return this.$emit('input', value)
+        return this.$emit('update:modelValue', value)
       }
     },
 
+    strengthCheckerProps () {
+      const { modelValue, ...props } = this.$props
+      return props
+    },
+
     type () {
       return this.toggleType ? 'password' : 'text'
     }
   },
 
   watch: {
-    value () {
+    modelValue () {
       if (this.$attrs.error) {
         this.$attrs.error = false
         this.$attrs.errorMessage = ''

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

@@ -0,0 +1,103 @@
+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'
+
+props:
+  use-strength-checker:
+    desc: Controla exibição do componente `QasStrenghtChecker`.
+    default: true
+    type: Boolean
+
+  icon-color:
+    desc: Cor do ícone do input.
+    default: primary
+    type: String
+
+  model-value:
+    desc: Model do componente.
+    type: String
+    examples: [v-model="value"]
+    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
+
+  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-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

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

@@ -1,7 +1,9 @@
 <template>
   <div v-if="length">
-    <q-linear-progress :color="option.color" rounded :track-color="trackColor" :value="option.progress" />
-    <div class="q-mt-xs text-subtitle2" :class="option.textClass">{{ option.label }}</div>
+    <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>
+    </slot>
   </div>
 </template>
 
@@ -9,56 +11,71 @@
 import passwordMixin from '../../mixins/password.js'
 
 export default {
+  name: 'QasPasswordStrengthChecker',
+
   mixins: [passwordMixin],
 
   props: {
-    trackColor: {
-      default: 'blue-grey-1',
-      type: String
+    modelValue: {
+      default: false,
+      type: Boolean
     },
 
-    value: {
+    password: {
       default: '',
       type: String
     }
   },
 
+  emits: ['update:modelValue'],
+
   computed: {
     length () {
-      return (this.value || '').length
+      return this.password.length
+    },
+
+    level () {
+      return this.levels[this.score]
     },
 
-    option () {
-      if (this.value.match(this.pattern)) {
-        return {
-          color: 'positive',
-          label: 'Forte',
-          progress: 1,
-          textClass: 'text-positive'
-        }
-      }
-
-      if (this.length >= this.weak) {
-        return {
-          color: 'warning',
-          label: 'Fraca',
-          progress: 0.5,
-          textClass: 'text-warning'
-        }
-      }
-
-      return {
-        color: 'negative',
-        label: 'Muito fraca',
-        progress: 0.25,
-        textClass: 'text-negative'
-      }
+    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: {
-    isSuccess (value) {
-      value && this.onSuccess()
+    password () {
+      this.emitValue()
+    }
+  },
+
+  created () {
+    this.emitValue()
+  },
+
+  methods: {
+    emitValue () {
+      this.$emit('update:modelValue', this.score === 4)
     }
   }
 }

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

@@ -0,0 +1,103 @@
+type: component
+
+meta:
+  desc: Componente para checar nível de força da senha.
+
+props:
+  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
+
+  password:
+    desc: Senha para ser usado nas validações.
+    type: String
+
+  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
+
+  minlength:
+    desc: Número mínimo de caracteres.
+    default: 8
+    type: [Number, String]
+    examples: ["{ title: 'Meu título', description: 'Minha descrição' }"]
+
+  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-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
+
+slots:
+  default:
+    desc: Slot para substituir o componente de progresso.
+    scope:
+      level:
+        desc: Retorna o nível de força.
+        type: Object
+
+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

package/src/components/profile/QasProfile.vue

@@ -4,7 +4,7 @@
       <div class="col-lg-5 col-xs-12">
         <div class="no-wrap q-col-gutter-md" :class="directionClasses">
           <div class="justify-center lg:q-mb-none md:q-mr-lg row xs:q-mb-md">
-            <qas-avatar :image="userAvatarImage" :size="getAvatarSize" :title="title" />
+            <qas-avatar :image="userAvatarImage" :size="avatarSize" :title="title" />
           </div>
           <slot>
             <h6 class="text-bold text-h6">{{ title }}</h6>
@@ -13,7 +13,11 @@
         </div>
       </div>
       <slot name="grid">
-        <qas-grid-generator class="col-lg-7 col-xs-12 items-center" :columns="columns" :fields="filterObject(fields, list)" hide-empty-result :result="result" />
+        <qas-grid-generator class="col-lg-7 col-xs-12 items-center" :columns="columns" :fields="filterObject(fields, list)" hide-empty-result :result="result">
+          <template v-for="(_, name) in $slots" #[name]="context">
+            <slot :name="name" v-bind="context || {}" />
+          </template>
+        </qas-grid-generator>
       </slot>
     </div>
   </component>
@@ -23,11 +27,13 @@
 import filterObject from '../../helpers/filter-object'
 import screenMixin from '../../mixins/screen'
 
-import QasAvatar from '../avatar/QasAvatar'
-import QasBox from '../box/QasBox'
-import QasGridGenerator from '../grid-generator/QasGridGenerator'
+import QasAvatar from '../avatar/QasAvatar.vue'
+import QasBox from '../box/QasBox.vue'
+import QasGridGenerator from '../grid-generator/QasGridGenerator.vue'
 
 export default {
+  name: 'QasProfile',
+
   components: {
     QasAvatar,
     QasBox,
@@ -47,13 +53,9 @@ export default {
       default: () => ({})
     },
 
-    hideStatus: {
-      type: Boolean
-    },
-
     list: {
       type: Array,
-      default: () => ([])
+      default: () => []
     },
 
     result: {
@@ -80,15 +82,15 @@ export default {
 
   computed: {
     directionClasses () {
-      return this.$_untilMedium ? 'col' : 'row items-center'
+      return this.mx_untilMedium ? 'col' : 'row items-center'
     },
 
     userAvatarImage () {
       return this.result.image
     },
 
-    getAvatarSize () {
-      return this.$_isSmall ? '145px' : '188px'
+    avatarSize () {
+      return this.mx_isSmall ? '145px' : '188px'
     }
   },
 

package/src/components/profile/QasProfile.yml

@@ -0,0 +1,60 @@
+type: component
+
+meta:
+  desc: Componente para cabeçalho de perfil.
+
+props:
+  columns:
+    desc: Colunas do grid de cada campo.
+    default: col-6
+    type: Object
+    examples:
+      name:
+        col: 6
+
+  fields:
+    desc: Lista de field contendo informações necessárias para a criação do campo correspondente.
+    default: {}
+    type: Object
+    examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
+
+  list:
+    desc: Lista de campos para filtrar da propriedade "fields".
+    default: []
+    type: Array
+    examples: ["[name, email]"]
+
+  result:
+    desc: Resultado contendo todas informações para serem exibidas na tela.
+    default: {}
+    type: Object
+    examples: ["{ 'joah@examples.com' }"]
+
+  subtitle:
+    desc: Subtitulo do cabeçalho de perfil.
+    type: String
+
+  title:
+    desc: Título do cabeçalho de perfil.
+    type: String
+    required: true
+
+  tag:
+    desc: Tag do componente pai.
+    default: qas-box
+    type: String
+
+slots:
+  default:
+    desc: Slot para acessar seção de título e subtitulo.
+
+  grid:
+    desc: Slot para acessar seção do grid, onde fica o "QasGridGenerator";
+
+  'field-[nome-da-chave]':
+    desc: Slot para todo o conteúdo dentro de cada grid (header e content), repassado do componente "QasGridGenerator".
+    scope:
+      field:
+        desc: Conteúdo do field atual mais o resultado formatado.
+        default: {}
+        type: Object

package/src/components/resizer/QasResizer.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { greatestCommonDivisor } from '../../helpers'
+import { getGreatestCommonDivisor } from '../../helpers'
 
 const baseURL = 'https://image-resize.nave.dev/'
 
@@ -40,7 +40,7 @@ export default {
 
     imageParameters () {
       const parameters = {
-        bucket: this.$environment?.bucket,
+        bucket: process.env.BUCKET,
         key: this.source,
         edits: {}
       }
@@ -77,7 +77,7 @@ export default {
       const height = parseInt(this.height)
       const width = parseInt(this.width)
 
-      const divisor = greatestCommonDivisor(height, width)
+      const divisor = getGreatestCommonDivisor(height, width)
 
       return (width / divisor) / (height / divisor)
     },

package/src/components/resizer/QasResizer.yml

@@ -0,0 +1,23 @@
+type: component
+
+mixins:
+  - quasar/dist/api/QImg.json
+
+meta:
+  desc: Componente para exibir imagem redimensionadas, implementa o "QImg".
+
+props:
+  size:
+    desc: Tamanho da imagem.
+    type: String
+
+  source:
+    desc: Caminho da imagem.
+    type: String
+    examples: [bild-vitta.png]
+
+  resize:
+    desc: Formato de ajuste.
+    default: cover
+    type: String
+    examples: [cover, contain, fill, inside, outside]