@bildvitta/quasar-ui-asteroid 3.17.0-beta.14 → 3.17.0-beta.16

package/package.json

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

package/src/components/avatar/QasAvatar.vue

@@ -19,12 +19,7 @@ defineOptions({
 const props = defineProps({
   color: {
     type: String,
-    default: AvatarColors.Primary,
-    validator: value => {
-      const availableColors = Object.values(AvatarColors)
-
-      return availableColors.includes(value)
-    }
+    default: AvatarColors.Primary
   },
 
   size: {
@@ -42,6 +37,11 @@ const props = defineProps({
     type: String
   },
 
+  textColor: {
+    default: '',
+    type: String
+  },
+
   title: {
     default: '',
     type: String
@@ -62,7 +62,6 @@ const attributes = computed(() => {
     rounded,
     square,
     fontSize,
-    textColor,
     ...attributes
   } = attrs
 
@@ -76,7 +75,7 @@ const attributes = computed(() => {
   return {
     size: props.size,
     color: props.color,
-    textColor: colors[props.color],
+    textColor: colors[props.color] || props.textColor,
     ...attributes
   }
 })

package/src/components/chart-view/QasChartView.vue

@@ -350,7 +350,7 @@ export default {
     this.handleFetchData()
   },
 
-  unmounted () {
+  beforeUnmount () {
     this.unregisterChartJS()
   },
 

package/src/components/checkbox/QasCheckbox.vue

@@ -1,21 +1,27 @@
 <template>
   <div>
     <!-- Single -->
-    <q-checkbox v-if="isSingle" v-model="model" v-bind="attrs" dense>
+    <q-checkbox v-if="isSingle" v-model="model" v-bind="singleAttributes" dense>
       <slot />
     </q-checkbox>
 
     <!-- Group -->
-    <div v-else :class="classes">
-      <div v-for="(option, index) in props.options" :key="index">
-        <!-- Com children -->
-        <q-checkbox v-if="hasChildren(option)" :class="getCheckboxClass(option)" dense :label="option.label" :model-value="getModelValue(index)" @update:model-value="updateCheckbox($event, option, index)" />
+    <div v-else>
+      <div v-if="hasCheckboxLabel" class="q-mb-sm text-body1">
+        {{ props.label }}
+      </div>
+
+      <div :class="classes">
+        <div v-for="(option, index) in props.options" :key="index">
+          <!-- Com children -->
+          <q-checkbox v-if="hasChildren(option)" :class="getCheckboxClass(option)" dense :label="option.label" :model-value="getModelValue(index)" @update:model-value="updateCheckbox($event, option, index)" />
 
-        <!-- Com children -->
-        <q-option-group v-if="hasChildren(option)" class="q-ml-xs q-mt-xs" dense :inline="props.inline" :model-value="props.modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
+          <!-- Com children -->
+          <q-option-group v-if="hasChildren(option)" class="q-ml-xs q-mt-xs" dense :inline="props.inline" :model-value="props.modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
 
-        <!-- Sem children -->
-        <q-option-group v-else v-model="model" v-bind="attrs" dense :options="[option]" type="checkbox" />
+          <!-- Sem children -->
+          <q-option-group v-else v-model="model" v-bind="attrs" dense :options="[option]" type="checkbox" />
+        </div>
       </div>
     </div>
   </div>
@@ -30,6 +36,11 @@ defineOptions({
 })
 
 const props = defineProps({
+  label: {
+    default: '',
+    type: String
+  },
+
   options: {
     default: () => [],
     type: Array
@@ -59,6 +70,8 @@ onMounted(handleParent)
 // computed
 const classes = computed(() => props.inline && 'flex q-gutter-x-sm')
 
+const hasCheckboxLabel = computed(() => !!props.label)
+
 const model = computed({
   get () {
     return props.modelValue
@@ -71,6 +84,14 @@ const model = computed({
 
 const isSingle = computed(() => !props.options.length)
 
+const singleAttributes = computed(() => {
+  return {
+    ...attrs,
+
+    label: props.label
+  }
+})
+
 // watch
 watch(() => props.options, handleParent)
 

package/src/components/checkbox/QasCheckbox.yml

@@ -9,6 +9,11 @@ props:
     default: true
     type: Boolean
 
+  label:
+    desc: Label utilizada em casos de ser checkbox-group.
+    default: ''
+    type: String
+
   model-value:
     desc: Model do componente, usado para v-model.
     default: []

package/src/components/copy/QasCopy.vue

@@ -1,6 +1,6 @@
 <template>
   <span>
-    <slot>{{ props.text }}</slot>
+    <slot v-if="props.useText">{{ props.text }}</slot>
 
     <qas-btn class="q-ml-xs" color="primary" :icon="props.icon" :loading="isLoading" variant="tertiary" @click.stop.prevent="copy">
       <q-tooltip>Copiar</q-tooltip>
@@ -23,6 +23,11 @@ const props = defineProps({
   text: {
     required: true,
     type: String
+  },
+
+  useText: {
+    type: Boolean,
+    default: true
   }
 })
 

package/src/components/copy/QasCopy.yml

@@ -13,3 +13,8 @@ props:
     desc: Texto a ser copiado.
     type: String
 
+  use-text:
+    desc: Controla se o texto será exibo ao lado do botão ou não.
+    type: Boolean
+    default: true
+

package/src/components/expansion-item/QasExpansionItem.vue

@@ -83,6 +83,11 @@ const props = defineProps({
     default: ''
   },
 
+  gridGeneratorProps: {
+    type: Object,
+    default: () => ({})
+  },
+
   group: {
     type: String,
     default: undefined
@@ -93,9 +98,9 @@ const props = defineProps({
     default: ''
   },
 
-  gridGeneratorProps: {
-    type: Object,
-    default: () => ({})
+  maxContentHeight: {
+    type: String,
+    default: ''
   },
 
   useHeaderSeparator: {
@@ -156,7 +161,8 @@ const classes = computed(() => {
 const contentClasses = computed(() => {
   return {
     'q-mt-sm': isNestedExpansionItem,
-    'q-mt-md': !isNestedExpansionItem && !props.useHeaderSeparator
+    'q-mt-md': !isNestedExpansionItem && !props.useHeaderSeparator,
+    'qas-expansion-item__content overflow-auto': !!props.maxContentHeight
   }
 })
 
@@ -250,6 +256,10 @@ function setHasNextSibling (value) {
     }
   }
 
+  &__content {
+    max-height: v-bind("props.maxContentHeight");
+  }
+
   // em alguns casos quando usado com grid, o espaçamento afetava o header, com z-index o problema é resolvido
   &__header {
     position: relative;

package/src/components/expansion-item/QasExpansionItem.yml

@@ -40,6 +40,11 @@ props:
     default: false
     type: Boolean
 
+  max-content-height:
+    desc: Define um tamanho máximo de altura do conteúdo.
+    default: ''
+    type: String
+
   grid-generator-props:
     desc: Propriedades que serão repassadas para o QasGridGenerator.
     type: Object

package/src/components/radio/QasRadio.vue

@@ -1,5 +1,11 @@
 <template>
-  <component :is="component.is" v-bind="component.props" />
+  <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>
@@ -10,8 +16,20 @@ defineOptions({
   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'.
@@ -19,16 +37,17 @@ const attrs = useAttrs()
  * - todos os casos é usado o dense.
  */
 const component = computed(() => {
-  const isOptionGroup = !!attrs.options?.length
-
   const { inline = true, ...payloadProps } = attrs
 
   return {
-    is: isOptionGroup ? 'q-option-group' : 'q-radio',
+    is: isOptionGroup.value ? 'q-option-group' : 'q-radio',
+
     props: {
       ...payloadProps,
 
-      ...(isOptionGroup && {
+      label: props.label,
+
+      ...(isOptionGroup.value && {
         inline,
         class: {
           'q-gutter-x-md': inline,

package/src/components/radio/QasRadio.yml

@@ -1,5 +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.
 

package/src/components/table-generator/QasTableGenerator.vue

@@ -138,6 +138,9 @@ export default {
 
     attributes () {
       const attributes = {
+        tableClass: {
+          'overflow-hidden-y': !this.useStickyHeader
+        },
         class: this.tableClass,
         columns: this.columnsByFields,
         flat: true,

package/src/helpers/set-scroll-on-grab.js

@@ -50,7 +50,7 @@ export default function (element, options = {}, cancelMouseDownTarget) {
     /**
      * closest busca ancestral mais próximo de um elemento, ou seja, verifica se no event que recebo, tenho a classe no qual nao se deve aplicar o grab.
      */
-    const targetElement = event.target.closest(`.${cancelMouseDownTarget}`)
+    const targetElement = cancelMouseDownTarget ? event.target.closest(`.${cancelMouseDownTarget}`) : null
 
     if (!!cancelMouseDownTarget && !!targetElement) return null