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

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

@@ -1,103 +1,103 @@
-type: component
-
-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]
-    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
-
-  password:
-    desc: Senha para ser usado nas validações.
-    type: String
-
-  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: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 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]
+    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
+
+  password:
+    desc: Senha para ser usado nas validações.
+    type: String
+
+  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: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/profile/QasProfile.vue

@@ -1,98 +1,98 @@
-<template>
-  <component :is="tag">
-    <div class="q-col-gutter-md row">
-      <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="avatarSize" :title="title" />
-          </div>
-          <slot>
-            <h6 class="text-bold text-h6">{{ title }}</h6>
-            <div v-if="subtitle">{{ subtitle }}</div>
-          </slot>
-        </div>
-      </div>
-      <slot name="grid">
-        <qas-grid-generator class="col-lg-7 col-xs-12 items-center" :columns="columns" :fields="filterObject(fields, list)" :result="result" :use-empty-result="false">
-          <template v-for="(_, name) in $slots" #[name]="context">
-            <slot :name="name" v-bind="context || {}" />
-          </template>
-        </qas-grid-generator>
-      </slot>
-    </div>
-  </component>
-</template>
-
-<script>
-import filterObject from '../../helpers/filter-object'
-
-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,
-    QasGridGenerator
-  },
-
-  props: {
-    columns: {
-      type: Object,
-      default: () => ({})
-    },
-
-    fields: {
-      type: Object,
-      default: () => ({})
-    },
-
-    list: {
-      type: Array,
-      default: () => []
-    },
-
-    result: {
-      type: Object,
-      default: () => ({})
-    },
-
-    subtitle: {
-      type: String,
-      default: ''
-    },
-
-    tag: {
-      type: String,
-      default: 'qas-box'
-    },
-
-    title: {
-      type: String,
-      default: '',
-      required: true
-    }
-  },
-
-  computed: {
-    directionClasses () {
-      return this.$qas.screen.untilMedium ? 'col' : 'row items-center'
-    },
-
-    userAvatarImage () {
-      return this.result.image
-    },
-
-    avatarSize () {
-      return this.$qas.screen.isSmall ? '145px' : '188px'
-    }
-  },
-
-  methods: {
-    filterObject
-  }
-}
-</script>
+<template>
+  <component :is="tag">
+    <div class="q-col-gutter-md row">
+      <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="avatarSize" :title="title" />
+          </div>
+          <slot>
+            <h6 class="text-bold text-h6">{{ title }}</h6>
+            <div v-if="subtitle">{{ subtitle }}</div>
+          </slot>
+        </div>
+      </div>
+      <slot name="grid">
+        <qas-grid-generator class="col-lg-7 col-xs-12 items-center" :columns="columns" :fields="filterObject(fields, list)" :result="result" :use-empty-result="false">
+          <template v-for="(_, name) in $slots" #[name]="context">
+            <slot :name="name" v-bind="context || {}" />
+          </template>
+        </qas-grid-generator>
+      </slot>
+    </div>
+  </component>
+</template>
+
+<script>
+import filterObject from '../../helpers/filter-object'
+
+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,
+    QasGridGenerator
+  },
+
+  props: {
+    columns: {
+      type: Object,
+      default: () => ({})
+    },
+
+    fields: {
+      type: Object,
+      default: () => ({})
+    },
+
+    list: {
+      type: Array,
+      default: () => []
+    },
+
+    result: {
+      type: Object,
+      default: () => ({})
+    },
+
+    subtitle: {
+      type: String,
+      default: ''
+    },
+
+    tag: {
+      type: String,
+      default: 'qas-box'
+    },
+
+    title: {
+      type: String,
+      default: '',
+      required: true
+    }
+  },
+
+  computed: {
+    directionClasses () {
+      return this.$qas.screen.untilMedium ? 'col' : 'row items-center'
+    },
+
+    userAvatarImage () {
+      return this.result.image
+    },
+
+    avatarSize () {
+      return this.$qas.screen.isSmall ? '145px' : '188px'
+    }
+  },
+
+  methods: {
+    filterObject
+  }
+}
+</script>

package/src/components/profile/QasProfile.yml

@@ -1,60 +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
-
-  tag:
-    desc: Tag do componente pai.
-    default: qas-box
-    type: String
-
-  title:
-    desc: Título do cabeçalho de perfil.
-    type: String
-    required: true
-
-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
+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
+
+  tag:
+    desc: Tag do componente pai.
+    default: qas-box
+    type: String
+
+  title:
+    desc: Título do cabeçalho de perfil.
+    type: String
+    required: true
+
+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/radio/QasRadio.vue

@@ -1,62 +1,62 @@
-<template>
-  <div>
-    <div v-if="canShowOptionGroupLabel" class="q-mb-sm text-body1">
-      {{ props.label }}
-    </div>
-
-    <component :is="component.is" v-bind="component.props" />
-  </div>
-</template>
-
-<script setup>
-import { computed, useAttrs } from 'vue'
-
-defineOptions({
-  name: 'QasRadio',
-  inheritAttrs: false
-})
-
-const props = defineProps({
-  label: {
-    default: '',
-    type: String
-  }
-})
-
-const attrs = useAttrs()
-
-const isOptionGroup = computed(() => !!attrs.options?.length)
-
-// Só mostra a label caso for q-option-group e tenha label vindo nas props
-const canShowOptionGroupLabel = computed(() => isOptionGroup.value && !!props.label)
-
-/**
- * - quando é um grupo de opções, o componente é 'QOptionGroup', caso contrário,
- * é 'QRadio'.
- * - a propriedade inline só é usada no caso do QOptionGroup.
- * - todos os casos é usado o dense.
- */
-const component = computed(() => {
-  const { inline = true, ...payloadProps } = attrs
-
-  return {
-    is: isOptionGroup.value ? 'q-option-group' : 'q-radio',
-
-    props: {
-      ...payloadProps,
-
-      label: props.label,
-
-      ...(isOptionGroup.value && {
-        inline,
-        class: {
-          'q-gutter-x-md': inline,
-          'q-gutter-y-md': !inline
-        }
-      }),
-
-      dense: true
-    }
-  }
-})
-</script>
+<template>
+  <div>
+    <div v-if="canShowOptionGroupLabel" class="q-mb-sm text-body1">
+      {{ props.label }}
+    </div>
+
+    <component :is="component.is" v-bind="component.props" />
+  </div>
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+
+defineOptions({
+  name: 'QasRadio',
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  label: {
+    default: '',
+    type: String
+  }
+})
+
+const attrs = useAttrs()
+
+const isOptionGroup = computed(() => !!attrs.options?.length)
+
+// Só mostra a label caso for q-option-group e tenha label vindo nas props
+const canShowOptionGroupLabel = computed(() => isOptionGroup.value && !!props.label)
+
+/**
+ * - quando é um grupo de opções, o componente é 'QOptionGroup', caso contrário,
+ * é 'QRadio'.
+ * - a propriedade inline só é usada no caso do QOptionGroup.
+ * - todos os casos é usado o dense.
+ */
+const component = computed(() => {
+  const { inline = true, ...payloadProps } = attrs
+
+  return {
+    is: isOptionGroup.value ? 'q-option-group' : 'q-radio',
+
+    props: {
+      ...payloadProps,
+
+      label: props.label,
+
+      ...(isOptionGroup.value && {
+        inline,
+        class: {
+          'q-gutter-x-md': inline,
+          'q-gutter-y-md': !inline
+        }
+      }),
+
+      dense: true
+    }
+  }
+})
+</script>

package/src/components/radio/QasRadio.yml

@@ -1,11 +1,11 @@
-type: component
-
-props:
-  label:
-    desc: Label utilizada em casos de ser q-option-group.
-    default: ''
-    type: String
-
-meta:
-  desc: Componente wrapper do QRadio.
-
+type: component
+
+props:
+  label:
+    desc: Label utilizada em casos de ser q-option-group.
+    default: ''
+    type: String
+
+meta:
+  desc: Componente wrapper do QRadio.
+