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

package/src/components/nested-fields/QasNestedFields.vue

@@ -2,24 +2,20 @@
   <div :id="fieldName" class="qas-nested-fields" :data-cy="`nested-fields-${fieldName}`">
     <component :is="containerComponent">
       <div v-if="useSingleLabel" class="text-left">
-        <qas-label :label="fieldLabel" typography="h5" />
+        <qas-label :label="fieldLabel" />
       </div>
 
       <div ref="inputContent">
         <component :is="componentTag" v-bind="componentProps">
           <template v-for="(row, index) in nested" :key="`row-${index}`">
             <div v-if="!row[destroyKey]" :id="`row-${index}`" class="full-width qas-nested-fields__field-item" data-cy="nested-fields-item">
-              <header v-if="hasHeader" class="flex items-center q-pb-md" :class="headerClasses">
-                <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" margin="none" typography="h5" />
-
-                <qas-actions-menu v-if="hasBlockActions(row)" v-bind="getActionsMenuProps(index, row)" :use-label="false" />
-              </header>
+              <qas-header v-if="hasHeader({ row })" class="flex" v-bind="getHeaderProps({ index, row })" />
 
               <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" :model="nested[index]" name="before-fields" :update-value="updateValuesFromInput" />
 
-              <div ref="formGenerator" class="col-12 justify-between q-col-gutter-x-md row">
+              <div ref="formGenerator" :class="formGeneratorParentClasses">
                 <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" name="fields" :update-value="updateValuesFromInput">
-                  <qas-form-generator v-model="nested[index]" class="col" :columns="formColumns" :disable="isDisabledRow(row)" :errors="transformedErrors[index]" :fields="getFields(index, row)" :fields-props="getFieldsProps(index, row)" :gutter="formGutter" @update:model-value="updateValuesFromInput($event, index)">
+                  <qas-form-generator v-model="nested[index]" class="col" :columns="formColumns" :common-columns="formCommonColumns" :disable="isDisabledRow(row)" :errors="transformedErrors[index]" :fields="getFields(index, row)" :fields-props="getFieldsProps(index, row)" :gutter="formGutter" @update:model-value="updateValuesFromInput($event, index)">
                     <template v-for="(slot, key) in $slots" #[key]="scope">
                       <slot v-bind="scope" :disabled="isDisabledRow(row)" :errors="transformedErrors" :index="index" :name="key" />
                     </template>
@@ -27,7 +23,7 @@
                 </slot>
 
                 <div v-if="hasInlineActions(row)" class="flex items-center qas-nested-fields__actions">
-                  <qas-actions-menu v-bind="getActionsMenuProps(index, row)" :use-label="false" />
+                  <qas-actions-menu v-bind="getInlineActionsMenuProps(index, row)" :use-label="false" />
                 </div>
               </div>
 
@@ -36,7 +32,7 @@
           </template>
         </component>
 
-        <div v-if="useAdd">
+        <div v-if="useAdd" :class="addButtonClass">
           <slot :add="add" name="add-input">
             <div v-if="showAddFirstInputButton" class="text-left">
               <qas-btn class="q-px-sm" color="primary" data-cy="nested-fields-add-btn" :label="addFirstInputLabel" variant="tertiary" @click="add()" />
@@ -70,7 +66,7 @@ import QasInput from '../input/QasInput.vue'
 import QasLabel from '../label/QasLabel.vue'
 
 import { constructObject } from '../../helpers'
-import { Spacing } from '../../enums/Spacing'
+import { Spacing, SpacingWithNumber } from '../../enums/Spacing'
 
 import { TransitionGroup } from 'vue'
 import debug from 'debug'
@@ -167,12 +163,22 @@ export default {
       default: () => []
     },
 
+    formCommonColumns: {
+      type: [Object, String],
+      default: () => ({})
+    },
+
     formGutter: {
-      default: Spacing.Lg,
+      default: Spacing.Md,
       type: [String, Boolean],
       validator: value => typeof value === 'boolean' || Object.values(Spacing).includes(value)
     },
 
+    headerProps: {
+      type: Function,
+      default: () => {}
+    },
+
     identifierItemKey: {
       type: String,
       default: 'uuid'
@@ -296,15 +302,14 @@ export default {
       return this.useFirstInputButton && !this.nested.length
     },
 
-    hasHeader () {
-      return (this.useSingleLabel && !this.useInlineActions) || !this.useSingleLabel
-    },
-
-    headerClasses () {
+    addButtonClass () {
       return {
-        'justify-end': this.useSingleLabel,
-        'justify-between': !this.useSingleLabel
+        'q-mt-md': !!this.nested.length
       }
+    },
+
+    formGeneratorParentClasses () {
+      return this.useInlineActions ? 'col-12 justify-between q-col-gutter-x-md row' : 'full-width'
     }
   },
 
@@ -333,8 +338,8 @@ export default {
   },
 
   methods: {
-    getActionsMenuProps (index, row) {
-      if (typeof this.actionsMenuProps === 'function') {
+    getInlineActionsMenuProps (index, row) {
+      if (typeof this.actionsMenuProps === 'function' && this.useInlineActions) {
         return this.actionsMenuProps({
           index,
           row,
@@ -344,7 +349,7 @@ export default {
 
       return {
         ...this.actionsMenuProps,
-        list: this.getActionsMenuList(index, row)
+        list: this.getActionsMenuList(index, row, this.actionsMenuProps?.list)
       }
     },
 
@@ -368,11 +373,11 @@ export default {
       return list
     },
 
-    getActionsMenuList (index, row) {
+    getActionsMenuList (index, row, defaultList = {}) {
       const list = this.getDefaultActionsMenuList(index, row)
 
-      for (const key in this.actionsMenuProps.list) {
-        const { handler, ...content } = this.actionsMenuProps.list[key] || {}
+      for (const key in defaultList) {
+        const { handler, ...content } = defaultList[key] || {}
 
         list[key] = {
           handler: payload => handler?.({ payload, row, index }),
@@ -456,14 +461,32 @@ export default {
 
     setScroll () {
       const elements = this.$refs.inputContent.children
+
+      // elemento de ação, e não das linhas (rows) de inputs
       const element = elements[elements.length - 1]
+
+      // ultima linha (rows) de inputs
+      const rowsElement = elements[0]?.children
+
+      // pegamos a posição do elemento de ação
       const { top } = element.getBoundingClientRect()
-      const pageOffset = window.pageYOffset
 
-      window.scrollTo({
-        behavior: 'smooth',
-        top: pageOffset + top
-      })
+      // pegamos a altura da ultima linha (rows) de inputs
+      const lastRowHeight = rowsElement?.[rowsElement.length - 1]?.clientHeight
+
+      // pegamos a posição da página
+      const pageOffset = window.scrollY
+
+      // 56 é a altura do header no mobile
+      const safeScrollSize = this.$qas.screen.isSmall ? 56 + SpacingWithNumber.Lg : SpacingWithNumber.Lg
+
+      /**
+       * É necessário descontar a altura da última linha (rows) de inputs para que o scroll
+       * fique no final da última linha (rows) de inputs.
+       */
+      const scrollTop = pageOffset + top - (lastRowHeight + safeScrollSize)
+
+      window.scrollTo({ behavior: 'smooth', top: scrollTop })
     },
 
     async setFocus () {
@@ -507,6 +530,41 @@ export default {
 
     hasInlineActions (row) {
       return this.useInlineActions && !this.isDisabledRow(row)
+    },
+
+    hasHeader ({ row }) {
+      return this.hasBlockActions(row) || !this.useSingleLabel
+    },
+
+    getHeaderProps ({ index, row }) {
+      const hasLabel = !this.useSingleLabel
+      const hasActions = this.hasBlockActions(row)
+
+      const { labelProps, actionsMenuProps, ...payload } = this.headerProps?.({ index, row }) || {}
+
+      return {
+        ...payload,
+
+        spacing: 'sm',
+
+        ...(hasActions && {
+          actionsMenuProps: {
+            useLabel: false,
+
+            ...actionsMenuProps,
+
+            list: this.getActionsMenuList(index, row, actionsMenuProps?.list)
+          }
+        }),
+
+        ...(hasLabel && {
+          labelProps: {
+            typography: 'h5',
+            label: this.getRowLabel(index),
+            ...labelProps
+          }
+        })
+      }
     }
   }
 }
@@ -514,16 +572,13 @@ export default {
 
 <style lang="scss">
 .qas-nested-fields {
+  // mesmo tamanho do input
   &__actions {
-    height: 56px;
-  }
-
-  &__field-item {
-    margin-bottom: var(--qas-spacing-md);
+    height: 40px;
   }
 
   &__field-item + &__field-item {
-    margin-top: var(--qas-spacing-xl);
+    margin-top: var(--qas-spacing-lg);
   }
 }
 </style>

package/src/components/nested-fields/QasNestedFields.yml

@@ -74,12 +74,34 @@ props:
     type: [Array, String, Object]
     examples: ["[{ sm: 6, md: 12 }]", "{ name: { sm: 6, md: 12 } }", "12"]
 
+  form-common-columns:
+    desc: Colunas do grid comuns.
+    default: {}
+    type: [String, Object]
+    examples: ["{ col: 12, sm: 6}" , "12"]
+
   form-gutter:
     desc: Espaçamento entre colunas do formulário.
     default: lg
     type: [String, Boolean]
     examples: [xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, false]
 
+  header-props:
+    desc: Propriedades do header do nested por linha por callback.
+    default: () => {}
+    type: Function
+    params:
+      context:
+        desc: Payload da linha (row) -> index/row.
+        type: Object
+        params:
+          index:
+            desc: Índice da linha.
+            type: Number
+          row:
+            desc: Valores contendo na linha atual.
+            type: Object
+
   identifier-item-key:
     desc: Define um identificador para o item. O identificador será utilizado para validar exclusão do item, por exemplo.
     default: uuid
@@ -251,6 +273,7 @@ slots:
         type: Function
         examples: ["updateValue({ name: 'novo valor' }, 2)"]
 
+
 events:
   '@update:model-value -> function (value)':
     desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.

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/select/QasSelect.vue

@@ -1,7 +1,7 @@
 <template>
-  <q-select v-model="model" v-bind="attributes" class="qas-select" :class="componentClasses" no-error-icon :outlined="false">
-    <template v-if="isSearchable" #prepend>
-      <q-icon name="sym_r_search" />
+  <q-select v-model="model" v-bind="attributes" class="qas-select" :class="componentClasses" no-error-icon>
+    <template v-if="hasIcon" #prepend>
+      <q-icon :name="defaultIcon" />
     </template>
 
     <template #no-option>
@@ -30,6 +30,34 @@
       </qas-badge>
     </template>
 
+    <template v-if="useCustomOptions" #option="scope">
+      <q-item v-bind="scope.itemProps" class="qas-select__option">
+        <q-item-section>
+          <div class="items-center q-gutter-x-sm row">
+            <q-item-label>
+              {{ scope.opt.label }}
+            </q-item-label>
+
+            <div v-for="(badge, index) in getFilteredBadgeList(scope.opt)" :key="index">
+              <qas-badge v-if="hasBadge(badge)" v-bind="getBadgeProps(badge)" />
+            </div>
+          </div>
+
+          <div v-if="scope.opt.caption">
+            <div class="items-center q-col-gutter-x-sm row">
+              <q-item-label v-for="(caption, index) in getCaptionArray(scope.opt.caption)" :key="index" caption class="items-center q-mt-xs row">
+                <div>
+                  {{ caption }}
+                </div>
+
+                <q-separator v-if="hasSeparator({ caption: getCaptionArray(scope.opt.caption), index })" class="q-ml-sm" vertical />
+              </q-item-label>
+            </div>
+          </div>
+        </q-item-section>
+      </q-item>
+    </template>
+
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
@@ -49,12 +77,27 @@ export default {
 
   mixins: [searchFilterMixin],
 
+  inject: {
+    isBox: { default: false },
+    isDialog: { default: false }
+  },
+
   props: {
+    badgeProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     fuseOptions: {
       default: () => ({}),
       type: Object
     },
 
+    icon: {
+      type: String,
+      default: ''
+    },
+
     label: {
       type: String,
       default: ''
@@ -83,6 +126,10 @@ export default {
       type: Boolean
     },
 
+    useCustomOptions: {
+      type: Boolean
+    },
+
     useFetchOptionsOnCreate: {
       default: true,
       type: Boolean
@@ -95,6 +142,10 @@ export default {
     useSearch: {
       type: Boolean,
       default: undefined
+    },
+
+    useFilterMode: {
+      type: Boolean
     }
   },
 
@@ -113,7 +164,7 @@ export default {
         clearable: this.isSearchable,
         emitValue: true,
         mapOptions: true,
-        outlined: true,
+        outlined: this.useFilterMode,
         dense: true,
         dropdownIcon: 'sym_r_expand_more',
         clearIcon: 'sym_r_close',
@@ -151,6 +202,10 @@ export default {
       return this.hasFuse || this.useLazyLoading
     },
 
+    isBordered () {
+      return (this.isBox || this.isDialog) && this.useFilterMode
+    },
+
     hasError () {
       return this.mx_hasFetchError || this.$attrs.error
     },
@@ -198,7 +253,13 @@ export default {
     // redesign
     componentClasses () {
       return {
-        'qas-select--has-icon': this.isSearchable || this.hasAppend,
+        ...(this.useFilterMode && {
+          'qas-select--filter rounded-borders': true,
+          'shadow-2': !this.isBordered,
+          bordered: this.isBordered
+        }),
+
+        'qas-select--has-icon': this.hasAppend || this.hasIcon,
         'qas-select--closed': !this.isPopupContentOpen,
         'qas-select--loading': this.hasLoading
       }
@@ -214,6 +275,14 @@ export default {
 
     hasAppend () {
       return !!this.$slots.append
+    },
+
+    defaultIcon () {
+      return this.icon || 'sym_r_search'
+    },
+
+    hasIcon () {
+      return this.isSearchable || !!this.icon
     }
   },
 
@@ -328,6 +397,51 @@ export default {
         : this.options[0]
 
       this.$emit('update:modelValue', modelValue)
+    },
+
+    getFilteredBadgeList (payload = {}) {
+      const { label, value, disable, caption, ...rest } = payload
+
+      const badgeList = []
+
+      /**
+       * Exemplo de estrutura percorrida:
+       *
+       * @example
+       * {
+       *   isTester: true,
+       *   isOwner: false
+       * }
+       */
+      for (const [key, val] of Object.entries(rest)) {
+        if (key in this.badgeProps) {
+          badgeList.push({ [key]: val })
+        }
+      }
+
+      return badgeList
+    },
+
+    getBadgeProps (badge) {
+      const model = Object.keys(badge)[0]
+
+      const isFunction = typeof this.badgeProps[model] === 'function'
+
+      return isFunction ? this.badgeProps[model](badge[model]).props : this.badgeProps[model]
+    },
+
+    hasBadge (badge) {
+      const model = Object.keys(badge)[0]
+
+      return badge[model] || this.badgeProps[model](badge[model]).show
+    },
+
+    getCaptionArray (caption) {
+      return Array.isArray(caption) ? caption : [caption]
+    },
+
+    hasSeparator ({ caption, index }) {
+      return index !== caption.length - 1
     }
   }
 }
@@ -347,12 +461,22 @@ export default {
     }
   }
 
+  &--filter {
+    .q-field__control:before {
+      border: 0;
+    }
+  }
+
   &__menu {
     .q-item {
       font-weight: 400 !important;
     }
   }
 
+  &__option:hover .q-item__label--caption {
+    color: var(--q-primary);
+  }
+
   &--closed {
     .q-field__native span {
       white-space: nowrap;

package/src/components/select/QasSelect.yml

@@ -7,6 +7,12 @@ meta:
   desc: Componente para select que implementa o "QSelect" repassando propriedades, slots e eventos.
 
 props:
+  badge-list:
+    desc: Configuração das badges no qual cada key é um callback com o valor booleano retornado pelo back.
+    default: {}
+    examples: ["{ isTester: () => { return { color: 'grey-8', label: 'Tester', textColor: 'white' }} }"]
+    type: Object
+
   entity:
     desc: Entidade enviada para a action "fetchFieldOptions" (usar somente quando "useLazyLoading" estiver habilitada).
     default: ''
@@ -29,6 +35,11 @@ props:
       keys: [label, value]
       threshold: 0.4
 
+  icon:
+    desc: Ícone da esquerda.
+    type: String
+    default: ''
+
   label:
     desc: Label do componente.
     type: String

package/src/components/stepper-form-view/QasStepperFormView.yml

@@ -17,7 +17,7 @@ props:
     desc: Propriedades que serão repassadas para o QasStepper.
     type: Object
 
-inject:
+provide:
   stepper-model:
     desc: Model do stepper caso precise recuperar o step atual para alguma lógica. Possui reatividade, portanto para acessar é necessário do ".value"
     type: Number

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

@@ -4,7 +4,7 @@
       <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">
+    <q-table v-show="hasResults" 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" />
       </template>
@@ -19,6 +19,8 @@
         </q-td>
       </template>
     </q-table>
+
+    <qas-empty-result-text v-if="!hasResults" />
   </component>
 </template>
 
@@ -130,8 +132,15 @@ export default {
       return !!this.$slots['body-cell']
     },
 
+    hasResults () {
+      return !!this.resultsByFields.length
+    },
+
     attributes () {
       const attributes = {
+        tableClass: {
+          'overflow-hidden-y': !this.useStickyHeader
+        },
         class: this.tableClass,
         columns: this.columnsByFields,
         flat: true,

package/src/components/text-truncate/QasTextTruncate.vue

@@ -2,7 +2,7 @@
   <div ref="parent" :class="classes">
     <div class="no-wrap row text-no-wrap">
       <div ref="truncate" class="ellipsis">
-        <slot>{{ displayText }}</slot>
+        <slot>{{ formattedText }}</slot>
       </div>
 
       <qas-btn v-if="hasButton" class="q-ml-sm" :label="buttonLabel" @click.stop.prevent="toggle" />
@@ -87,6 +87,11 @@ const props = defineProps({
 
   useObjectList: {
     type: Boolean
+  },
+
+  emptyText: {
+    type: String,
+    default: '-'
   }
 })
 
@@ -119,6 +124,8 @@ useMutationObserver({ truncate, callbackFn: truncateText })
 
 const classes = computed(() => [`text-${props.color}`, `text-${props.typography}`])
 
+const formattedText = computed(() => props.list.length || props.text ? displayText.value : props.emptyText)
+
 // composable functions
 function useDialog ({ props, textContent }) {
   // reactive vars
@@ -141,7 +148,7 @@ function useDialog ({ props, textContent }) {
     }
   })
 
-  // methods
+  // functions
   function toggle () {
     show.value = !show.value
   }
@@ -163,7 +170,7 @@ function useMutationObserver ({ truncate, callbackFn = () => {} }) {
   onMounted(() => observeContentChange())
   onUnmounted(() => observer.value.disconnect())
 
-  // methods
+  // functions
   function observeContentChange () {
     const config = { childList: true, subtree: true, characterData: true }
 
@@ -190,7 +197,7 @@ function useTruncate ({ parent, props }) {
   // computed
   const isTruncated = computed(() => textWidth.value > maxPossibleWidth.value)
 
-  // methods
+  // functions
   function truncateText () {
     parent.value.style.maxWidth = '100%'
     textWidth.value = truncate.value.clientWidth