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

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

@@ -1,210 +1,210 @@
-<template>
-  <component :is="component.is" v-bind="component.props">
-    <qas-header v-if="hasHeader" v-bind="props.headerProps" />
-
-    <div :class="classes">
-      <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClassses({ key })">
-        <slot :field="field" :name="`field-${field.name}`">
-          <qas-grid-item :use-ellipsis="hasEllipsis(field)" :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="getContentClasses(field)" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
-                    {{ field.formattedResult }}
-                  </div>
-                </slot>
-              </slot>
-            </template>
-          </qas-grid-item>
-        </slot>
-      </div>
-    </div>
-  </component>
-</template>
-
-<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,
-
-  boxProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  contentClass: {
-    default: '',
-    type: [Array, Object, String]
-  },
-
-  headerClass: {
-    default: '',
-    type: [Array, Object, String]
-  },
-
-  headerProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  emptyResultText: {
-    default: '-',
-    type: String
-  },
-
-  result: {
-    default: () => ({}),
-    type: Object
-  },
-
-  useBox: {
-    type: Boolean
-  },
-
-  useEmptyResult: {
-    default: true,
-    type: Boolean
-  },
-
-  useEllipsis: {
-    default: true,
-    type: Boolean
-  },
-
-  useInline: {
-    type: Boolean
-  }
-})
-
-// composables
-const { classes, getFieldClass } = useGenerator({ props })
-
-// computed
-const hasResult = computed(() => Object.keys(props.result).length)
-const hasFields = computed(() => Object.keys(props.fields).length)
-const hasHeader = computed(() => Object.keys(props.headerProps).length)
-
-const component = computed(() => {
-  return {
-    is: props.useBox ? 'qas-box' : 'div',
-    props: props.useBox ? props.boxProps : {}
-  }
-})
-
-const headerClass = computed(() => {
-  return [
-    props.headerClass,
-
-    {
-      ellipsis: !screen.isSmall && props.useEllipsis
-    }
-  ]
-})
-
-const fieldsByResult = ref({})
-
-/**
- * Retorna os "fields" formatados, caso a propriedade "useEmptyResult" seja "true", retorna todos os "fields", mesmo que não tenha resultado.
- * Caso a propriedade "useEmptyResult" seja "false", retorna apenas os "fields" que possuem resultado.
-*/
-const formattedFields = computed(() => {
-  if (props.useEmptyResult) return props.fields
-
-  if (!hasResult.value) return {}
-
-  const fields = {}
-
-  for (const key in props.fields) {
-    const result = props.result[key]
-
-    const validate = Array.isArray(result)
-      ? result.length
-      : isObject(result) ? Object.keys(result).length : result
-
-    if (validate) {
-      fields[key] = props.fields[key]
-    }
-  }
-
-  return fields
-})
-
-// watch
-watch(() => formattedFields.value, setFieldsByResult, { immediate: true })
-
-// functions
-function getFieldsByResult () {
-  if (!hasResult.value || !hasFields.value) return {}
-
-  const result = { ...props.result }
-  const fieldsByResult = {}
-
-  for (const key in formattedFields.value) {
-    const field = formattedFields.value[key] || {}
-
-    if (!field.type) continue
-
-    const humanizedResult = humanize(field, result[key])
-    const formattedResult = isEmpty({ value: humanizedResult }) ? props.emptyResultText : humanizedResult
-
-    fieldsByResult[key] = {
-      ...field,
-      formattedResult
-    }
-  }
-
-  return fieldsByResult
-}
-
-function setFieldsByResult () {
-  fieldsByResult.value = getFieldsByResult()
-}
-
-function getContainerClassses ({ 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] : ''
-}
-
-function hasEllipsis (field) {
-  /**
-   * Para campos do tipo "textarea" vamos sempre exibir o conteúdo por completo.
-   */
-  return (field.type === 'textarea') && !props.useInline ? false : props.useEllipsis
-}
-
-function getContentClasses (field) {
-  return [
-    props.contentClass,
-
-    {
-      ellipsis: !screen.isSmall && hasEllipsis(field)
-    }
-  ]
-}
-</script>
+<template>
+  <component :is="component.is" v-bind="component.props">
+    <qas-header v-if="hasHeader" v-bind="props.headerProps" />
+
+    <div :class="classes">
+      <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClassses({ key })">
+        <slot :field="field" :name="`field-${field.name}`">
+          <qas-grid-item :use-ellipsis="hasEllipsis(field)" :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="getContentClasses(field)" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
+                    {{ field.formattedResult }}
+                  </div>
+                </slot>
+              </slot>
+            </template>
+          </qas-grid-item>
+        </slot>
+      </div>
+    </div>
+  </component>
+</template>
+
+<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,
+
+  boxProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  contentClass: {
+    default: '',
+    type: [Array, Object, String]
+  },
+
+  headerClass: {
+    default: '',
+    type: [Array, Object, String]
+  },
+
+  headerProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  emptyResultText: {
+    default: '-',
+    type: String
+  },
+
+  result: {
+    default: () => ({}),
+    type: Object
+  },
+
+  useBox: {
+    type: Boolean
+  },
+
+  useEmptyResult: {
+    default: true,
+    type: Boolean
+  },
+
+  useEllipsis: {
+    default: true,
+    type: Boolean
+  },
+
+  useInline: {
+    type: Boolean
+  }
+})
+
+// composables
+const { classes, getFieldClass } = useGenerator({ props })
+
+// computed
+const hasResult = computed(() => Object.keys(props.result).length)
+const hasFields = computed(() => Object.keys(props.fields).length)
+const hasHeader = computed(() => Object.keys(props.headerProps).length)
+
+const component = computed(() => {
+  return {
+    is: props.useBox ? 'qas-box' : 'div',
+    props: props.useBox ? props.boxProps : {}
+  }
+})
+
+const headerClass = computed(() => {
+  return [
+    props.headerClass,
+
+    {
+      ellipsis: !screen.isSmall && props.useEllipsis
+    }
+  ]
+})
+
+const fieldsByResult = ref({})
+
+/**
+ * Retorna os "fields" formatados, caso a propriedade "useEmptyResult" seja "true", retorna todos os "fields", mesmo que não tenha resultado.
+ * Caso a propriedade "useEmptyResult" seja "false", retorna apenas os "fields" que possuem resultado.
+*/
+const formattedFields = computed(() => {
+  if (props.useEmptyResult) return props.fields
+
+  if (!hasResult.value) return {}
+
+  const fields = {}
+
+  for (const key in props.fields) {
+    const result = props.result[key]
+
+    const validate = Array.isArray(result)
+      ? result.length
+      : isObject(result) ? Object.keys(result).length : result
+
+    if (validate) {
+      fields[key] = props.fields[key]
+    }
+  }
+
+  return fields
+})
+
+// watch
+watch(() => formattedFields.value, setFieldsByResult, { immediate: true })
+
+// functions
+function getFieldsByResult () {
+  if (!hasResult.value || !hasFields.value) return {}
+
+  const result = { ...props.result }
+  const fieldsByResult = {}
+
+  for (const key in formattedFields.value) {
+    const field = formattedFields.value[key] || {}
+
+    if (!field.type) continue
+
+    const humanizedResult = humanize(field, result[key])
+    const formattedResult = isEmpty({ value: humanizedResult }) ? props.emptyResultText : humanizedResult
+
+    fieldsByResult[key] = {
+      ...field,
+      formattedResult
+    }
+  }
+
+  return fieldsByResult
+}
+
+function setFieldsByResult () {
+  fieldsByResult.value = getFieldsByResult()
+}
+
+function getContainerClassses ({ 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] : ''
+}
+
+function hasEllipsis (field) {
+  /**
+   * Para campos do tipo "textarea" vamos sempre exibir o conteúdo por completo.
+   */
+  return (field.type === 'textarea') && !props.useInline ? false : props.useEllipsis
+}
+
+function getContentClasses (field) {
+  return [
+    props.contentClass,
+
+    {
+      ellipsis: !screen.isSmall && hasEllipsis(field)
+    }
+  ]
+}
+</script>

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

@@ -1,127 +1,127 @@
-type: component
-
-meta:
-  desc: Componente para criação de textos dinâmicos.
-
-props:
-  box-props:
-    desc: Propriedades do "QasBox" que envolve o conteúdo.
-    default: {}
-    type: Object
-
-  columns:
-    desc: Colunas do grid de cada campo.
-    default: col-6
-    type: [Array, String, Object]
-    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]", "{ sm: 6, md: 12 }"]
-
-  common-columns:
-    desc: Usado quando precisa passar o mesmo valor para todas as colunas, sem especificar cada uma, ela é feita como um merge com a prop "columns".
-    examples: ["{ name: { sm: 6, md: 12 } }", "12"]
-
-  content-class:
-    desc: Classe de cada "div" pai referente ao resultado.
-    default: ''
-    type: [Array, Object, String]
-
-  empty-result-text:
-    desc: Se o resultado de algum campo for vazio (null, undefined, ''), esta prop define qual será o valor padrão.
-    default: '-'
-    type: String
-
-  fields:
-    desc: Lista de field contendo informações necessárias para a criação do campo correspondente.
-    default: {}
-    type: Object
-    examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
-
-  gutter:
-    desc: Espaçamento entre colunas.
-    default: lg
-    type: String
-    examples: [xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl]
-
-  header-class:
-    desc: Classe de cada "header" pai referente ao "label".
-    default: 'text-bold'
-    type: [Array, Object, String]
-
-  header-props:
-    desc: Propriedades do "QasHeader".
-    default: {}
-    type: Object
-
-  result:
-    desc: Resultado contendo todas informações para serem exibidas na tela.
-    default: {}
-    type: Object
-    examples: ["{ 'joah@examples.com' }"]
-
-  use-empty-result:
-    desc: Se o resultado de algum campo for vazio e esta propriedade for "false", ele remove todo o campo.
-    default: true
-    type: Boolean
-
-  use-box:
-    desc: Controla se o componente vai ter o QasBox englobando ou não.
-    default: false
-    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
-
-slots:
-  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.
-        default: {}
-        type: Object
-
-  'field-[nome-da-chave]':
-    desc: Slot para todo o conteúdo dentro de cada grid (header e content).
-    scope:
-      field:
-        desc: Conteúdo do field atual mais o resultado formatado.
-        default: {}
-        type: Object
-
-  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.
-        default: {}
-        type: Object
-
-selectors:
-  'grid-generator-[fieldName]-field':
-    desc: Seletor do título do campo.
-    examples: ['data-cy="grid-generator-email-field"', 'data-cy="grid-generator-name-field"']
-
-  'grid-generator-[fieldName]-result':
-    desc: Seletor do conteúdo do campo.
-    examples: ['data-cy="grid-generator-email-result"', 'data-cy="grid-generator-name-result"']
+type: component
+
+meta:
+  desc: Componente para criação de textos dinâmicos.
+
+props:
+  box-props:
+    desc: Propriedades do "QasBox" que envolve o conteúdo.
+    default: {}
+    type: Object
+
+  columns:
+    desc: Colunas do grid de cada campo.
+    default: col-6
+    type: [Array, String, Object]
+    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]", "{ sm: 6, md: 12 }"]
+
+  common-columns:
+    desc: Usado quando precisa passar o mesmo valor para todas as colunas, sem especificar cada uma, ela é feita como um merge com a prop "columns".
+    examples: ["{ name: { sm: 6, md: 12 } }", "12"]
+
+  content-class:
+    desc: Classe de cada "div" pai referente ao resultado.
+    default: ''
+    type: [Array, Object, String]
+
+  empty-result-text:
+    desc: Se o resultado de algum campo for vazio (null, undefined, ''), esta prop define qual será o valor padrão.
+    default: '-'
+    type: String
+
+  fields:
+    desc: Lista de field contendo informações necessárias para a criação do campo correspondente.
+    default: {}
+    type: Object
+    examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
+
+  gutter:
+    desc: Espaçamento entre colunas.
+    default: lg
+    type: String
+    examples: [xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl]
+
+  header-class:
+    desc: Classe de cada "header" pai referente ao "label".
+    default: 'text-bold'
+    type: [Array, Object, String]
+
+  header-props:
+    desc: Propriedades do "QasHeader".
+    default: {}
+    type: Object
+
+  result:
+    desc: Resultado contendo todas informações para serem exibidas na tela.
+    default: {}
+    type: Object
+    examples: ["{ 'joah@examples.com' }"]
+
+  use-empty-result:
+    desc: Se o resultado de algum campo for vazio e esta propriedade for "false", ele remove todo o campo.
+    default: true
+    type: Boolean
+
+  use-box:
+    desc: Controla se o componente vai ter o QasBox englobando ou não.
+    default: false
+    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
+
+slots:
+  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.
+        default: {}
+        type: Object
+
+  'field-[nome-da-chave]':
+    desc: Slot para todo o conteúdo dentro de cada grid (header e content).
+    scope:
+      field:
+        desc: Conteúdo do field atual mais o resultado formatado.
+        default: {}
+        type: Object
+
+  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.
+        default: {}
+        type: Object
+
+selectors:
+  'grid-generator-[fieldName]-field':
+    desc: Seletor do título do campo.
+    examples: ['data-cy="grid-generator-email-field"', 'data-cy="grid-generator-name-field"']
+
+  'grid-generator-[fieldName]-result':
+    desc: Seletor do conteúdo do campo.
+    examples: ['data-cy="grid-generator-email-result"', 'data-cy="grid-generator-name-result"']