@bildvitta/quasar-ui-asteroid 3.17.0-beta.2 → 3.17.0-beta.3

package/package.json

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

package/src/components/grid-generator/QasGridGenerator.vue

@@ -1,31 +1,35 @@
 <template>
-  <div :class="classes">
-    <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClass({ key })">
-      <slot :field="field" :name="`field-${field.name}`">
-        <qas-grid-item :use-ellipsis="props.useEllipsis" :use-inline="props.useInline">
-          <template #header>
-            <slot :field="field" :name="`header-field-${field.name}`">
-              <slot :field="field" name="header">
-                <div :class="headerClass" :data-cy="`grid-generator-${field.name}-field`" :title="getTitle(field, 'label')">
-                  {{ field.label }}
-                </div>
+  <component :is="component.is" v-bind="component.props">
+    <qas-header v-if="hasHeader" v-bind="props.headerProps" />
+
+    <div :class="classes">
+      <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClass({ key })">
+        <slot :field="field" :name="`field-${field.name}`">
+          <qas-grid-item :use-ellipsis="props.useEllipsis" :use-inline="props.useInline">
+            <template #header>
+              <slot :field="field" :name="`header-field-${field.name}`">
+                <slot :field="field" name="header">
+                  <div :class="headerClass" :data-cy="`grid-generator-${field.name}-field`" :title="getTitle(field, 'label')">
+                    {{ field.label }}
+                  </div>
+                </slot>
               </slot>
-            </slot>
-          </template>
-
-          <template #content>
-            <slot :field="field" :name="`content-field-${field.name}`">
-              <slot :field="field" name="content">
-                <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
-                  {{ field.formattedResult }}
-                </div>
+            </template>
+
+            <template #content>
+              <slot :field="field" :name="`content-field-${field.name}`">
+                <slot :field="field" name="content">
+                  <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
+                    {{ field.formattedResult }}
+                  </div>
+                </slot>
               </slot>
-            </slot>
-          </template>
-        </qas-grid-item>
-      </slot>
+            </template>
+          </qas-grid-item>
+        </slot>
+      </div>
     </div>
-  </div>
+  </component>
 </template>
 
 <script setup>
@@ -44,6 +48,11 @@ const screen = useScreen()
 const props = defineProps({
   ...baseProps,
 
+  boxProps: {
+    type: Object,
+    default: () => ({})
+  },
+
   contentClass: {
     default: '',
     type: [Array, Object, String]
@@ -54,6 +63,11 @@ const props = defineProps({
     type: [Array, Object, String]
   },
 
+  headerProps: {
+    type: Object,
+    default: () => ({})
+  },
+
   emptyResultText: {
     default: '-',
     type: String
@@ -64,6 +78,10 @@ const props = defineProps({
     type: Object
   },
 
+  useBox: {
+    type: Boolean
+  },
+
   useEmptyResult: {
     default: true,
     type: Boolean
@@ -85,6 +103,7 @@ const { classes, getFieldClass } = useGenerator({ props })
 // computed
 const hasResult = computed(() => Object.keys(props.result).length)
 const hasFields = computed(() => Object.keys(props.fields).length)
+const hasHeader = computed(() => Object.keys(props.headerProps).length)
 
 const contentClass = computed(() => {
   return [
@@ -96,6 +115,13 @@ const contentClass = computed(() => {
   ]
 })
 
+const component = computed(() => {
+  return {
+    is: props.useBox ? 'qas-box' : 'div',
+    props: props.useBox ? props.boxProps : {}
+  }
+})
+
 const headerClass = computed(() => {
   return [
     props.headerClass,

package/src/components/grid-generator/QasGridGenerator.yml

@@ -4,6 +4,11 @@ meta:
   desc: Componente para criação de textos dinâmicos.
 
 props:
+  box-props:
+    desc: Propriedades do "QasBox" que envolve o conteúdo.
+    default: {}
+    type: Object
+
   columns:
     desc: Colunas do grid de cada campo.
     default: col-6
@@ -41,6 +46,11 @@ props:
     default: 'text-bold'
     type: [Array, Object, String]
 
+  header-props:
+    desc: Propriedades do "QasHeader".
+    default: {}
+    type: Object
+
   result:
     desc: Resultado contendo todas informações para serem exibidas na tela.
     default: {}
@@ -52,6 +62,11 @@ props:
     default: true
     type: Boolean
 
+  use-box:
+    desc: Controla se o componente vai ter o QasBox englobando ou não.
+    default: false
+    type: Boolean
+
   use-ellipsis:
     desc: Adiciona a classe "ellipsis" para o elemento do conteúdo.
     default: true