@bildvitta/quasar-ui-asteroid 3.15.0-beta.8 → 3.15.0

package/src/components/btn-dropdown/QasBtnDropdown.vue

@@ -1,21 +1,25 @@
 <template>
   <div class="qas-btn-dropdown" :class="classes.parent">
-    <div v-if="hasLeftButton" :class="classes.leftSide">
-      <slot name="left-button">
-        <qas-btn variant="tertiary" v-bind="defaultButtonProps" @click="onClick">
-          <q-menu v-if="hasMenuOnLeftSide" v-model="isMenuOpened" anchor="bottom right" auto-close self="top right" @update:model-value="onUpdateMenuValue">
-            <div :class="classes.menuContent">
-              <slot />
-            </div>
-          </q-menu>
-        </qas-btn>
-      </slot>
+    <div v-if="hasButtons" :class="classes.list">
+      <div v-for="(buttonProps, key, index) in props.buttonsPropsList" :key="key">
+        <div class="flex">
+          <qas-btn :disable="props.disable" v-bind="buttonProps" variant="tertiary" @click="onClick">
+            <q-menu v-if="hasMenuOnLeftSide" v-model="isMenuOpened" anchor="bottom right" auto-close self="top right" @update:model-value="onUpdateMenuValue">
+              <div :class="classes.menuContent">
+                <slot />
+              </div>
+            </q-menu>
+          </qas-btn>
+
+          <slot :name="`bottom-${key}`" />
+
+          <q-separator v-if="hasSeparator(index)" class="q-mx-sm qas-btn-dropdown__separator self-center" dark vertical />
+        </div>
+      </div>
     </div>
 
-    <q-separator v-if="hasSeparator" class="q-mr-sm qas-btn-dropdown__separator self-center" dark vertical />
-
     <div v-if="props.useSplit">
-      <qas-btn color="grey-10" :icon="props.dropdownIcon" variant="tertiary">
+      <qas-btn color="grey-10" :disable="disable" :icon="props.dropdownIcon" variant="tertiary">
         <q-menu v-if="hasDefaultSlot" anchor="bottom right" auto-close self="top right">
           <div :class="classes.menuContent">
             <slot />
@@ -37,7 +41,7 @@ defineOptions({
 })
 
 const props = defineProps({
-  buttonProps: {
+  buttonsPropsList: {
     default: () => ({}),
     type: Object
   },
@@ -47,7 +51,11 @@ const props = defineProps({
     type: String
   },
 
-  useSplit: {
+  disable: {
+    type: Boolean
+  },
+
+  menu: {
     type: Boolean
   },
 
@@ -55,8 +63,13 @@ const props = defineProps({
     type: Boolean
   },
 
-  menu: {
+  useSplit: {
     type: Boolean
+  },
+
+  useTooltip: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -67,47 +80,28 @@ const screen = useScreen()
 
 const isMenuOpened = ref(false)
 
-const defaultButtonProps = computed(() => {
-  const {
-    icon,
-    iconRight,
-    color,
-    ...defaultProps
-  } = props.buttonProps
-
-  const defaultIconRight = iconRight || props.dropdownIcon
-
-  return {
-    useLabelOnSmallScreen: false,
-
-    ...defaultProps,
-
-    color: color || (!props.useSplit ? 'grey-10' : 'primary'),
-    ...(!props.useSplit && { iconRight: defaultIconRight }),
-    ...(props.useSplit && { icon })
-  }
-})
-
 const classes = computed(() => {
   return {
     parent: {
       'flex inline items-center': props.useSplit
     },
 
-    leftSide: {
-      'q-mr-sm': props.useSplit
-    },
-
     menuContent: {
       'q-pa-md': props.useMenuPadding
+    },
+
+    list: {
+      flex: !isSingleButton.value
     }
   }
 })
 
+const buttonsPropsListSize = computed(() => Object.keys(props.buttonsPropsList).length)
+const isSingleButton = computed(() => buttonsPropsListSize.value === 1)
+
+const hasButtons = computed(() => !screen.isSmall || !props.useSplit)
 const hasDefaultSlot = computed(() => !!slots.default)
-const hasLeftButton = computed(() => !screen.isSmall || !props.useSplit)
-const hasMenuOnLeftSide = computed(() => hasDefaultSlot.value && !props.useSplit)
-const hasSeparator = computed(() => !screen.isSmall && props.useSplit)
+const hasMenuOnLeftSide = computed(() => hasDefaultSlot.value && !props.useSplit && isSingleButton.value)
 
 watch(() => props.menu, value => {
   isMenuOpened.value = value
@@ -120,6 +114,14 @@ function onUpdateMenuValue (value) {
 function onClick (event) {
   emit('click', event)
 }
+
+function isLast (index) {
+  return index + 1 === buttonsPropsListSize.value
+}
+
+function hasSeparator (index) {
+  return props.useSplit || !isLast(index)
+}
 </script>
 
 <style lang="scss">

package/src/components/btn-dropdown/QasBtnDropdown.yml

@@ -4,11 +4,16 @@ meta:
   desc: Componente semelhante ao QBtnDropdown porém utilizando o QasBtn e QSeparator para aplicar estilos padrões do Design System.
 
 props:
-  button-props:
-    desc: Propriedades repassadas para o QasBtn.
-    default: {}
-    type: Object
-    examples: ["{ color: 'white', icon: 'sym_r_person' }"]
+  buttons-props-list:
+    desc: Lista de propriedades repassadas para os botões.
+    default: []
+    type: Array
+    examples: ["[{ color: 'white', icon: 'sym_r_person' }]"]
+
+  disable:
+    desc: Desabilita o componente como um todo.
+    default: false
+    type: Boolean
 
   dropdown-icon:
     desc: Ícone a direita do dropdown.
@@ -33,10 +38,9 @@ props:
 
 slots:
   default:
-    desc: Slot para passar o conteúdo do dropdown (menu)
-
-  left-button:
-    desc: Slot para substituir o botão a esquerda.
+    desc: Slot para passar o conteúdo do dropdown (menu).
+  bottom-[buttons-props-list-key]:
+    desc: Slot unitário para acessar abaixo de cada botão (normalmente utilizado para tooltip).
 
 events:
   '@click -> function (event)':

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/chart-view/QasChartView.vue

@@ -47,7 +47,7 @@ import {
 import { Bar as BarChart, Doughnut as DoughnutChart, Line as LineChart } from 'vue-chartjs'
 
 // Configurações padrões
-import { charts, colors, font } from './config'
+import { charts, colors as defaultColors, font } from './config'
 
 // Plugins
 import zoomPlugin from 'chartjs-plugin-zoom'
@@ -79,6 +79,11 @@ export default {
       type: Function
     },
 
+    colorsList: {
+      type: Array,
+      default: () => []
+    },
+
     entity: {
       required: true,
       type: String
@@ -161,6 +166,7 @@ export default {
 
       const [dataset] = this.data
       const labels = this.getXAxisData(dataset.data.map(item => item.x))
+      const colors = this.colorsList.length ? this.colorsList : defaultColors
 
       const datasets = this.data.map(({ label, data }, index) => {
         const backgroundColor = this.isDoughnut ? colors : colors.at(index)

package/src/components/chart-view/QasChartView.yml

@@ -10,6 +10,12 @@ props:
     type: Function
     examples: ['beforeFetch({ payload, resolve, done })']
 
+  colors-list:
+    desc: Lista de cores personalizadas para utilizar nos gráficos
+    default: []
+    type: Array,
+    examples: ['#34B53A', '#016DD9', '#FFB200', '#F62D1B']
+
   entity:
     desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
     required: true

package/src/components/expansion-item/QasExpansionItem.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="qas-expansion-item" :class="errorClasses">
+    <qas-box class="qas-expansion-item__box">
+      <q-expansion-item header-class="text-bold q-mt-sm q-pa-none" :label="props.label">
+        <template #header>
+          <slot name="header">
+            <div class="full-width">
+              <div class="items-center q-col-gutter-sm row">
+                <slot name="label">
+                  <h5 class="col-auto text-h5 text-weight-medium">
+                    {{ props.label }}
+                  </h5>
+                </slot>
+
+                <div class="col-auto items-center q-col-gutter-sm row">
+                  <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex" class="col-auto">
+                    <qas-badge v-bind="badge" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </slot>
+        </template>
+
+        <q-separator class="q-my-md" />
+
+        <slot name="content">
+          <qas-grid-generator v-if="hasGridGenerator" v-bind="gridGeneratorProps" use-inline />
+        </slot>
+      </q-expansion-item>
+    </qas-box>
+
+    <div v-if="hasError" class="q-pt-sm qas-expansion-item__error-message text-caption text-negative">
+      {{ props.errorMessage }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({ name: 'QasExpansionItem' })
+
+const props = defineProps({
+  badges: {
+    type: Array,
+    default: () => []
+  },
+
+  error: {
+    type: Boolean
+  },
+
+  errorMessage: {
+    type: String,
+    default: ''
+  },
+
+  label: {
+    type: String,
+    default: ''
+  },
+
+  gridGeneratorProps: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const hasError = computed(() => props.error || !!props.errorMessage)
+
+const errorClasses = computed(() => ({ 'qas-expansion-item--error': hasError.value }))
+
+const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
+</script>
+
+<style lang="scss">
+.qas-expansion-item {
+  $root: &;
+
+  &--error {
+    #{$root}__box {
+      border: 2px solid $negative;
+    }
+
+    #{$root}__error-message {
+      padding-left: 12px; // espaçamento igual ao de erro do quasar.
+    }
+  }
+
+  .q-item {
+    margin-top: 0;
+    min-height: auto;
+  }
+
+  .q-item:hover {
+    color: initial !important;
+  }
+}
+</style>

package/src/components/expansion-item/QasExpansionItem.yml

@@ -0,0 +1,35 @@
+type: component
+
+meta:
+  desc: Componente de card expansivo, wrapper do QExpansionItem(https://quasar.dev/vue-components/expansion-item)
+
+props:
+  badges:
+    desc: Lista de badges que serão exibidas na parte superior do card.
+    type: Array
+
+  error:
+    desc: Booleano que caso seja true o card passa a ter uma borda vermelha.
+    type: Boolean
+
+  error-message:
+    desc: Mensagem de erro onde será exibida na parte inferior do card.
+    type: String
+
+  label:
+    desc: Titulo exibido na parte superior do card.
+    type: String
+
+  grid-generator-props:
+    desc: Propriedades que serão repassadas para o QasGridGenerator.
+    type: Object
+
+slots:
+  header:
+    desc: 'Slot para substituir o conteúdo do header'
+
+  label:
+    desc: 'Slot para substituir o conteúdo da label do header.'
+
+  content:
+    desc: 'Slot para substituir o conteúdo principal do card.'

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>
 
@@ -26,7 +26,8 @@
 </template>
 
 <script setup>
-import useGenerator, { baseProps, gutterValidator } from '../../composables/private/use-generator'
+import { gutterValidator } from '../../helpers/private/gutter-validator'
+import useGenerator, { baseProps } from '../../composables/private/use-generator'
 import { Spacing } from '../../enums/Spacing'
 import { computed } from 'vue'
 
@@ -179,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.
@@ -42,13 +42,13 @@ props:
     desc: Espaçamento entre rótulos (label).
     default: lg
     type: [String, Boolean]
-    examples: [xs, sm, md, lg, xl, false]
+    examples: [xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl', false]
 
   gutter:
     desc: Espaçamento entre colunas.
     default: lg
     type: [String, Boolean]
-    examples: [xs, sm, md, lg, xl, false]
+    examples: [xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl', false]
 
   model-value:
     desc: Model do componente, usado para o v-model.
@@ -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,
@@ -37,7 +40,7 @@ const props = defineProps({
   },
 
   headerClass: {
-    default: 'text-bold',
+    default: '',
     type: [Array, Object, String]
   },
 
@@ -54,16 +57,52 @@ 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(() => {
+  return [
+    props.contentClass,
+
+    {
+      ellipsis: !screen.isSmall && props.useEllipsis
+    }
+  ]
+})
+
+const headerClass = computed(() => {
+  return [
+    props.headerClass,
+
+    {
+      ellipsis: !screen.isSmall && props.useEllipsis,
+      'text-bold': screen.isSmall || !props.useInline
+    }
+  ]
+})
+
+const classes = computed(() => {
+  if (props.useInline) return 'row q-col-gutter-md'
+
+  return useGeneratorClasses.value
+})
+
 const fieldsByResult = ref({})
 
 /**
@@ -122,4 +161,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.
@@ -30,7 +30,7 @@ props:
     desc: Espaçamento entre colunas.
     default: lg
     type: String
-    examples: [xs, sm, md, lg, xl]
+    examples: [xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl]
 
   header-class:
     desc: Classe de cada "header" pai referente ao "label".
@@ -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/nested-fields/QasNestedFields.yml

@@ -78,7 +78,7 @@ props:
     desc: Espaçamento entre colunas do formulário.
     default: lg
     type: [String, Boolean]
-    examples: [xs, sm, md, lg, xl, false]
+    examples: [xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, false]
 
   identifier-item-key:
     desc: Define um identificador para o item. O identificador será utilizado para validar exclusão do item, por exemplo.