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

package/package.json

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

package/src/components/dialog/QasDialog.vue

@@ -45,7 +45,7 @@ import useDynamicComponents from './composables/use-dynamic-components'
 import useOk from './composables/use-ok'
 import { useScreen } from '../../composables'
 
-import { computed, ref, useAttrs, useSlots } from 'vue'
+import { computed, ref, useAttrs, useSlots, provide } from 'vue'
 import { useDialogPluginComponent } from 'quasar'
 
 defineOptions({ name: 'QasDialog' })
@@ -120,6 +120,8 @@ const emit = defineEmits([
   ...useDialogPluginComponent.emits
 ])
 
+provide('isDialog', true)
+
 const attrs = useAttrs()
 const screen = useScreen()
 const slots = useSlots()

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

@@ -2,20 +2,22 @@
   <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>
           <slot :fields="fieldsetItem.fields?.visible" :name="`legend-section-${fieldsetItemKey}`">
-            <div :class="classes">
-              <div v-for="(field, key) in fieldsetItem.fields.visible" :key="key" :class="getFieldClass({ index: key, fields: normalizedFields })">
-                <slot :field="field" :name="`field-${field.name}`">
-                  <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :error="props.errors[key]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
-                </slot>
+            <div class="items-end justify-end" :class="getRowContainerClasses(fieldsetItem)">
+              <div :class="fieldContainerClasses">
+                <div v-for="(field, key) in fieldsetItem.fields.visible" :key="key" :class="getFieldClass({ index: key, fields: normalizedFields })">
+                  <slot :field="field" :name="`field-${field.name}`">
+                    <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :error="props.errors[key]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
+                  </slot>
+                </div>
               </div>
+
+              <qas-btn v-if="hasButtonProps(fieldsetItem)" class="md:q-mt-none q-ml-md q-mt-md" v-bind="fieldsetItem.buttonProps" />
             </div>
 
             <div v-for="(field, key) in fieldsetItem.fields.hidden" :key="key">
@@ -34,6 +36,7 @@
 import { gutterValidator } from '../../helpers/private/gutter-validator'
 import useGenerator, { baseProps } from '../../composables/private/use-generator'
 import { Spacing } from '../../enums/Spacing'
+import { useScreen } from '../../composables'
 import { computed, provide, inject } from 'vue'
 
 defineOptions({ name: 'QasFormGenerator' })
@@ -94,7 +97,9 @@ provide('isFormGenerator', true)
 // composables
 const { classes, getFieldClass, getFieldSetColumnClass } = useGenerator({ props })
 
-const { fieldsetClasses, hasFieldset } = useFieldset({ props })
+const { fieldsetClasses, hasFieldset, hasFieldsetItem } = useFieldset({ props })
+
+const screen = useScreen()
 
 // constants
 const hasNestedFormGenerator = inject('isFormGenerator', false)
@@ -162,7 +167,9 @@ const normalizedFields = computed(() => {
       label: fieldsetItem.label,
       description: fieldsetItem.description,
       column: fieldsetItem.column,
-      fields: { hidden: {}, visible: {} }
+      buttonProps: fieldsetItem.buttonProps,
+      fields: { hidden: {}, visible: {} },
+      headerProps: fieldsetItem.headerProps
     }
 
     fieldsetItem.fields.forEach(fieldName => {
@@ -181,13 +188,31 @@ const normalizedFields = computed(() => {
   return fields
 })
 
+const fieldContainerClasses = computed(() => {
+  return [
+    ...classes.value,
+    {
+      col: !screen.isSmall
+    }
+  ]
+})
+
 // methods
 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 }) {
@@ -201,6 +226,14 @@ function updateModelValue ({ key, value }) {
   emit('update:modelValue', models)
 }
 
+function hasButtonProps ({ buttonProps = {} }) {
+  return !!Object.keys(buttonProps).length
+}
+
+function getRowContainerClasses (item) {
+  return { row: hasButtonProps(item) }
+}
+
 // composables
 function useFieldset ({ props }) {
   const fieldsetClasses = computed(() => {
@@ -215,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/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/search-input/QasSearchInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <qas-box class="qas-search-input" :use-spacing="false">
+  <component :is="component" class="qas-search-input" :class="containerClasses" :use-spacing="false">
     <qas-input ref="input" v-model="model" class="qas-search-input__input" v-bind="$attrs" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" inputmode="search" outlined type="search">
       <template #prepend>
         <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
@@ -13,13 +13,18 @@
         <slot name="after-clear" />
       </template>
     </qas-input>
-  </qas-box>
+  </component>
 </template>
 
 <script>
 export default {
   name: 'QasSearchInput',
 
+  inject: {
+    isBox: { default: false },
+    isDialog: { default: false }
+  },
+
   inheritAttrs: false,
 
   props: {
@@ -46,6 +51,20 @@ export default {
   ],
 
   computed: {
+    component () {
+      return this.isBoxOrDialog ? 'div' : 'qas-box'
+    },
+
+    containerClasses () {
+      return {
+        bordered: this.isBoxOrDialog
+      }
+    },
+
+    isBoxOrDialog () {
+      return this.isBox || this.isDialog
+    },
+
     debounce () {
       return this.useDebounce ? '1200' : ''
     },

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

package/src/components/select-list-dialog/QasSelectListDialog.vue

@@ -16,8 +16,9 @@
       {{ props.description }}
     </div>
 
-    <qas-box
-      v-if="hasBox"
+    <component
+      :is="containerListComponent"
+      v-if="canShowContainerList"
       class="q-mt-md relative-position"
     >
       <span class="text-grey-10 text-subtitle1">
@@ -42,7 +43,7 @@
           size="2em"
         />
       </q-inner-loading>
-    </qas-box>
+    </component>
 
     <span
       v-if="hasError"
@@ -76,7 +77,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch, useSlots } from 'vue'
+import { computed, ref, watch, useSlots, inject } from 'vue'
 
 defineOptions({ name: 'QasSelectListDialog' })
 
@@ -143,8 +144,11 @@ const emit = defineEmits(['add', 'remove', 'update:modelValue'])
 
 const slots = useSlots()
 
+const isBox = inject('isBox', false)
+
 const hasError = computed(() => Array.isArray(props.error) ? !!props.error.length : !!props.error)
 const errorMessage = computed(() => Array.isArray(props.error) ? props.error.join(' ') : props.error)
+const containerListComponent = computed(() => isBox ? 'div' : 'qas-box')
 
 const {
   listModel,
@@ -160,7 +164,7 @@ const {
 const {
   selectedOptions,
 
-  hasBox,
+  canShowContainerList,
 
   add,
   removeAll,
@@ -224,7 +228,10 @@ function useList () {
     filteredOptions.value = [...options]
   })
 
-  const hasBox = computed(() => hasFilteredOptions.value || props.loading)
+  /**
+   * Valida se tenho opções ou se está carregando para mostrar o container da listagem.
+   */
+  const canShowContainerList = computed(() => hasFilteredOptions.value || props.loading)
   const hasFilteredOptions = computed(() => model.value.length)
 
   /*
@@ -282,7 +289,7 @@ function useList () {
     filteredOptions,
     selectedOptions,
 
-    hasBox,
+    canShowContainerList,
     hasFilteredOptions,
 
     add,

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

@@ -1,5 +1,9 @@
 <template>
   <component :is="parentComponent.is">
+    <slot name="parent-header">
+      <qas-header v-if="hasHeaderProps" v-bind="headerProps" />
+    </slot>
+
     <q-table ref="table" class="bg-white qas-table-generator text-grey-8" v-bind="attributes">
       <template v-for="(_, name) in slots" #[name]="context">
         <slot :name="name" v-bind="context" />
@@ -41,6 +45,11 @@ export default {
       type: [Array, Object]
     },
 
+    headerProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     results: {
       default: () => [],
       required: true,
@@ -228,6 +237,10 @@ export default {
       return {
         is: this.useBox ? 'qas-box' : 'div'
       }
+    },
+
+    hasHeaderProps () {
+      return !!Object.keys(this.headerProps).length
     }
   },
 
@@ -320,8 +333,15 @@ export default {
 <style lang="scss">
 .qas-table-generator {
   .q-table {
+    thead tr {
+      height: 24px;
+    }
+
     th {
       @include set-typography($subtitle1);
+
+      border: 0 !important;
+      padding: 0 calc(var(--qas-spacing-lg) / 2);
     }
 
     td,
@@ -334,6 +354,10 @@ export default {
     td {
       @include set-typography($body1);
 
+      height: 40px;
+      padding-left: calc(var(--qas-spacing-lg) / 2);
+      padding-right: calc(var(--qas-spacing-lg) / 2);
+
       &:before {
         transition: background-color var(--qas-generic-transition);
       }
@@ -345,6 +369,10 @@ export default {
           background-color: var(--qas-background-color);
         }
       }
+
+      &:last-child td {
+        padding-bottom: 0;
+      }
     }
 
     thead tr:hover {

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

@@ -20,6 +20,12 @@ props:
     type: Object
     examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
 
+  header-props:
+    desc: Propriedades repassadas para o componente `QasHeader`.
+    default: {}
+    type: Object
+    examples: ["{ description: 'Descrição', labelProps: { label: 'Titulo do header'} }"]
+
   results:
     desc: Lista com resultados para serem mostrados na tabela.
     default: {}
@@ -70,6 +76,9 @@ slots:
         default: {}
         type: Object
 
+  parent-header:
+    desc: 'Acesso ao slot do header dentro container'
+
 events:
   '@row-click -> function(event, row, index)':
     desc: Dispara ao clicar em uma linha. Não funciona usando slots personalizados (body, row e item).

package/src/css/utils/border.scss

@@ -35,3 +35,8 @@
 .border-right {
   border-right-width: 1px !important;
 }
+
+.bordered {
+  border: 1px solid $grey-4;
+  border-radius: $generic-border-radius;
+}