@bildvitta/quasar-ui-asteroid 3.16.0-beta.1 → 3.16.0-beta.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.16.0-beta.1",
+  "version": "3.16.0-beta.10",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",
@@ -43,6 +43,7 @@
     "sass": "^1.62.1"
   },
   "dependencies": {
+    "@bildvitta/composables": "^1.0.0-beta.7",
     "@bildvitta/store-adapter": "^1.0.0",
     "autonumeric": "^4.9.0",
     "axios": "^1.4.0",

package/src/components/actions/QasActions.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="q-mt-sm" :class="classes">
+    <div v-if="hasTertiarySlot" :class="columnClasses">
+      <slot name="tertiary" />
+    </div>
+
     <div v-if="hasSecondarySlot" :class="columnClasses">
       <slot name="secondary" />
     </div>
@@ -52,6 +56,8 @@ const classes = computed(() => {
   const isSmallOrFullWidth = screen.isSmall || props.useFullWidth
 
   return [
+    'items-center',
+
     // alinhamento
     `justify-${props.align}`,
 
@@ -71,4 +77,5 @@ const columnClasses = computed(() => {
 
 const hasPrimarySlot = computed(() => !!slots.primary)
 const hasSecondarySlot = computed(() => !!slots.secondary)
+const hasTertiarySlot = computed(() => !!slots.tertiary)
 </script>

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

@@ -3,7 +3,7 @@
     <qas-btn-dropdown v-bind="btnDropdownProps">
       <q-list data-cy="actions-menu-list">
         <slot v-for="(item, key) in formattedList.dropdownList" :item="item" :name="key">
-          <q-item v-bind="getItemProps(item)" :key="key" clickable data-cy="actions-menu-list-item" @click="setClickHandler(item)">
+          <q-item v-bind="getItemProps(item)" :key="key" active-class="primary" clickable data-cy="actions-menu-list-item" @click="setClickHandler(item)">
             <q-item-section avatar>
               <q-icon :name="item.icon" />
             </q-item-section>
@@ -240,10 +240,11 @@ const { showTooltip, tooltipLabels } = useTooltips({ formattedList, fullList, pr
 
 // functions
 function getItemProps (item) {
-  const { disable, props: itemProps } = item
+  const { disable, props: itemProps, to } = item
 
   return {
     disable,
+    to,
     ...itemProps
   }
 }

package/src/components/app-menu/private/PvAppMenuHelpChat.vue

@@ -106,10 +106,12 @@ onUnmounted(() => {
  * Define o estilo do iframe de acordo com a posição do "chatContent" dentro
  * do QMenu.
  */
-function setIframeStyle () {
+async function setIframeStyle () {
+  await nextTick()
+
   const iframe = getIframe()
 
-  if (!iframe) return
+  if (!iframe || !chatContent.value) return
 
   const { bottom, left, top } = chatContent.value.getBoundingClientRect()
 

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

@@ -2,8 +2,8 @@
   <div class="qas-btn-dropdown" :class="classes.parent">
     <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">
+        <div class="flex no-wrap">
+          <qas-btn :disable="props.disable" v-bind="buttonProps" no-wrap 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 />
@@ -91,7 +91,7 @@ const classes = computed(() => {
     },
 
     list: {
-      flex: !isSingleButton.value
+      'flex no-wrap': !isSingleButton.value
     }
   }
 })

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

@@ -1,13 +1,13 @@
 <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">
+  <div ref="expansionItem" class="full-width qas-expansion-item" :class="errorClasses" v-bind="expansionProps.parent">
+    <component :is="component.is" class="qas-expansion-item__box">
+      <q-expansion-item header-class="text-bold q-mt-sm q-pa-none qas-expansion-item__header" :label="props.label" v-bind="expansionProps.item">
         <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">
+                  <h5 class="col-auto text-h5">
                     {{ props.label }}
                   </h5>
                 </slot>
@@ -18,17 +18,25 @@
                   </div>
                 </div>
               </div>
+
+              <div v-if="hasHeaderBottom" class="q-mt-sm">
+                <slot name="header-bottom" />
+              </div>
             </div>
           </slot>
         </template>
 
-        <q-separator class="q-my-md" />
+        <q-separator v-if="hasHeaderSeparator" class="q-my-md" />
+
+        <div :class="contentClasses">
+          <slot name="content">
+            <qas-grid-generator v-if="hasGridGenerator" use-inline v-bind="gridGeneratorProps" />
+          </slot>
+        </div>
 
-        <slot name="content">
-          <qas-grid-generator v-if="hasGridGenerator" v-bind="gridGeneratorProps" use-inline />
-        </slot>
+        <q-separator v-if="hasBottomSeparator" class="q-mt-md" />
       </q-expansion-item>
-    </qas-box>
+    </component>
 
     <div v-if="hasError" class="q-pt-sm qas-expansion-item__error-message text-caption text-negative">
       {{ props.errorMessage }}
@@ -37,9 +45,14 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import QasBox from '../box/QasBox.vue'
 
-defineOptions({ name: 'QasExpansionItem' })
+import { computed, provide, inject, onMounted, ref, useAttrs } from 'vue'
+
+defineOptions({
+  name: 'QasExpansionItem',
+  inheritAttrs: false
+})
 
 const props = defineProps({
   badges: {
@@ -64,20 +77,112 @@ const props = defineProps({
   gridGeneratorProps: {
     type: Object,
     default: () => ({})
+  },
+
+  useHeaderSeparator: {
+    type: Boolean,
+    default: undefined
   }
 })
 
+const attrs = useAttrs()
+
+provide('isExpansionItem', true)
+
+// slots
+const slots = defineSlots()
+
+// refs
+const expansionItem = ref(null)
+const hasNextSibling = ref(false)
+
+onMounted(setHasNextSibling)
+
+// constants
+const isNestedExpansionItem = inject('isExpansionItem', false)
+const component = {
+  is: isNestedExpansionItem ? 'div' : QasBox
+}
+
+// computed
 const hasError = computed(() => props.error || !!props.errorMessage)
+const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
+const hasBottomSeparator = computed(() => isNestedExpansionItem && hasNextSibling.value)
+const hasHeaderBottom = computed(() => !!slots['header-bottom'])
+
+/**
+ * Verifica se o componente deve adicionar um separador no header.
+ *
+ * - Se a propriedade useHeaderSeparator for true, retorna separador.
+ * - Se a propriedade useHeaderSeparator for undefined, retorna separador apenas se não for um componente aninhado.
+ * - Se a propriedade useHeaderSeparator for false, não retorna separador.
+ */
+const hasHeaderSeparator = computed(() => {
+  return typeof props.useHeaderSeparator === 'undefined' ? !isNestedExpansionItem : props.useHeaderSeparator
+})
 
 const errorClasses = computed(() => ({ 'qas-expansion-item--error': hasError.value }))
 
-const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
+const contentClasses = computed(() => {
+  return {
+    'q-mt-sm': isNestedExpansionItem,
+    'q-mt-md': !isNestedExpansionItem && !props.useHeaderSeparator
+  }
+})
+
+const expansionProps = computed(() => {
+  const {
+    'onUpdate:modelValue': onUpdateModelValue,
+    onShow,
+    onBeforeShow,
+    onBeforeHide,
+    onAfterShow,
+    onAfterHide,
+    ...propsPayload
+  } = attrs
+
+  return {
+    parent: {
+      ...propsPayload
+    },
+
+    item: {
+      onUpdateModelValue,
+      onShow,
+      onBeforeShow,
+      onBeforeHide,
+      onAfterShow,
+      onAfterHide
+    }
+  }
+})
+
+// functions
+
+/**
+ * Caso o componente esteja dentro de um QasExpansionItem, verifica se existe um próximo irmão
+ * para adicionar um separador.
+ */
+function setHasNextSibling (value) {
+  if (!isNestedExpansionItem) return
+
+  const hasTextContentSibling = !!expansionItem.value.nextSibling?.textContent?.trim?.()
+  const hasElementSibling = !!expansionItem.value.nextElementSibling
+
+  hasNextSibling.value = hasElementSibling || hasTextContentSibling
+}
 </script>
 
 <style lang="scss">
 .qas-expansion-item {
   $root: &;
 
+  // em alguns casos quando usado com grid, o espaçamento afetava o header, com z-index o problema é resolvido
+  &__header {
+    position: relative;
+    z-index: 1;
+  }
+
   &--error {
     #{$root}__box {
       border: 2px solid $negative;

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

@@ -24,10 +24,18 @@ props:
     desc: Propriedades que serão repassadas para o QasGridGenerator.
     type: Object
 
+  use-header-separator:
+    desc: Propriedade para forçar o QSeparator no header.
+    type: Boolean
+    default: undefined
+
 slots:
   header:
     desc: 'Slot para substituir o conteúdo do header'
 
+  header-bottom:
+    desc: 'Slot para acessar o conteúdo que fica abaixo do header.'
+
   label:
     desc: 'Slot para substituir o conteúdo da label do header.'
 

package/src/components/form-view/QasFormView.vue

@@ -5,7 +5,9 @@
     </header>
 
     <q-form ref="form" v-bind="defaultFormProps">
-      <slot />
+      <slot v-if="mx_canShowFetchErrorSlot" name="fetch-error" />
+
+      <slot v-else />
 
       <slot v-if="useActions" name="actions">
         <qas-actions>

package/src/components/form-view/QasFormView.yml

@@ -155,6 +155,9 @@ slots:
   default:
     desc: Slot para ter o conteúdo principal (dentro do main).
 
+  fetch-error:
+    desc: Slot disponibilizado em caso de fetchError.
+
   footer:
     desc: Slot para acessar o footer.
 

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

@@ -70,7 +70,7 @@ const props = defineProps({
 })
 
 // composables
-const { classes: useGeneratorClasses, getFieldClass } = useGenerator({ props })
+const { classes, getFieldClass } = useGenerator({ props })
 
 // computed
 const hasResult = computed(() => Object.keys(props.result).length)
@@ -97,12 +97,6 @@ const headerClass = computed(() => {
   ]
 })
 
-const classes = computed(() => {
-  if (props.useInline) return 'row q-col-gutter-md'
-
-  return useGeneratorClasses.value
-})
-
 const fieldsByResult = ref({})
 
 /**
@@ -163,9 +157,7 @@ function setFieldsByResult () {
 }
 
 function getContainerClass ({ key }) {
-  if (props.useInline) {
-    return 'row justify-between col-12'
-  }
+  if (props.useInline) return 'row justify-between col-12'
 
   return getFieldClass({ index: key, isGridGenerator: true })
 }

package/src/components/header-actions/QasHeaderActions.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="justify-between no-wrap q-col-gutter-x-md q-mb-xl row text-body1 text-grey-8" :class="containerClass">
+  <div class="justify-between no-wrap q-col-gutter-x-md row text-body1 text-grey-8" :class="containerClass">
     <div :class="leftClass">
       <slot name="left">
         {{ props.text }}
       </slot>
     </div>
 
-    <div v-if="hasRightSide" class="col-3 col-md-3 col-sm-4 justify-end row">
+    <div v-if="hasRightSide" class="justify-end row">
       <slot name="right">
         <qas-actions-menu v-if="hasDefaultActionsMenu" v-bind="props.actionsMenuProps" />
 
@@ -18,6 +18,8 @@
 
 <script setup>
 import { FlexAlign } from '../../enums/Align'
+import { Spacing } from '../../enums/Spacing'
+import { gutterValidator } from '../../helpers/private/gutter-validator'
 
 import { computed, useSlots } from 'vue'
 
@@ -43,14 +45,25 @@ const props = defineProps({
   text: {
     type: String,
     default: ''
+  },
+
+  spacing: {
+    default: Spacing.Xl,
+    type: String,
+    validator: gutterValidator
   }
 })
 
 const slots = useSlots()
 
 // computed
-const containerClass = computed(() => `items-${props.alignColumns}`)
-const leftClass = computed(() => hasRightSide.value ? 'col-9 col-md-9 col-sm-8' : 'col-12')
+const containerClass = computed(() => `items-${props.alignColumns} q-mb-${props.spacing}`)
+
+const leftClass = computed(() => {
+  return {
+    'col-12': !hasRightSide.value
+  }
+})
 
 const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)
 const hasDefaultActionsMenu = computed(() => !!Object.keys(props.actionsMenuProps).length)

package/src/components/header-actions/QasHeaderActions.yml

@@ -24,6 +24,12 @@ props:
     desc: Descrição da seção a esquerda.
     type: String
 
+  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:
   left:
     desc: slot para acessar seção da esquerda (descrição).

package/src/components/label/QasLabel.vue

@@ -1,7 +1,7 @@
 <template>
-  <div :class="classes">
+  <component :is="props.typography" :class="classes">
     <slot :label-with-suffix="formattedLabel">{{ formattedLabel }}</slot>
-  </div>
+  </component>
 </template>
 
 <script setup>

package/src/components/list-view/QasListView.vue

@@ -15,7 +15,9 @@
         </div>
 
         <div v-else-if="!mx_isFetching">
-          <slot name="empty-results">
+          <slot v-if="mx_canShowFetchErrorSlot" name="fetch-error" />
+
+          <slot v-else name="empty-results">
             <qas-empty-result-text />
           </slot>
         </div>

package/src/components/list-view/QasListView.yml

@@ -97,6 +97,9 @@ slots:
   empty-results:
     desc: 'Slot acessar quando a listagem está vazia.'
 
+  fetch-error:
+    desc: Slot disponibilizado em caso de fetchError.
+
   filter:
     desc: 'Slot para acessar o filtro.'
 

package/src/components/single-view/QasSingleView.vue

@@ -1,124 +1,175 @@
 <template>
-  <div :class="mx_componentClass">
-    <header v-if="mx_hasHeaderSlot">
+  <div :class="componentClass">
+    <header v-if="hasHeaderSlot">
       <slot name="header" />
     </header>
 
-    <template v-if="hasResult">
+    <slot v-if="canShowFetchErrorSlot" name="fetch-error" />
+
+    <template v-else-if="hasResult">
       <slot />
     </template>
 
-    <qas-empty-result-text v-else-if="!mx_isFetching" class="q-my-xl" />
+    <div v-else-if="!viewState.fetching">
+      <qas-empty-result-text class="q-my-xl" />
+    </div>
 
-    <footer v-if="mx_hasFooterSlot">
+    <footer v-if="hasFooterSlot">
       <slot name="footer" />
     </footer>
 
-    <q-inner-loading :showing="mx_isFetching">
+    <q-inner-loading :showing="viewState.fetching">
       <q-spinner color="grey" size="3em" />
     </q-inner-loading>
   </div>
 </template>
 
-<script>
-import viewMixin from '../../mixins/view'
+<script setup>
+import useView, { baseProps, baseEmits } from '../../composables/private/use-view'
 
-import { markRaw } from 'vue'
-import { getGetter, getAction } from '@bildvitta/store-adapter'
 import debug from 'debug'
+import { decamelize } from 'humps'
+import { markRaw, computed, watch, inject } from 'vue'
+import { useRoute } from 'vue-router'
 
 const log = debug('asteroid-ui:qas-single-view')
 
-export default {
-  name: 'QasSingleView',
-
-  mixins: [viewMixin],
+defineOptions({ name: 'QasSingleView' })
 
-  props: {
-    customId: {
-      default: '',
-      type: [Number, String]
-    },
+const props = defineProps({
+  ...baseProps,
 
-    result: {
-      default: () => ({}),
-      type: Object
-    }
+  customId: {
+    default: '',
+    type: [Number, String]
   },
 
-  emits: [
-    'update:result',
-    'fetch-success',
-    'fetch-error'
-  ],
+  result: {
+    default: () => ({}),
+    type: Object
+  }
+})
 
-  computed: {
-    hasResult () {
-      return !!this.resultModel
-    },
+const emit = defineEmits([
+  ...baseEmits,
 
-    id () {
-      return this.customId || this.$route.params.id
-    },
+  'update:result',
+  'fetch-success',
+  'fetch-error'
+])
 
-    resultModel () {
-      return getGetter.call(this, { entity: this.entity, key: 'byId' })(this.id) || {}
-    }
-  },
+const slots = defineSlots()
 
-  watch: {
-    $route (to, from) {
-      if (to.name === from.name) {
-        this.mx_fetchHandler({ id: this.id, url: this.url }, this.fetchSingle)
-      }
-    },
+// globals
+const axios = inject('axios')
+const qas = inject('qas')
 
-    resultModel (value) {
-      this.$emit('update:result', markRaw({ ...value }))
-    }
-  },
+// composables
+const route = useRoute()
 
-  created () {
-    this.mx_fetchHandler({ id: this.id, url: this.url }, this.fetchSingle)
-  },
+const {
+  // state
+  viewState,
+
+  // computed
+  componentClass,
+  hasHeaderSlot,
+  hasFooterSlot,
+  canShowFetchErrorSlot,
+
+  // functions
+  errorHandler,
+  fetchHandler,
+  setErrors,
+  setFields,
+  setMetadata,
+  setResult,
+  updateModels
+} = useView({ emit, props, slots, mode: 'single' })
+
+// Expose
+defineExpose({ fetchSingle, fetchHandler })
+
+// computed
+const id = computed(() => props.customId || route.params.id)
+
+const resultModel = computed(() => {
+  if (props.useStore) return qas.getGetter({ entity: props.entity, key: 'byId' })(id.value) || {}
+
+  return viewState.value.result || {}
+})
+
+const hasResult = computed(() => !!resultModel.value)
 
-  methods: {
-    async fetchSingle (externalPayload = {}) {
-      this.mx_isFetching = true
+// watch
+watch(() => route, (to, from) => {
+  if (to.name === from.name) {
+    fetchHandler({ id: id.value, url: props.url }, fetchSingle)
+  }
+})
+
+watch(() => resultModel.value, value => emit('update:result', markRaw({ ...value })))
+
+// created
+fetchHandler({ id: id.value, url: props.url }, fetchSingle)
+
+// functions
+async function fetchSingle (externalPayload = {}) {
+  viewState.value.fetching = true
 
-      try {
-        const payload = { id: this.id, url: this.url, ...externalPayload }
+  try {
+    const payload = { id: id.value, url: props.url, ...externalPayload }
 
-        const response = await getAction.call(this, {
-          entity: this.entity,
-          key: 'fetchSingle',
-          payload
-        })
+    const response = await getAction(payload)
 
-        const { errors, fields, metadata } = response.data
+    const { errors, fields, metadata, result } = response.data
 
-        this.mx_setErrors(errors)
-        this.mx_setFields(fields)
-        this.mx_setMetadata(metadata)
+    setErrors(errors)
+    setFields(fields)
+    setMetadata(metadata)
 
-        this.mx_updateModels({
-          errors: this.mx_errors,
-          fields: this.mx_fields,
-          metadata: this.mx_metadata
-        })
+    /**
+     * result só precisa ser adicionado ao estado se não estiver usando store,
+     * pois com a store é usado o getter.
+     */
+    !props.useStore && setResult(result)
 
-        this.$emit('fetch-success', response)
+    updateModels({
+      errors: viewState.value.errors,
+      fields: viewState.value.fields,
+      metadata: viewState.value.metadata,
 
-        log(`[${this.entity}]:fetchSingle:success`, response)
-      } catch (error) {
-        this.mx_fetchError(error)
-        this.$emit('fetch-error', error)
+      ...(!props.useStore && { result: viewState.value.result })
+    })
 
-        log(`[${this.entity}]:fetchSingle:error`, error)
-      } finally {
-        this.mx_isFetching = false
-      }
-    }
+    emit('fetch-success', response)
+
+    log(`[${props.entity}]:fetchSingle:success`, response)
+  } catch (error) {
+    errorHandler(error)
+    emit('fetch-error', error)
+
+    log(`[${props.entity}]:fetchSingle:error`, error)
+  } finally {
+    viewState.value.fetching = false
   }
 }
+
+function getAction (payload) {
+  if (props.useStore) {
+    return qas.getAction({
+      entity: props.entity,
+      key: 'fetchSingle',
+      payload
+    })
+  }
+
+  const { id: unusedID, url: unusedURL, ...externalPayload } = payload
+
+  const decamelizedEntity = decamelize(props.entity, { separator: '-' })
+
+  const url = props.url || `${decamelizedEntity}/${id.value}`
+
+  return axios.get(url, { ...externalPayload })
+}
 </script>

package/src/components/single-view/QasSingleView.yml

@@ -62,10 +62,18 @@ props:
     default: true
     type: Boolean
 
+  use-route:
+    desc: Controla se o componente usará internamente uma store do vuex/pinia ou se vai ser utilizado o axios diretamente.
+    default: true
+    type: Boolean
+
 slots:
   default:
     desc: 'Slot para ter o conteúdo principal (dentro do main).'
 
+  fetch-error:
+    desc: Slot disponibilizado em caso de fetchError.
+
   footer:
     desc: 'Slot para acessar o footer.'
 

package/src/components/table-generator/QasTableGenerator.vue

@@ -1,5 +1,5 @@
 <template>
-  <qas-box class="q-px-lg q-py-md">
+  <component :is="parentComponent.is" v-bind="parentComponent.props">
     <q-table ref="table" class="bg-white qas-table-generator text-grey-8" v-bind="attributes">
       <template v-for="(_, name) in slots" #[name]="context">
         <slot :name="name" v-bind="context" />
@@ -15,7 +15,7 @@
         </q-td>
       </template>
     </q-table>
-  </qas-box>
+  </component>
 </template>
 
 <script>
@@ -57,6 +57,11 @@ export default {
       type: String
     },
 
+    useBox: {
+      type: Boolean,
+      default: true
+    },
+
     useScrollOnGrab: {
       type: Boolean,
       default: true
@@ -217,6 +222,15 @@ export default {
 
     hasScrollOnGrab () {
       return !!Object.keys(this.scrollOnGrab).length
+    },
+
+    parentComponent () {
+      return {
+        is: this.useBox ? 'qas-box' : 'div',
+        props: {
+          class: this.useBox ? 'q-px-lg q-py-md' : ''
+        }
+      }
     }
   },
 

package/src/components/table-generator/QasTableGenerator.yml

@@ -36,6 +36,11 @@ props:
     type: Function
     examples: ["(row) => ({ path: 'table-generator', params: { id: row.uuid } })"]
 
+  use-box:
+    desc: Controla se o componente vai usar QasBox ou div.
+    default: true
+    type: Boolean
+
   use-external-link:
     desc: Usado em conjunto com a prop "row-route-fn" quando há a necessidade da rota ser um link externo.
     default: false

package/src/components/toggle-visibility/QasToggleVisibility.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="qas-toggle-visibility">
+    <div class="items-center no-wrap row" :style>
+      <div class="ellipsis qas-toggle-visibility__content">
+        <div
+          v-if="isVisible"
+          class="ellipsis full-width"
+          :title="props.text"
+        >
+          <slot>
+            {{ props.text }}
+          </slot>
+        </div>
+
+        <q-separator
+          v-else
+          size="4px"
+        />
+      </div>
+
+      <qas-btn
+        class="q-ml-sm qas-toggle-visibility__button"
+        :icon
+        @click.prevent.stop="toggleVisibility"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useToggleVisibility } from '../../composables/private'
+
+import { uid } from 'quasar'
+import { computed } from 'vue'
+
+defineOptions({ name: 'QasToggleVisibility' })
+
+const props = defineProps({
+  group: {
+    type: String,
+    default: ''
+  },
+
+  text: {
+    type: String,
+    default: ''
+  },
+
+  uuid: {
+    type: String,
+    default: ''
+  },
+
+  width: {
+    type: String,
+    default: '140px'
+  }
+})
+
+const {
+  isVisible,
+  toggleVisibility
+} = useToggleVisibility({ group: props.group, uuid: props.uuid || uid() })
+
+const icon = computed(() => isVisible.value ? 'sym_r_visibility' : 'sym_r_visibility_off')
+const style = computed(() => ({ width: props.width }))
+</script>
+
+<style lang="scss">
+.qas-toggle-visibility {
+  &__content {
+    flex-grow: 1;
+  }
+
+  &__button {
+    flex-grow: 0;
+  }
+}
+</style>

package/src/components/toggle-visibility/QasToggleVisibility.yml

@@ -0,0 +1,30 @@
+type: component
+
+meta:
+  desc: Componente para ocultar e exibir conteúdo, utilizado para dados sensíveis.
+
+props:
+  group:
+    desc: Propriedade para criar grupos de separação.
+    default: ''
+    type: String
+    examples: ["name", "document", "users"]
+
+  text:
+    desc: Texto a ser oculto/exibido.
+    default: ''
+    type: String
+
+  uuid:
+    desc: É criado um uuid random para cada componente, para que possa ser feito o controle interno, porém é possível sobrescrever por esta propriedade.
+    default: ''
+    type: String
+
+  width:
+    desc: Tamanho do conteúdo a ser oculto/exibido.
+    default: '140px'
+    type: String
+
+slots:
+  default:
+    desc: Slot para inserir conteúdo a ser oculto/exibido.

package/src/composables/private/index.js

@@ -0,0 +1,3 @@
+export { default as useView } from './use-view'
+export { default as useGenerator } from './use-generator'
+export { default as useToggleVisibility } from './use-toggle-visibility'

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

@@ -21,7 +21,7 @@ export const baseProps = {
   },
 
   gutter: {
-    default: Spacing.Lg,
+    default: undefined,
     type: [String, Boolean],
     validator: gutterValidator
   }
@@ -46,13 +46,19 @@ export default function ({ props = {} }) {
   const classes = computed(() => {
     const classesList = ['row']
 
-    if (props.gutter) {
-      classesList.push(`q-col-gutter-${props.gutter}`)
+    if (defaultGutter.value) {
+      classesList.push(`q-col-gutter-${defaultGutter.value}`)
     }
 
     return classesList
   })
 
+  const defaultGutter = computed(() => {
+    if (props.gutter) return props.gutter
+
+    return props.useInline ? Spacing.Md : Spacing.Lg
+  })
+
   /**
    * @function
    * @param {Object} options

package/src/composables/private/use-toggle-visibility.js

@@ -0,0 +1,48 @@
+import { ref, computed } from 'vue'
+
+const visibleState = ref({})
+
+/**
+ * @param {{
+ *  group?: string,
+ *  uuid: string
+ * }}
+ */
+export default function useToggleVisibility ({ group, uuid }) {
+  group = group || 'default'
+
+  visibleState.value[group] = {
+    ...visibleState.value[group],
+    [uuid]: false
+  }
+
+  const isVisible = computed(() => visibleState.value[group]?.[uuid] || false)
+
+  function toggleVisibility () {
+    const item = visibleState.value[group]
+    const lastVisibleItemKey = Object.keys(item).find(key => !!item[key])
+
+    /**
+     * cenário onde esta visível e clicou no mesmo item
+     */
+    if (visibleState.value[group][uuid]) {
+      visibleState.value[group][uuid] = false
+      return
+    }
+
+    /**
+     * cenário onde tem um item visível e clicou em outro item
+     */
+    if (lastVisibleItemKey) {
+      visibleState.value[group][lastVisibleItemKey] = false
+    }
+
+    visibleState.value[group][uuid] = true
+  }
+
+  return {
+    isVisible,
+
+    toggleVisibility
+  }
+}

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

@@ -0,0 +1,186 @@
+import { NotifyError } from '../../plugins'
+import { camelizeFieldsName } from '../../helpers'
+
+import { useView as useViewComposable } from '@bildvitta/composables'
+import { ref, computed, watch, markRaw } from 'vue'
+import { useRouter } from 'vue-router'
+
+export const baseProps = {
+  beforeFetch: {
+    default: null,
+    type: Function
+  },
+
+  errors: {
+    default: () => ({}),
+    type: Object
+  },
+
+  entity: {
+    type: String,
+    required: ''
+  },
+
+  fetching: {
+    type: Boolean
+  },
+
+  fields: {
+    default: () => ({}),
+    type: Object
+  },
+
+  metadata: {
+    default: () => ({}),
+    type: Object
+  },
+
+  url: {
+    default: '',
+    type: String
+  },
+
+  useBoundary: {
+    default: true,
+    type: Boolean
+  },
+
+  useStore: {
+    default: true,
+    type: Boolean
+  }
+}
+
+export const baseEmits = [
+  'update:fields',
+  'update:errors',
+  'update:metadata',
+  'update:fetching'
+]
+
+/**
+ * @param {{
+ *  mode: import('@bildvitta/composables').ViewModeTypes,
+ *  props: baseProps,
+ *  emit: (baseEmits: string) => void,
+ *  slots: import('vue').Slots
+ * }} config
+ */
+export default function useView (config) {
+  const {
+    emit,
+    mode,
+    slots,
+    props
+  } = config
+
+  // composables
+  const router = useRouter()
+  const { viewState } = useViewComposable({ mode })
+
+  // refs
+  const cancelBeforeFetch = ref(false)
+  const hasFetchError = ref(false)
+
+  // constants
+  const fetchErrorMessage = 'Ops… Não conseguimos acessar as informações. Por favor, tente novamente em alguns minutos.'
+
+  // computed
+  const componentClass = computed(() => props.useBoundary && 'container spaced')
+  const hasFooterSlot = computed(() => !!slots.footer)
+  const hasHeaderSlot = computed(() => !!slots.header)
+  const hasFetchErrorSlot = computed(() => !!slots['fetch-error'])
+  const canShowFetchErrorSlot = computed(() => hasFetchErrorSlot.value && hasFetchError.value)
+
+  // watch
+  watch(() => viewState.value.fetching, value => emit('update:fetching', value))
+
+  // functions
+  function errorHandler (error) {
+    const { response } = error
+
+    const status = response?.status
+
+    const redirect = status >= 500
+      ? 'ServerError'
+      : ({ 403: 'Forbidden', 404: 'NotFound' })[status]
+
+    /**
+     * caso exista um desses status será redirecionado sem aparecer o "notify"
+     */
+    if (redirect) {
+      router.replace({ name: redirect })
+
+      return
+    }
+
+    hasFetchError.value = true
+
+    NotifyError(fetchErrorMessage)
+  }
+
+  function setErrors (errors = {}) {
+    viewState.value.errors = markRaw(errors)
+  }
+
+  function setFields (fields = {}) {
+    const camelizedFields = camelizeFieldsName(fields)
+
+    viewState.value.fields = markRaw(camelizedFields)
+  }
+
+  function setMetadata (metadata = {}) {
+    viewState.value.metadata = markRaw(metadata)
+  }
+
+  function setResult (result = {}) {
+    viewState.value.result = result
+  }
+
+  function updateModels (models) {
+    for (const key in models) {
+      if (!models[key]) continue
+
+      emit(`update:${key}`, models[key])
+    }
+  }
+
+  function fetchHandler (payload, resolve) {
+    const hasBeforeFetch = typeof props.beforeFetch === 'function'
+
+    if (hasBeforeFetch && !cancelBeforeFetch.value) {
+      return props.beforeFetch({
+        payload,
+        resolve: payload => resolve(payload),
+        done: () => {
+          cancelBeforeFetch.value = true
+        }
+      })
+    }
+
+    resolve()
+  }
+
+  return {
+    // state
+    viewState,
+
+    // constants
+    fetchErrorMessage,
+
+    // computed
+    componentClass,
+    hasFooterSlot,
+    hasHeaderSlot,
+    canShowFetchErrorSlot,
+
+    // functions
+    errorHandler,
+    fetchHandler,
+    setErrors,
+    setFields,
+    setResult,
+    setMetadata,
+    updateModels
+  }
+}

package/src/mixins/view.js

@@ -56,7 +56,8 @@ export default {
       mx_fields: {},
       mx_metadata: {},
       mx_cancelBeforeFetch: false,
-      mx_isFetching: false
+      mx_isFetching: false,
+      mx_hasFetchError: false
     }
   },
 
@@ -79,8 +80,16 @@ export default {
       return !!(this.$slots.header)
     },
 
+    mx_hasFetchErrorSlot () {
+      return !!(this.$slots['fetch-error'])
+    },
+
     mx_fetchErrorMessage () {
       return 'Ops… Não conseguimos acessar as informações. Por favor, tente novamente em alguns minutos.'
+    },
+
+    mx_canShowFetchErrorSlot () {
+      return this.mx_hasFetchError && this.mx_hasFetchErrorSlot
     }
   },
 
@@ -101,6 +110,8 @@ export default {
         return
       }
 
+      this.mx_hasFetchError = true
+
       this.$qas.error(this.mx_fetchErrorMessage)
     },
 

package/src/vue-plugin.js

@@ -64,6 +64,7 @@ import QasTableGenerator from './components/table-generator/QasTableGenerator.vu
 import QasTabsGenerator from './components/tabs-generator/QasTabsGenerator.vue'
 import QasTextTruncate from './components/text-truncate/QasTextTruncate.vue'
 import QasTimeline from './components/timeline/QasTimeline.vue'
+import QasToggleVisibility from './components/toggle-visibility/QasToggleVisibility.vue'
 import QasTransfer from './components/transfer/QasTransfer.vue'
 import QasTreeGenerator from './components/tree-generator/QasTreeGenerator.vue'
 import QasUploader from './components/uploader/QasUploader.vue'
@@ -72,7 +73,7 @@ import QasWhatsappLink from './components/whatsapp-link/QasWhatsappLink.vue'
 
 import { Notify, Loading, Quasar, Dialog as QuasarDialog } from 'quasar'
 
-import { getAction } from '@bildvitta/store-adapter'
+import { getAction, getGetter } from '@bildvitta/store-adapter'
 
 // Plugins
 import {
@@ -157,6 +158,7 @@ async function install (app) {
   app.component('QasTabsGenerator', QasTabsGenerator)
   app.component('QasTextTruncate', QasTextTruncate)
   app.component('QasTimeline', QasTimeline)
+  app.component('QasToggleVisibility', QasToggleVisibility)
   app.component('QasTransfer', QasTransfer)
   app.component('QasTreeGenerator', QasTreeGenerator)
   app.component('QasUploader', QasUploader)
@@ -176,7 +178,8 @@ async function install (app) {
   app.provide('qas', {
     delete: params => Delete.call(app.config.globalProperties, params),
 
-    getAction: params => getAction.call(app.config.globalProperties, params)
+    getAction: params => getAction.call(app.config.globalProperties, params),
+    getGetter: params => getGetter.call(app.config.globalProperties, params)
   })
 
   app.directive(Test.name, Test)
@@ -251,6 +254,7 @@ export {
   QasTabsGenerator,
   QasTextTruncate,
   QasTimeline,
+  QasToggleVisibility,
   QasTransfer,
   QasTreeGenerator,
   QasUploader,