@bildvitta/quasar-ui-asteroid 3.16.0-beta.3 → 3.16.0-beta.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.16.0-beta.3",
+  "version": "3.16.0-beta.5",
   "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/expansion-item/QasExpansionItem.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="qas-expansion-item" :class="errorClasses">
-    <qas-box class="qas-expansion-item__box">
+  <div ref="expansionItem" class="qas-expansion-item" :class="errorClasses">
+    <component :is="component.is" 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">
+                  <h5 class="col-auto text-h5">
                     {{ props.label }}
                   </h5>
                 </slot>
@@ -18,17 +18,23 @@
                   </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="!isNestedExpansionItem" class="q-my-md" />
 
         <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,7 +43,9 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import QasBox from '../box/QasBox.vue'
+
+import { computed, provide, inject, onMounted, ref } from 'vue'
 
 defineOptions({ name: 'QasExpansionItem' })
 
@@ -67,17 +75,55 @@ const props = defineProps({
   }
 })
 
-const hasError = computed(() => props.error || !!props.errorMessage)
+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 errorClasses = computed(() => ({ 'qas-expansion-item--error': hasError.value }))
 
 const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
+const hasBottomSeparator = computed(() => isNestedExpansionItem && hasNextSibling.value)
+const hasHeaderBottom = computed(() => !!slots['header-bottom'])
+
+// 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: &;
 
+  & + & {
+    margin-top: var(--qas-spacing-lg);
+  }
+
   &--error {
     #{$root}__box {
       border: 2px solid $negative;

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

@@ -28,6 +28,9 @@ 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/single-view/QasSingleView.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :class="mx_componentClass">
-    <header v-if="mx_hasHeaderSlot">
+  <div :class="componentClass">
+    <header v-if="hasHeaderSlot">
       <slot name="header" />
     </header>
 
@@ -8,117 +8,160 @@
       <slot />
     </template>
 
-    <qas-empty-result-text v-else-if="!mx_isFetching" class="q-my-xl" />
+    <qas-empty-result-text v-else-if="!viewState.fetching" class="q-my-xl" />
 
-    <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',
+defineOptions({ name: 'QasSingleView' })
 
-  mixins: [viewMixin],
+const props = defineProps({
+  ...baseProps,
 
-  props: {
-    customId: {
-      default: '',
-      type: [Number, String]
-    },
-
-    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,
+
+  // functions
+  errorHandler,
+  fetchHandler,
+  setErrors,
+  setFields,
+  setMetadata,
+  setResult,
+  updateModels
+} = useView({ emit, props, slots, mode: 'single' })
+
+// 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)
+
+// 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: id.value, url: props.url, ...externalPayload }
+
+    const response = await getAction(payload)
 
-  methods: {
-    async fetchSingle (externalPayload = {}) {
-      this.mx_isFetching = true
+    const { errors, fields, metadata, result } = response.data
 
-      try {
-        const payload = { id: this.id, url: this.url, ...externalPayload }
+    setErrors(errors)
+    setFields(fields)
+    setMetadata(metadata)
 
-        const response = await getAction.call(this, {
-          entity: this.entity,
-          key: 'fetchSingle',
-          payload
-        })
+    /**
+     * result só precisa ser adicionado ao estado se não estiver usando store,
+     * pois com a store é usado o getter.
+     */
+    !props.useStore && setResult(result)
 
-        const { errors, fields, metadata } = response.data
+    updateModels({
+      errors: viewState.value.errors,
+      fields: viewState.value.fields,
+      metadata: viewState.value.metadata,
 
-        this.mx_setErrors(errors)
-        this.mx_setFields(fields)
-        this.mx_setMetadata(metadata)
+      ...(!props.useStore && { result: viewState.value.result })
+    })
 
-        this.mx_updateModels({
-          errors: this.mx_errors,
-          fields: this.mx_fields,
-          metadata: this.mx_metadata
-        })
+    emit('fetch-success', response)
 
-        this.$emit('fetch-success', response)
+    log(`[${props.entity}]:fetchSingle:success`, response)
+  } catch (error) {
+    errorHandler(error)
+    emit('fetch-error', error)
 
-        log(`[${this.entity}]:fetchSingle:success`, response)
-      } catch (error) {
-        this.mx_fetchError(error)
-        this.$emit('fetch-error', error)
+    log(`[${props.entity}]:fetchSingle:error`, error)
+  } finally {
+    viewState.value.fetching = false
+  }
+}
 
-        log(`[${this.entity}]:fetchSingle:error`, error)
-      } finally {
-        this.mx_isFetching = 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,6 +62,11 @@ 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).'

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="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-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,180 @@
+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)
+
+  // 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)
+
+  // 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
+    }
+
+    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,
+
+    // functions
+    errorHandler,
+    fetchHandler,
+    setErrors,
+    setFields,
+    setResult,
+    setMetadata,
+    updateModels
+  }
+}

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,