@bildvitta/quasar-ui-asteroid 3.15.0-beta.10 → 3.15.0-beta.12

package/package.json

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

package/src/components/card/QasCard.vue

@@ -11,7 +11,7 @@
         <qas-actions-menu v-if="hasActions" :list="actionsMenuProps" :use-label="false" />
       </div>
 
-      <div class="q-my-sm">
+      <div class="q-my-sm qas-card__content">
         <slot name="default" />
       </div>
 
@@ -97,6 +97,10 @@ const hasFooter = computed(() => hasFooterSlot.value || hasExpansion.value)
 
 <style lang="scss">
 .qas-card {
+  &__content {
+    max-width: 100%;
+  }
+
   &__router {
     &:hover {
       color: $primary;

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/components/stepper/QasStepper.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   },
 
   modelValue: {
-    type: [Number, String],
+    type: [String, Number],
     default: 0
   },
 
@@ -39,7 +39,7 @@ const screen = useScreen()
 
 const emit = defineEmits(['update:modelValue'])
 
-defineExpose({ next, previous })
+defineExpose({ next, previous, goTo })
 
 const model = computed({
   get () {
@@ -63,6 +63,10 @@ function getContext (context) {
   }
 }
 
+function goTo (step) {
+  stepper.value.goTo(step)
+}
+
 function next () {
   if (props.disable) return
 

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

@@ -0,0 +1,84 @@
+<template>
+  <qas-stepper ref="stepper" v-model="model" v-bind="stepperProps">
+    <template #default>
+      <q-step v-for="(step, stepIndex) in props.steps" :key="stepIndex" :done="isDone(stepIndex)" :name="getStepName(stepIndex)" v-bind="stepPropsList[stepIndex]">
+        <component :is="step.component" />
+      </q-step>
+    </template>
+  </qas-stepper>
+</template>
+
+<script setup>
+import { ref, provide, computed } from 'vue'
+
+defineOptions({ name: 'QasStepperFormView' })
+
+const props = defineProps({
+  steps: {
+    type: Array,
+    required: true
+  },
+
+  formViewProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  stepperProps: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const model = defineModel({ type: Number, default: 1 })
+
+const values = ref({})
+const stepPropsList = ref([])
+const stepper = ref(null)
+
+setStepProps({ payload: [...props.steps.map(({ stepProps }) => stepProps)] })
+
+const defaultFormViewProps = computed(() => {
+  return {
+    useBoundary: false,
+    useNotifySuccess: false,
+    ...props.formViewProps
+  }
+})
+
+function setStepProps ({ step, payload }) {
+  if (step) {
+    stepPropsList.value[step - 1] = payload
+  } else {
+    stepPropsList.value = payload
+  }
+}
+
+/*
+* - Merge do payload com objetivo de enviar o payload completo de todos steps no stepper final
+* - É possível ir para um step especifico ou somente ir para o próximo.
+*/
+function nextStep ({ payload = {} }) {
+  Object.assign(values.value, payload)
+
+  stepper.value.next()
+}
+
+function isDone (stepIndex) {
+  return model.value > stepIndex + 1
+}
+
+function getStepName (stepIndex) {
+  return stepIndex + 1
+}
+
+provide('stepper', {
+  stepperModel: model,
+  formViewProps: defaultFormViewProps,
+  goTo: step => stepper.value.goTo(step),
+  next: nextStep,
+  previous: () => stepper.value.previous(),
+  setStepProps,
+  stepsValues: values
+})
+</script>

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

@@ -0,0 +1,58 @@
+type: component
+
+meta:
+  desc: Componente para steppers de formulário.
+
+props:
+  steps:
+    desc: Lista de step, cada item possuindo "stepProps" e "component".
+    required: true
+    type: Array
+
+  form-view-props:
+    desc: Propriedades que serão repassadas para os componentes, podendo repassar coisas que serão comúm entre as páginas, como "entity", "mode".
+    type: Object
+
+  stepper-props:
+    desc: Propriedades que serão repassadas para o QasStepper.
+    type: Object
+
+inject:
+  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
+
+  form-view-props:
+    desc: Propriedades do QasFormView que são comuns entre todos os steppers. Possui reatividade, portanto para acessar é necessário do ".value"
+    type: Object
+
+  'goTo: (step) => void':
+    desc: Função usada para mudar o step atual.
+    params:
+      step:
+        desc: Nome do step que deseja visualizar.
+        type: Number
+
+  'next: (payload) => void':
+    desc: Avança para o próximo step.
+    params:
+      payload:
+        desc: Payload do formulário atual, que será mergeado no "stepperValues", com a intenção de guardar o payload completo para ser enviado no último step.
+        type: Object
+
+  'previous: () => void':
+    desc: Volta para o step anterior.
+
+  'setStepProps: () => void':
+    desc: Altera as propriedades de um step específico caso precise que seja alterado com base em alguma lógica atual da página.
+    params:
+      step:
+        desc: Step que deseja alterar as propriedades
+        type: Number
+
+      payload:
+        desc: Propriedades do step como "title", "prefix", "caption", entre outros.
+
+  steps-values:
+    desc: Payload com todos valores que foram mergeados através da função "next" ao decorrer dos avanços dos steps. É usado para você recuperar no último step com intenção de enviar o payload completo de todos step para a API. Possui reatividade, portanto para acessar é necessário do ".value"
+    type: Object

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])
   }
 

package/src/vue-plugin.js

@@ -58,6 +58,7 @@ import QasSingleView from './components/single-view/QasSingleView.vue'
 import QasSortable from './components/sortable/QasSortable.vue'
 import QasStatus from './components/status/QasStatus.vue'
 import QasStepper from './components/stepper/QasStepper.vue'
+import QasStepperFormView from './components/stepper-form-view/QasStepperFormView.vue'
 import QasTableGenerator from './components/table-generator/QasTableGenerator.vue'
 import QasTabsGenerator from './components/tabs-generator/QasTabsGenerator.vue'
 import QasTextTruncate from './components/text-truncate/QasTextTruncate.vue'
@@ -149,6 +150,7 @@ async function install (app) {
   app.component('QasSortable', QasSortable)
   app.component('QasStatus', QasStatus)
   app.component('QasStepper', QasStepper)
+  app.component('QasStepperFormView', QasStepperFormView)
   app.component('QasTableGenerator', QasTableGenerator)
   app.component('QasTabsGenerator', QasTabsGenerator)
   app.component('QasTextTruncate', QasTextTruncate)
@@ -241,6 +243,7 @@ export {
   QasSortable,
   QasStatus,
   QasStepper,
+  QasStepperFormView,
   QasTableGenerator,
   QasTabsGenerator,
   QasTextTruncate,