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

package/src/components/avatar/QasAvatar.vue

@@ -1,95 +1,95 @@
-<template>
-  <q-avatar class="text-bold" v-bind="attributes">
-    <q-img v-if="hasImage" :alt="props.title" :ratio="1" spinner-color="primary" spinner-size="16px" :src="props.image" @error="onImageLoadedError" />
-    <template v-else-if="hasTitle">{{ label }}</template>
-    <q-icon v-else :name="props.icon" />
-  </q-avatar>
-</template>
-
-<script setup>
-import { AvatarColors } from './enums/AvatarColors'
-
-import { ref, computed, watch, useAttrs } from 'vue'
-
-defineOptions({
-  name: 'QasAvatar',
-  inheritAttrs: false
-})
-
-const props = defineProps({
-  color: {
-    type: String,
-    default: AvatarColors.Primary
-  },
-
-  size: {
-    type: String,
-    default: ''
-  },
-
-  icon: {
-    default: 'sym_r_error',
-    type: String
-  },
-
-  image: {
-    default: '',
-    type: String
-  },
-
-  textColor: {
-    default: '',
-    type: String
-  },
-
-  title: {
-    default: '',
-    type: String
-  },
-
-  useCropTitle: {
-    type: Boolean,
-    default: true
-  }
-})
-
-const attrs = useAttrs()
-
-const hasImageError = ref(false)
-
-const attributes = computed(() => {
-  const {
-    rounded,
-    square,
-    fontSize,
-    ...attributes
-  } = attrs
-
-  const colors = {
-    [AvatarColors.Primary]: 'white',
-    [AvatarColors.SecondaryContrast]: 'primary',
-    [AvatarColors.Grey4]: 'grey-8',
-    [AvatarColors.Red14]: 'white'
-  }
-
-  return {
-    size: props.size,
-    color: props.color,
-    textColor: colors[props.color] || props.textColor,
-    ...attributes
-  }
-})
-
-const label = computed(() => props.useCropTitle ? props.title[0]?.toUpperCase?.() : props.title)
-
-const hasImage = computed(() => !hasImageError.value && !!props.image)
-const hasTitle = computed(() => !!props.title)
-
-watch(() => props.image, () => {
-  hasImageError.value = false
-})
-
-function onImageLoadedError () {
-  hasImageError.value = true
-}
-</script>
+<template>
+  <q-avatar class="text-bold" v-bind="attributes">
+    <q-img v-if="hasImage" :alt="props.title" :ratio="1" spinner-color="primary" spinner-size="16px" :src="props.image" @error="onImageLoadedError" />
+    <template v-else-if="hasTitle">{{ label }}</template>
+    <q-icon v-else :name="props.icon" />
+  </q-avatar>
+</template>
+
+<script setup>
+import { AvatarColors } from './enums/AvatarColors'
+
+import { ref, computed, watch, useAttrs } from 'vue'
+
+defineOptions({
+  name: 'QasAvatar',
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: AvatarColors.Primary
+  },
+
+  size: {
+    type: String,
+    default: ''
+  },
+
+  icon: {
+    default: 'sym_r_error',
+    type: String
+  },
+
+  image: {
+    default: '',
+    type: String
+  },
+
+  textColor: {
+    default: '',
+    type: String
+  },
+
+  title: {
+    default: '',
+    type: String
+  },
+
+  useCropTitle: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const attrs = useAttrs()
+
+const hasImageError = ref(false)
+
+const attributes = computed(() => {
+  const {
+    rounded,
+    square,
+    fontSize,
+    ...attributes
+  } = attrs
+
+  const colors = {
+    [AvatarColors.Primary]: 'white',
+    [AvatarColors.SecondaryContrast]: 'primary',
+    [AvatarColors.Grey4]: 'grey-8',
+    [AvatarColors.Red14]: 'white'
+  }
+
+  return {
+    size: props.size,
+    color: props.color,
+    textColor: colors[props.color] || props.textColor,
+    ...attributes
+  }
+})
+
+const label = computed(() => props.useCropTitle ? props.title[0]?.toUpperCase?.() : props.title)
+
+const hasImage = computed(() => !hasImageError.value && !!props.image)
+const hasTitle = computed(() => !!props.title)
+
+watch(() => props.image, () => {
+  hasImageError.value = false
+})
+
+function onImageLoadedError () {
+  hasImageError.value = true
+}
+</script>

package/src/components/avatar/QasAvatar.yml

@@ -1,38 +1,38 @@
-type: component
-
-mixins:
-  - quasar/dist/api/QAvatar.json
-
-meta:
-  desc: Cria um elemento escalável e colorido que pode ter texto, ícone ou imagem em sua forma. Usa como base o componente [QAvatar](https://quasar.dev/vue-components/avatar#introduction).
-
-props:
-  color:
-    desc: Cor de fundo (background-color).
-    type: String
-    examples: ['primary', 'secondary-contrast', 'grey-4', 'red-14']
-
-  size:
-    desc: Tamanho do avatar.
-    type: String
-
-  icon:
-    desc: Ícone de fundo do avatar que vai aparecer caso não tenha imagem nem título.
-    default: sym_r_error
-    type: String
-
-  image:
-    desc: Imagem de fundo (maior prioridade).
-    type: String
-
-  text-color:
-    desc: Cor de texto (caso não tenha imagem).
-    default: primary
-    type: String
-
-  title:
-    desc: Caso não tenha imagem, o avatar vai aparecer com a inicial do titulo.
-    type: String
-    examples: [
-      'John Doe'
-    ]
+type: component
+
+mixins:
+  - quasar/dist/api/QAvatar.json
+
+meta:
+  desc: Cria um elemento escalável e colorido que pode ter texto, ícone ou imagem em sua forma. Usa como base o componente [QAvatar](https://quasar.dev/vue-components/avatar#introduction).
+
+props:
+  color:
+    desc: Cor de fundo (background-color).
+    type: String
+    examples: ['primary', 'secondary-contrast', 'grey-4', 'red-14']
+
+  size:
+    desc: Tamanho do avatar.
+    type: String
+
+  icon:
+    desc: Ícone de fundo do avatar que vai aparecer caso não tenha imagem nem título.
+    default: sym_r_error
+    type: String
+
+  image:
+    desc: Imagem de fundo (maior prioridade).
+    type: String
+
+  text-color:
+    desc: Cor de texto (caso não tenha imagem).
+    default: primary
+    type: String
+
+  title:
+    desc: Caso não tenha imagem, o avatar vai aparecer com a inicial do titulo.
+    type: String
+    examples: [
+      'John Doe'
+    ]

package/src/components/avatar/enums/AvatarColors.js

@@ -1,10 +1,10 @@
-/**
- * Para utilizar este enum dentro do defineProps, é necessário externalizar e importar
- * ou definir este enum em outro "<script>" fora do "<script setup>".
- */
-export const AvatarColors = {
-  Primary: 'primary',
-  SecondaryContrast: 'secondary-contrast',
-  Grey4: 'grey-4',
-  Red14: 'red-14'
-}
+/**
+ * Para utilizar este enum dentro do defineProps, é necessário externalizar e importar
+ * ou definir este enum em outro "<script>" fora do "<script setup>".
+ */
+export const AvatarColors = {
+  Primary: 'primary',
+  SecondaryContrast: 'secondary-contrast',
+  Grey4: 'grey-4',
+  Red14: 'red-14'
+}

package/src/components/badge/QasBadge.vue

@@ -1,87 +1,87 @@
-<template>
-  <component :is="component.is" v-bind="component.props" class="q-px-sm qas-badge text-caption">
-    <slot />
-  </component>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-defineOptions({
-  name: 'QasBadge',
-  inheritAttrs: false
-})
-
-const props = defineProps({
-  color: {
-    type: String,
-    default: 'light-blue-2'
-  },
-
-  label: {
-    type: String,
-    default: ''
-  },
-
-  multiLine: {
-    type: Boolean
-  },
-
-  textColor: {
-    type: String,
-    default: 'black'
-  },
-
-  removable: {
-    type: Boolean
-  },
-
-  tabindex: {
-    type: [String, Number],
-    default: undefined
-  }
-})
-
-const emit = defineEmits(['remove'])
-const model = defineModel({ type: Boolean, default: true })
-
-const component = computed(() => {
-  const isChip = props.removable
-
-  return {
-    is: isChip ? 'q-chip' : 'q-badge',
-    props: {
-      // comum
-      color: props.color,
-      dense: true,
-      textColor: props.textColor,
-      label: props.label,
-
-      // somente QChip
-      ...(isChip && {
-        iconRemove: 'sym_r_close',
-        removable: true,
-        square: true,
-        tabindex: props.tabindex,
-        modelValue: model.value,
-        ripple: false,
-        onRemove: () => emit('remove')
-      }),
-
-      // somente QBadge
-      ...(!isChip && {
-        multiLine: props.multiLine,
-        ariaMultiline: props.multiLine
-      })
-    }
-  }
-})
-</script>
-
-<style lang="scss">
-.qas-badge {
-  min-height: 20px;
-  padding-bottom: 2px;
-  padding-top: 2px;
-}
-</style>
+<template>
+  <component :is="component.is" v-bind="component.props" class="q-px-sm qas-badge text-caption">
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({
+  name: 'QasBadge',
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'light-blue-2'
+  },
+
+  label: {
+    type: String,
+    default: ''
+  },
+
+  multiLine: {
+    type: Boolean
+  },
+
+  textColor: {
+    type: String,
+    default: 'black'
+  },
+
+  removable: {
+    type: Boolean
+  },
+
+  tabindex: {
+    type: [String, Number],
+    default: undefined
+  }
+})
+
+const emit = defineEmits(['remove'])
+const model = defineModel({ type: Boolean, default: true })
+
+const component = computed(() => {
+  const isChip = props.removable
+
+  return {
+    is: isChip ? 'q-chip' : 'q-badge',
+    props: {
+      // comum
+      color: props.color,
+      dense: true,
+      textColor: props.textColor,
+      label: props.label,
+
+      // somente QChip
+      ...(isChip && {
+        iconRemove: 'sym_r_close',
+        removable: true,
+        square: true,
+        tabindex: props.tabindex,
+        modelValue: model.value,
+        ripple: false,
+        onRemove: () => emit('remove')
+      }),
+
+      // somente QBadge
+      ...(!isChip && {
+        multiLine: props.multiLine,
+        ariaMultiline: props.multiLine
+      })
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.qas-badge {
+  min-height: 20px;
+  padding-bottom: 2px;
+  padding-top: 2px;
+}
+</style>

package/src/components/badge/QasBadge.yml

@@ -1,55 +1,55 @@
-type: component
-
-meta:
-  desc: Componente wrapper do QBadge/QChip do quasar.
-
-props:
-  color:
-    desc: Cor da badge.
-    default: light-blue-2
-    type: String
-
-  label:
-    desc: Texto do badge.
-    type: String
-
-  multi-line:
-    desc: Habilita o texto a quebrar.
-    default: false
-    type: Boolean
-
-  text-color:
-    desc: Cor do texto.
-    default: black
-    type: String
-
-  removable:
-    desc: Transforma componente em QChip.
-    default: false
-    type: Boolean
-
-  tabindex:
-    desc: Usado para "foco" (usar junto a propriedade "removable").
-    default: undefined
-    type: [String, Number]
-
-  model-value:
-    desc: Model do componente (usar junto a propriedade "removable").
-    default: true
-    type: Boolean
-
-slots:
-  default:
-    desc: Slot do conteúdo do badge/chip.
-
-events:
-  '@remove -> function()':
-    desc: Evento emitido ao clicar no botão de remoção.
-
-  '@update:model-value -> function(value)':
-    desc: Dispara quando o model-value altera, também usado para v-model.
-    params:
-      value:
-        desc: Novo valor do model.
-        type: Boolean
-
+type: component
+
+meta:
+  desc: Componente wrapper do QBadge/QChip do quasar.
+
+props:
+  color:
+    desc: Cor da badge.
+    default: light-blue-2
+    type: String
+
+  label:
+    desc: Texto do badge.
+    type: String
+
+  multi-line:
+    desc: Habilita o texto a quebrar.
+    default: false
+    type: Boolean
+
+  text-color:
+    desc: Cor do texto.
+    default: black
+    type: String
+
+  removable:
+    desc: Transforma componente em QChip.
+    default: false
+    type: Boolean
+
+  tabindex:
+    desc: Usado para "foco" (usar junto a propriedade "removable").
+    default: undefined
+    type: [String, Number]
+
+  model-value:
+    desc: Model do componente (usar junto a propriedade "removable").
+    default: true
+    type: Boolean
+
+slots:
+  default:
+    desc: Slot do conteúdo do badge/chip.
+
+events:
+  '@remove -> function()':
+    desc: Evento emitido ao clicar no botão de remoção.
+
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        type: Boolean
+