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

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.1",
   "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

@@ -10,12 +10,16 @@
 
         <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 +38,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' })
@@ -96,6 +101,8 @@ const { classes, getFieldClass, getFieldSetColumnClass } = useGenerator({ props
 
 const { fieldsetClasses, hasFieldset } = useFieldset({ props })
 
+const screen = useScreen()
+
 // constants
 const hasNestedFormGenerator = inject('isFormGenerator', false)
 
@@ -162,6 +169,7 @@ const normalizedFields = computed(() => {
       label: fieldsetItem.label,
       description: fieldsetItem.description,
       column: fieldsetItem.column,
+      buttonProps: fieldsetItem.buttonProps,
       fields: { hidden: {}, visible: {} }
     }
 
@@ -181,6 +189,15 @@ const normalizedFields = computed(() => {
   return fields
 })
 
+const fieldContainerClasses = computed(() => {
+  return [
+    ...classes.value,
+    {
+      col: !screen.isSmall
+    }
+  ]
+})
+
 // methods
 function getFieldType ({ type }) {
   return type === 'hidden' ? 'hidden' : 'visible'
@@ -201,6 +218,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(() => {

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-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;
+}