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

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

@@ -1,26 +1,31 @@
 <template>
   <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" :margin="getLabelMargin(fieldsetItem)" />
-        <div v-if="fieldsetItem.description" class="q-mb-md text-body1 text-grey-8">{{ fieldsetItem.description }}</div>
-      </slot>
-
-      <div>
-        <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>
-        </div>
-
-        <div v-for="(field, key) in fieldsetItem.fields.hidden" :key="key">
-          <slot :field="field" :name="`field-${field.name}`">
-            <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
+    <div v-for="(fieldsetItem, fieldsetItemKey) in normalizedFields" :key="fieldsetItemKey" :class="getFieldSetColumnClass(fieldsetItem.column)">
+      <component :is="containerComponent.is" v-bind="containerComponent.props">
+        <slot v-if="fieldsetItem.label" :name="`legend-${fieldsetItemKey}`">
+          <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>
+
+        <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>
+            </div>
+
+            <div v-for="(field, key) in fieldsetItem.fields.hidden" :key="key">
+              <slot :field="field" :name="`field-${field.name}`">
+                <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
+              </slot>
+            </div>
           </slot>
         </div>
-      </div>
+      </component>
     </div>
   </div>
 </template>
@@ -29,13 +34,18 @@
 import { gutterValidator } from '../../helpers/private/gutter-validator'
 import useGenerator, { baseProps } from '../../composables/private/use-generator'
 import { Spacing } from '../../enums/Spacing'
-import { computed } from 'vue'
+import { computed, provide, inject } from 'vue'
 
 defineOptions({ name: 'QasFormGenerator' })
 
 const props = defineProps({
   ...baseProps,
 
+  boxProps: {
+    default: () => ({}),
+    type: Object
+  },
+
   disable: {
     type: Boolean
   },
@@ -70,17 +80,42 @@ const props = defineProps({
   order: {
     default: () => [],
     type: Array
+  },
+
+  useBox: {
+    type: Boolean
   }
 })
 
 const emit = defineEmits(['update:modelValue'])
 
+provide('isFormGenerator', true)
+
 // composables
-const { classes, getFieldClass } = useGenerator({ props })
+const { classes, getFieldClass, getFieldSetColumnClass } = useGenerator({ props })
 
 const { fieldsetClasses, hasFieldset } = useFieldset({ props })
 
+// constants
+const hasNestedFormGenerator = inject('isFormGenerator', false)
+
 // computed
+
+/**
+ * Se o QasFormGenerator tiver um elemento acima que também é um QasFormGenerator,
+ * mesmo que a propriedade useBox seja true, o componente não deve renderizar o box.
+ */
+const containerComponent = computed(() => {
+  const hasBox = props.useBox && !hasNestedFormGenerator
+
+  return {
+    is: hasBox ? 'qas-box' : 'div',
+    props: {
+      ...(hasBox && { ...props.boxProps })
+    }
+  }
+})
+
 const groupedFields = computed(() => {
   const fields = { hidden: {}, visible: {} }
 
@@ -126,6 +161,7 @@ const normalizedFields = computed(() => {
     fields[fieldsetKey] = {
       label: fieldsetItem.label,
       description: fieldsetItem.description,
+      column: fieldsetItem.column,
       fields: { hidden: {}, visible: {} }
     }
 
@@ -150,6 +186,10 @@ function getFieldType ({ type }) {
   return type === 'hidden' ? 'hidden' : 'visible'
 }
 
+function getLabelMargin (fieldsetItem) {
+  return fieldsetItem.description ? 'sm' : 'md'
+}
+
 function isFieldDisabled ({ disable }) {
   return disable || props.disable
 }
@@ -167,7 +207,7 @@ function useFieldset ({ props }) {
     const classes = ['row']
 
     if (props.fieldsetGutter) {
-      classes.push(`q-col-gutter-y-${props.fieldsetGutter}`)
+      classes.push(`q-col-gutter-${props.fieldsetGutter}`)
     }
 
     return classes
@@ -180,8 +220,4 @@ function useFieldset ({ props }) {
     hasFieldset
   }
 }
-
-function getLabelMargin (fieldsetItem) {
-  return fieldsetItem.description ? 'sm' : 'md'
-}
 </script>

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

@@ -19,6 +19,11 @@ props:
     default: "false"
     type: Boolean
 
+  box-props:
+    desc: Propriedades repassadas para o componente `QasBox`.
+    default: {}
+    type: Object
+
   error:
     desc: Objeto contendo propriedades contendo a mensagem de erro.
     default: {}
@@ -67,6 +72,11 @@ props:
     default: []
     type: Array
 
+  use-box:
+    desc: Contra QasBox dentro do form-generator e fieldset.
+    default: false
+    type: Boolean
+
 slots:
   'field-[nome-da-chave]':
     desc: Acessa o slot de um campo especifico.
@@ -75,8 +85,17 @@ slots:
         desc: Payload do campo atual.
         default: {}
         type: Object
-'legend-[nome-da-chave]':
-    desc: Acessa o slot de um rótulo (label).
+
+  'legend-[nome-da-chave]':
+      desc: Acessa o slot de um rótulo (label).
+
+  'legend-section-[nome-da-chave]':
+    desc: Acessa o slot da seção de fields daquele fieldset.
+    scope:
+      fields:
+        desc: Campos daquela seção.
+        default: {}
+        type: Object
 
 events:
   '@update:model-value -> function(value)':

package/src/components/gallery-card/QasGalleryCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white q-pa-md qas-gallery-card rounded-borders shadow-2" :class="classes">
+  <qas-box class="bg-white qas-gallery-card" :class="classes" v-bind="boxProps">
     <header class="flat items-center no-wrap row" :class="headerClasses">
       <slot name="header">
         <div class="ellipsis q-mr-xs qas-gallery__name text-subtitle1">
@@ -45,11 +45,11 @@
         <qas-grid-generator v-if="hasGridGenerator" v-bind="props.gridGeneratorProps" />
       </slot>
     </div>
-  </div>
+  </qas-box>
 </template>
 
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed, useSlots, inject } from 'vue'
 
 defineOptions({ name: 'QasGalleryCard' })
 
@@ -91,6 +91,13 @@ const props = defineProps({
 
 const slots = useSlots()
 
+const isInsideBox = inject('isBox', false)
+
+const boxProps = {
+  outlined: isInsideBox,
+  unelevated: isInsideBox
+}
+
 const errorClasses = [
   'bg-grey-4',
   'flex',

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

@@ -2,17 +2,27 @@
   <div :class="classes">
     <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="headerClass" :data-cy="`grid-generator-${field.name}-field`" :title="getTitle(field, 'label')">
-            {{ field.label }}
-          </header>
-        </slot>
-
-        <slot :field="field" name="content">
-          <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
-            {{ field.formattedResult }}
-          </div>
-        </slot>
+        <qas-grid-item :use-ellipsis="props.useEllipsis" :use-inline="props.useInline">
+          <template #header>
+            <slot :field="field" :name="`header-field-${field.name}`">
+              <slot :field="field" name="header">
+                <div :class="headerClass" :data-cy="`grid-generator-${field.name}-field`" :title="getTitle(field, 'label')">
+                  {{ field.label }}
+                </div>
+              </slot>
+            </slot>
+          </template>
+
+          <template #content>
+            <slot :field="field" :name="`content-field-${field.name}`">
+              <slot :field="field" name="content">
+                <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
+                  {{ field.formattedResult }}
+                </div>
+              </slot>
+            </slot>
+          </template>
+        </qas-grid-item>
       </slot>
     </div>
   </div>
@@ -91,8 +101,7 @@ const headerClass = computed(() => {
     props.headerClass,
 
     {
-      ellipsis: !screen.isSmall && props.useEllipsis,
-      'text-bold': screen.isSmall || !props.useInline
+      ellipsis: !screen.isSmall && props.useEllipsis
     }
   ]
 })

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

@@ -63,7 +63,7 @@ props:
 
 slots:
   content:
-    desc: Slot para o conteúdo (content).
+    desc: Slot para o conteúdo (valor) de todas os campos de uma vez.
     scope:
       field:
         desc: Conteúdo do field atual mais o resultado formatado.
@@ -79,7 +79,23 @@ slots:
         type: Object
 
   header:
-    desc: Slot para o header.
+    desc: Slot para o header de todas os campos de uma vez.
+    scope:
+      field:
+        desc: Conteúdo do field atual mais o resultado formatado.
+        default: {}
+        type: Object
+
+  'header-field-[nome-da-chave]':
+    desc: Slot para o header especifico de um field.
+    scope:
+      field:
+        desc: Conteúdo do field atual mais o resultado formatado.
+        default: {}
+        type: Object
+
+  'content-field-[nome-da-chave]':
+    desc: Slot para o conteúdo (valor) especifico de um field.
     scope:
       field:
         desc: Conteúdo do field atual mais o resultado formatado.

package/src/components/grid-item/QasGridItem.vue

@@ -0,0 +1,89 @@
+<template>
+  <div :class="classes.container">
+    <header v-bind="headerProps">
+      <slot name="header">
+        {{ props.label }}
+      </slot>
+    </header>
+
+    <div v-bind="contentProps">
+      <slot name="content">
+        {{ props.value }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useScreen } from '../../composables'
+
+import { computed } from 'vue'
+
+defineOptions({ name: 'QasGridItem' })
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+
+  useEllipsis: {
+    default: true,
+    type: Boolean
+  },
+
+  useInline: {
+    type: Boolean
+  },
+
+  value: {
+    type: [String, Number, Boolean],
+    default: ''
+  }
+})
+
+const screen = useScreen()
+
+// computed
+const hasEllipsis = computed(() => props.useEllipsis && !screen.isSmall)
+
+const classes = computed(() => {
+  const isInline = props.useInline && !screen.isSmall
+
+  return {
+    container: {
+      flex: isInline,
+      'q-col-gutter-x-md': isInline,
+      'justify-between': isInline,
+      'col-12': isInline,
+      'no-wrap': isInline
+    },
+
+    header: {
+      'text-caption': !isInline,
+      'text-body1': isInline
+    },
+
+    content: {
+      'text-body1': !isInline,
+      'text-grey-10': !isInline,
+      'text-subtitle1': isInline,
+      ellipsis: hasEllipsis.value
+    }
+  }
+})
+
+const headerProps = computed(() => {
+  return {
+    class: classes.value.header,
+    ...(hasEllipsis.value && { title: props.label })
+  }
+})
+
+const contentProps = computed(() => {
+  return {
+    class: classes.value.content,
+    ...(hasEllipsis.value && { title: props.value })
+  }
+})
+</script>

package/src/components/grid-item/QasGridItem.yml

@@ -0,0 +1,22 @@
+type: component
+
+meta:
+  desc: Componente para renderizar chave/valor comumente utilizado junto ao QasGridGenerator.
+
+props:
+  label:
+    desc: Rótulo do header.
+    default: ''
+    type: String
+
+  value:
+    desc: Valor do conteúdo.
+    default: ''
+    type: [String, Number, Boolean]
+
+slots:
+  content:
+    desc: Slot para o conteúdo (value).
+
+  header:
+    desc: Slot para o header (label).

package/src/components/header/QasHeader.vue

@@ -0,0 +1,106 @@
+<template>
+  <div :class="containerClasses">
+    <div v-if="hasLabelSection" class="items-center justify-between no-wrap row" :class="labelSectionClasses">
+      <div class="items-center q-col-gutter-sm row">
+        <slot name="label">
+          <qas-label v-bind="defaultLabelProps" />
+        </slot>
+
+        <div v-if="hasBadges" class="col-auto items-center q-col-gutter-sm row">
+          <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex">
+            <qas-badge v-bind="badge" />
+          </div>
+        </div>
+      </div>
+
+      <slot name="actions">
+        <qas-actions-menu v-if="hasDefaultActionsMenu" v-bind="props.actionsMenuProps" />
+
+        <qas-btn v-if="hasDefaultButton" :use-label-on-small-screen="false" v-bind="props.buttonProps" />
+      </slot>
+    </div>
+
+    <div class="items-start justify-between no-wrap q-col-gutter-sm row">
+      <div v-if="hasDescriptionSection" class="text-body1 text-grey-8">
+        <slot name="description">
+          {{ props.description }}
+        </slot>
+      </div>
+
+      <div v-if="!hasLabelSection" class="justify-end row">
+        <slot name="actions">
+          <qas-actions-menu v-if="hasDefaultActionsMenu" v-bind="props.actionsMenuProps" />
+
+          <qas-btn v-if="hasDefaultButton" :use-label-on-small-screen="false" v-bind="props.buttonProps" />
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Spacing } from '../../enums/Spacing'
+import { gutterValidator } from '../../helpers/private/gutter-validator'
+
+import { computed, useSlots } from 'vue'
+
+defineOptions({ name: 'QasHeader' })
+
+const props = defineProps({
+  actionsMenuProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  badges: {
+    type: Array,
+    default: () => []
+  },
+
+  buttonProps: {
+    default: () => ({}),
+    type: Object
+  },
+
+  description: {
+    type: String,
+    default: ''
+  },
+
+  labelProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  spacing: {
+    default: Spacing.Xl,
+    type: String,
+    validator: gutterValidator
+  }
+})
+
+const slots = useSlots()
+
+// computed
+const containerClasses = computed(() => `q-mb-${props.spacing}`)
+
+const labelSectionClasses = computed(() => {
+  return {
+    'q-mb-xs': hasBadges.value
+  }
+})
+
+const defaultLabelProps = computed(() => {
+  return {
+    margin: hasBadges.value ? 'none' : 'xs',
+    ...props.labelProps
+  }
+})
+
+const hasBadges = computed(() => !!props.badges.length)
+const hasLabel = computed(() => !!Object.keys(props.labelProps).length)
+const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)
+const hasDefaultActionsMenu = computed(() => !!Object.keys(props.actionsMenuProps).length)
+const hasDescriptionSection = computed(() => props.description || slots.description)
+const hasLabelSection = computed(() => hasLabel.value || slots.label)
+</script>

package/src/components/header/QasHeader.yml

@@ -0,0 +1,45 @@
+type: component
+
+meta:
+  desc: Componente para cabeçalho composto por label (título), badges, descrição e ação.
+
+props:
+  actions-menu-props:
+    desc: Propriedades do QasActionsMenu.
+    default: {}
+    type: Object
+
+  badges:
+    desc: Adiciona badges ao lado do titulo (QasLabel), caso não tenha titulo fica somente as bages acima da descrição.
+    default: []
+    type: Array
+
+  button-props:
+    desc: Propriedades do QasBtn.
+    default: {}
+    type: Object
+
+  description:
+    desc: Descrição da seção a esquerda.
+    type: String
+
+  label-props:
+    desc: Propriedades repassadas para o componente QasLabel.
+    type: Object
+    default: {}
+
+  spacing:
+    desc: Espaçamento entre o componente e o conteúdo abaixo.
+    default: xl
+    type: String
+    examples: [none, xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl']
+
+slots:
+  actions:
+    desc: slot para acessar seção da direita (ações).
+
+  description:
+    desc: slot para acessar seção de descrição.
+
+  label:
+    desc: slot para acessar o label (título).