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

package/package.json

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

package/src/components/form-generator/QasFormGenerator.vue

@@ -2,10 +2,8 @@
   <div :class="fieldsetClasses">
     <div v-for="(fieldsetItem, fieldsetItemKey) in normalizedFields" :key="fieldsetItemKey" :class="getFieldSetColumnClass(fieldsetItem.column)">
       <component :is="containerComponent.is" v-bind="containerComponent.props">
-        <slot v-if="fieldsetItem.label" :name="`legend-${fieldsetItemKey}`">
-          <qas-label :label="fieldsetItem.label" :margin="getLabelMargin(fieldsetItem)" />
-
-          <div v-if="fieldsetItem.description" class="q-mb-md text-body1 text-grey-8">{{ fieldsetItem.description }}</div>
+        <slot v-if="hasFieldsetItem(fieldsetItem)" :name="`legend-${fieldsetItemKey}`">
+          <qas-header v-bind="getHeaderProps(fieldsetItem)" />
         </slot>
 
         <div>
@@ -99,7 +97,7 @@ provide('isFormGenerator', true)
 // composables
 const { classes, getFieldClass, getFieldSetColumnClass } = useGenerator({ props })
 
-const { fieldsetClasses, hasFieldset } = useFieldset({ props })
+const { fieldsetClasses, hasFieldset, hasFieldsetItem } = useFieldset({ props })
 
 const screen = useScreen()
 
@@ -170,7 +168,8 @@ const normalizedFields = computed(() => {
       description: fieldsetItem.description,
       column: fieldsetItem.column,
       buttonProps: fieldsetItem.buttonProps,
-      fields: { hidden: {}, visible: {} }
+      fields: { hidden: {}, visible: {} },
+      headerProps: fieldsetItem.headerProps
     }
 
     fieldsetItem.fields.forEach(fieldName => {
@@ -203,8 +202,17 @@ function getFieldType ({ type }) {
   return type === 'hidden' ? 'hidden' : 'visible'
 }
 
-function getLabelMargin (fieldsetItem) {
-  return fieldsetItem.description ? 'sm' : 'md'
+function getHeaderProps (fieldsetItem) {
+  return {
+    description: fieldsetItem.description,
+
+    labelProps: {
+      ...fieldsetItem.headerProps?.labelProps,
+      ...(fieldsetItem.label && { label: fieldsetItem.label })
+    },
+
+    ...fieldsetItem.headerProps
+  }
 }
 
 function isFieldDisabled ({ disable }) {
@@ -240,9 +248,15 @@ function useFieldset ({ props }) {
 
   const hasFieldset = computed(() => !!Object.keys(props.fieldset).length)
 
+  function hasFieldsetItem (fieldset = {}) {
+    return !!Object.keys(fieldset).length
+  }
+
   return {
     fieldsetClasses,
-    hasFieldset
+    hasFieldset,
+
+    hasFieldsetItem
   }
 }
 </script>

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

package/src/components/header/QasHeader.vue

@@ -3,7 +3,7 @@
     <div v-if="hasLabelSection" class="items-center justify-between no-wrap row" :class="labelSectionClasses">
       <div class="items-center q-col-gutter-sm row">
         <slot name="label">
-          <qas-label v-bind="defaultLabelProps" />
+          <qas-label v-if="hasLabel" v-bind="defaultLabelProps" />
         </slot>
 
         <div v-if="hasBadges" class="col-auto items-center q-col-gutter-sm row">
@@ -73,7 +73,7 @@ const props = defineProps({
   },
 
   spacing: {
-    default: Spacing.Xl,
+    default: Spacing.Md,
     type: String,
     validator: gutterValidator
   }
@@ -102,5 +102,5 @@ const hasLabel = computed(() => !!Object.keys(props.labelProps).length)
 const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)
 const hasDefaultActionsMenu = computed(() => !!Object.keys(props.actionsMenuProps).length)
 const hasDescriptionSection = computed(() => props.description || slots.description)
-const hasLabelSection = computed(() => hasLabel.value || slots.label)
+const hasLabelSection = computed(() => hasLabel.value || slots.label || hasBadges.value)
 </script>

package/src/components/select/QasSelect.vue

@@ -79,6 +79,10 @@ export default {
       type: Boolean
     },
 
+    useAutoSelect: {
+      type: Boolean
+    },
+
     useFetchOptionsOnCreate: {
       default: true,
       type: Boolean
@@ -187,6 +191,10 @@ export default {
       return getRequiredLabel({ label: this.label, required: this.required })
     },
 
+    canSetDefaultOption () {
+      return (this.required || this.useAutoSelect) && this.options.length === 1 && !this.modelValue
+    },
+
     // redesign
     componentClasses () {
       return {
@@ -220,15 +228,24 @@ export default {
       this.togglePopupContentClass(value)
     },
 
+    required () {
+      if (!this.canSetDefaultOption) return
+
+      this.setDefaultOption()
+    },
+
     options: {
       handler () {
         if (this.useLazyLoading && this.mx_hasFilteredOptions) return
 
         if (this.fuse || this.hasFuse) this.setFuse()
 
+        if (this.canSetDefaultOption) this.setDefaultOption()
+
         this.mx_filteredOptions = [...this.options]
       },
 
+      deep: true,
       immediate: true
     }
   },
@@ -303,6 +320,14 @@ export default {
       if (popupContentElement) {
         popupContentElement.classList.toggle('qas-select__is-fetching', force)
       }
+    },
+
+    setDefaultOption () {
+      const modelValue = this.attributes.emitValue
+        ? this.options[0].value
+        : this.options[0]
+
+      this.$emit('update:modelValue', modelValue)
     }
   }
 }

package/src/components/select/QasSelect.yml

@@ -81,6 +81,10 @@ props:
     type: String
     examples: [value-key="uuid"]
 
+  use-auto-select:
+    desc: Controla se o select vai auto preencher em casos de ter uma única opção e não for required.
+    type: Boolean
+
   use-fetch-options-on-create:
     desc: Controla se o componente vai fazer um fetch das opções assim que o mesmo é criado (caso tenha lazy loading ativado).
     default: true