@bildvitta/quasar-ui-asteroid 3.15.0-beta.11 → 3.15.0-beta.13

package/package.json

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

package/src/components/actions-menu/QasActionsMenu.vue

@@ -139,9 +139,27 @@ const primaryKey = computed(() => {
   return props.splitName in fullList.value ? props.splitName : Object.keys(fullList.value)?.[0]
 })
 
+const defaultButtonPropsList = computed(() => {
+  const defaultButtonPropsList = {
+    useHoverOnWhiteColor: true,
+    useLabelOnSmallScreen: false
+  }
+
+  const normalizedButtonPropsList = {}
+
+  for (const key in formattedList.value.buttonsList) {
+    normalizedButtonPropsList[key] = {
+      ...defaultButtonPropsList,
+      ...formattedList.value.buttonsList[key]
+    }
+  }
+
+  return normalizedButtonPropsList
+})
+
 const btnDropdownProps = computed(() => {
   return {
-    buttonsPropsList: formattedList.value.buttonsList,
+    buttonsPropsList: defaultButtonPropsList.value,
     disable: props.disable,
     useSplit: hasSplit.value
   }

package/src/components/actions-menu/composables/use-options-actions.js

@@ -15,7 +15,6 @@ export default function useOptionsActions ({ props, color }) {
       options: {
         color,
         iconRight: 'sym_r_more_vert',
-        useLabelOnSmallScreen: false,
         ...props.buttonProps,
         label: getLabel({ useLabel: props.useLabel, label: 'Opções' }) // label não pode ser sobrescrita.
       }

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

@@ -2,7 +2,7 @@
   <div :class="fieldsetClasses">
     <div v-for="(fieldsetItem, fieldsetItemKey) in normalizedFields" :key="fieldsetItemKey" class="full-width">
       <slot v-if="fieldsetItem.label" :name="`legend-${fieldsetItemKey}`">
-        <qas-label :label="fieldsetItem.label" />
+        <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>
 
@@ -180,4 +180,8 @@ function useFieldset ({ props }) {
     hasFieldset
   }
 }
+
+function getLabelMargin (fieldsetItem) {
+  return fieldsetItem.description ? 'sm' : 'md'
+}
 </script>

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

@@ -8,7 +8,7 @@ props:
     desc: Colunas do grid de cada campo.
     default: col-6
     type: [Array, String, Object]
-    examples: ["[{ sm: 6, md: 12 }]", "{ name: { sm: 6, md: 12 } }", "12"]
+    examples: ["[{ sm: 6, md: 12 }]", "{ name: { sm: 6, md: 12 } }", "12", "{ sm: 6, md: 12 }"]
 
   disable:
     desc: Deixa os campos desabilitados enviando a prop "disable" para cada campo.
@@ -63,6 +63,9 @@ props:
     default: []
     type: Array
 
+  use-common-columns:
+    desc: Utilizado quando passar a estrutura da prop "columns" sendo um objeto onde seus breakpoints serão replicados para todos fields.
+
 slots:
   'field-[nome-da-chave]':
     desc: Acessa o slot de um campo especifico.

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

@@ -1,15 +1,15 @@
 <template>
   <div :class="classes">
-    <div v-for="(field, key) in fieldsByResult" :key="key" :class="getFieldClass({ index: key, isGridGenerator: true })">
+    <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClass({ key })">
       <slot :field="field" :name="`field-${field.name}`">
         <slot :field="field" name="header">
-          <header :class="props.headerClass" :data-cy="`grid-generator-${field.name}-field`">
+          <header :class="headerClass" :data-cy="`grid-generator-${field.name}-field`" :title="getTitle(field, 'label')">
             {{ field.label }}
           </header>
         </slot>
 
         <slot :field="field" name="content">
-          <div :class="props.contentClass" :data-cy="`grid-generator-${field.name}-result`">
+          <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
             {{ field.formattedResult }}
           </div>
         </slot>
@@ -21,12 +21,15 @@
 <script setup>
 import useGenerator, { baseProps } from '../../composables/private/use-generator'
 import { isEmpty, humanize } from '../../helpers'
+import { useScreen } from '../../composables'
 import { isObject } from 'lodash-es'
 import { ref, computed, watch } from 'vue'
 
 // define component name
 defineOptions({ name: 'QasGridGenerator' })
 
+const screen = useScreen()
+
 // props
 const props = defineProps({
   ...baseProps,
@@ -54,16 +57,65 @@ const props = defineProps({
   useEmptyResult: {
     default: true,
     type: Boolean
+  },
+
+  useEllipsis: {
+    default: true,
+    type: Boolean
+  },
+
+  useInline: {
+    type: Boolean
   }
 })
 
 // composables
-const { classes, getFieldClass } = useGenerator({ props })
+const { classes: useGeneratorClasses, getFieldClass } = useGenerator({ props })
 
 // computed
 const hasResult = computed(() => Object.keys(props.result).length)
 const hasFields = computed(() => Object.keys(props.fields).length)
 
+const contentClass = computed(() => {
+  if (!props.useEllipsis || (screen.isSmall && props.useEllipsis)) return props.contentClass
+
+  if (Array.isArray(props.contentClass)) {
+    return [...props.contentClass, 'ellipsis']
+  }
+
+  if (typeof props.contentClass === 'string') {
+    return `${props.contentClass} ellipsis`
+  }
+
+  return {
+    ...props.contentClass,
+    ellipsis: true
+  }
+})
+
+const headerClass = computed(() => {
+  if (!props.useEllipsis || (screen.isSmall && props.useEllipsis)) return props.headerClass
+
+  if (Array.isArray(props.headerClass)) {
+    return [...props.headerClass, 'ellipsis']
+  }
+
+  if (typeof props.headerClass === 'string') {
+    return `${props.headerClass} ellipsis`
+  }
+
+  return {
+    ...props.headerClass,
+    ellipsis: true
+  }
+})
+
+const classes = computed(() => {
+  if (props.useInline) return 'row q-col-gutter-md'
+
+  return useGeneratorClasses.value
+})
+
 const fieldsByResult = ref({})
 
 /**
@@ -122,4 +174,16 @@ function getFieldsByResult () {
 function setFieldsByResult () {
   fieldsByResult.value = getFieldsByResult()
 }
+
+function getContainerClass ({ key }) {
+  if (props.useInline) {
+    return 'row justify-between col-12'
+  }
+
+  return getFieldClass({ index: key, isGridGenerator: true })
+}
+
+function getTitle (field, key) {
+  return props.useEllipsis ? field[key] : ''
+}
 </script>

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

@@ -8,7 +8,7 @@ props:
     desc: Colunas do grid de cada campo.
     default: col-6
     type: [Array, String, Object]
-    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]"]
+    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]", "{ sm: 6, md: 12 }"]
 
   content-class:
     desc: Classe de cada "div" pai referente ao resultado.
@@ -48,6 +48,18 @@ props:
     default: true
     type: Boolean
 
+  use-ellipsis:
+    desc: Adiciona a classe "ellipsis" para o elemento do conteúdo.
+    default: true
+    type: Boolean
+
+  use-inline:
+    desc: Adiciona a disposição dos campos por linha, ou seja, header e content ocupando a linha toda.
+    type: Boolean
+
+  use-common-columns:
+    desc: Usado quando precisa passar a prop "columns" como objeto sendo que será o valor comum para todos fields
+
 slots:
   content:
     desc: Slot para o conteúdo (content).

package/src/composables/private/use-generator.js

@@ -19,6 +19,10 @@ export const baseProps = {
     default: Spacing.Lg,
     type: [String, Boolean],
     validator: gutterValidator
+  },
+
+  useCommonColumns: {
+    type: Boolean
   }
 }
 
@@ -86,7 +90,11 @@ export default function ({ props = {} }) {
     for (const key in formattedColumns) {
       const value = formattedColumns[key]
 
-      classes.push(IRREGULAR_CLASSES.includes(value) ? value : `${profiles[key]}-${value}`)
+      if (IRREGULAR_CLASSES.includes(value)) {
+        classes.push(value === 'col' ? profiles[key] : value)
+      } else {
+        classes.push(`${profiles[key]}-${value}`)
+      }
     }
 
     return [...classes, renamedClasses]
@@ -103,10 +111,23 @@ export default function ({ props = {} }) {
    * @private
   */
   function _handleColumnsByField ({ index, isGridGenerator }) {
+    /*
+     * Quando é passado o columns como um único objeto que será replicado para todos fields.
+     */
+    if (props.useCommonColumns && Object.keys(props.columns).length) {
+      return _getBreakpoint(props.columns)
+    }
+
+    /*
+     * Quando não é passado columns, retornará o default.
+     */
     if (!props.columns[index]) {
       return _getDefaultColumnClass(isGridGenerator)
     }
 
+    /*
+     * Quando é passado um objeto por field.
+     */
     return _getBreakpoint(props.columns[index])
   }