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

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

@@ -1,175 +1,175 @@
-<template>
-  <div :class="componentClass">
-    <header v-if="hasHeaderSlot">
-      <slot name="header" />
-    </header>
-
-    <slot v-if="canShowFetchErrorSlot" name="fetch-error" />
-
-    <template v-else-if="hasResult">
-      <slot />
-    </template>
-
-    <div v-else-if="!viewState.fetching">
-      <qas-empty-result-text class="q-my-xl" />
-    </div>
-
-    <footer v-if="hasFooterSlot">
-      <slot name="footer" />
-    </footer>
-
-    <q-inner-loading :showing="viewState.fetching">
-      <q-spinner color="grey" size="3em" />
-    </q-inner-loading>
-  </div>
-</template>
-
-<script setup>
-import useView, { baseProps, baseEmits } from '../../composables/private/use-view'
-
-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')
-
-defineOptions({ name: 'QasSingleView' })
-
-const props = defineProps({
-  ...baseProps,
-
-  customId: {
-    default: '',
-    type: [Number, String]
-  },
-
-  result: {
-    default: () => ({}),
-    type: Object
-  }
-})
-
-const emit = defineEmits([
-  ...baseEmits,
-
-  'update:result',
-  'fetch-success',
-  'fetch-error'
-])
-
-const slots = defineSlots()
-
-// globals
-const axios = inject('axios')
-const qas = inject('qas')
-
-// composables
-const route = useRoute()
-
-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)
-
-// 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)
-
-    const { errors, fields, metadata, result } = response.data
-
-    setErrors(errors)
-    setFields(fields)
-    setMetadata(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)
-
-    updateModels({
-      errors: viewState.value.errors,
-      fields: viewState.value.fields,
-      metadata: viewState.value.metadata,
-
-      ...(!props.useStore && { result: viewState.value.result })
-    })
-
-    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>
+<template>
+  <div :class="componentClass">
+    <header v-if="hasHeaderSlot">
+      <slot name="header" />
+    </header>
+
+    <slot v-if="canShowFetchErrorSlot" name="fetch-error" />
+
+    <template v-else-if="hasResult">
+      <slot />
+    </template>
+
+    <div v-else-if="!viewState.fetching">
+      <qas-empty-result-text class="q-my-xl" />
+    </div>
+
+    <footer v-if="hasFooterSlot">
+      <slot name="footer" />
+    </footer>
+
+    <q-inner-loading :showing="viewState.fetching">
+      <q-spinner color="grey" size="3em" />
+    </q-inner-loading>
+  </div>
+</template>
+
+<script setup>
+import useView, { baseProps, baseEmits } from '../../composables/private/use-view'
+
+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')
+
+defineOptions({ name: 'QasSingleView' })
+
+const props = defineProps({
+  ...baseProps,
+
+  customId: {
+    default: '',
+    type: [Number, String]
+  },
+
+  result: {
+    default: () => ({}),
+    type: Object
+  }
+})
+
+const emit = defineEmits([
+  ...baseEmits,
+
+  'update:result',
+  'fetch-success',
+  'fetch-error'
+])
+
+const slots = defineSlots()
+
+// globals
+const axios = inject('axios')
+const qas = inject('qas')
+
+// composables
+const route = useRoute()
+
+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)
+
+// 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)
+
+    const { errors, fields, metadata, result } = response.data
+
+    setErrors(errors)
+    setFields(fields)
+    setMetadata(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)
+
+    updateModels({
+      errors: viewState.value.errors,
+      fields: viewState.value.fields,
+      metadata: viewState.value.metadata,
+
+      ...(!props.useStore && { result: viewState.value.result })
+    })
+
+    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

@@ -1,131 +1,131 @@
-type: component
-
-meta:
-  desc: Componente para C.R.U.D. responsável pela visualização (Read) ou conhecido também como "show".
-
-props:
-  before-fetch:
-    desc: Callback para controlar como funciona o comportamento do fetchSingle.
-    default: null
-    type: Function
-    examples: ['beforeFetch({ payload, resolve, done })']
-
-  custom-id:
-    desc: Por padrão, o componente vai pegar o "id" que vem como parâmetro na url, caso queira que o id seja diferente da url, use esta prop.
-    type: String
-    examples: ['my-custom-id']
-
-  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
-    type: String
-
-  errors:
-    model: true
-    desc: Model de errors, utilizado para recuperar os errors fora do template.
-    default: {}
-    type: Object
-    examples: [v-model:errors="errors"]
-
-  fields:
-    model: true
-    desc: Model de fields, utilizado para recuperar os fields fora do template.
-    default: {}
-    type: Object
-    examples: [v-model:fields="fields"]
-
-  fetching:
-    model: true
-    desc: Model de fetching, utilizado para saber se o componente está fazendo fetching de dados.
-    type: Boolean
-    examples: [v-model:fetching="isFetching"]
-
-  metadata:
-    model: true
-    desc: Model de metadata, utilizado para recuperar os metadata fora do template.
-    default: {}
-    type: Object
-    examples: [v-model:metadata="metadata"]
-
-  result:
-    model: true
-    desc: Model de result, utilizado para recuperar o resultado retornado pelo componente.
-    type: Object
-    examples: [v-model:result="result"]
-
-  url:
-    desc: Envia como parâmetro para a action "fetchSingle" do modulo correspondente a "entity".
-    type: String
-
-  use-boundary:
-    desc: Controla o limite que o FormView terá, quando é "false", a tag pai deixa de ser um "QPage" para ser uma "div" e é removido as classes "container" e "spaced", comumente utilizando quando precisa usar o QasFormView dentro de um dialog.
-    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.'
-
-  header:
-    desc: 'Slot para acessar o header.'
-
-events:
-  '@fetch-success -> function(value)':
-    desc: Dispara quando a action "fetchSingle" é executada com sucesso.
-    params:
-      value:
-        desc: Retorna todos os dados "cru" respondido pelo fetch.
-        type: Object
-
-  '@fetch-error -> function(value)':
-    desc: Dispara quando a action "fetchSingle" cai em uma exceção.
-    params:
-      value:
-        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
-        type: Object
-
-  '@update:result -> function(value)':
-    desc: Dispara quando a action "fetchSingle" é executada com sucesso, é chamado antes do evento "fetch-success".
-    params:
-      value:
-        desc: lista retornada no "fetchSingle".
-        type: Array
-
-  '@update:fields -> function(value)':
-    desc: Dispara quando a action "fetchSingle" é executada com sucesso, é chamado antes do evento "fetch-success".
-    params:
-      value:
-        desc: fields.
-        type: Object
-
-  '@update:errors -> function(value)':
-    desc: Dispara quando a action "fetchSingle" é chamada.
-    params:
-      value:
-        desc: Errors durante o fetch.
-        type: Object
-
-  '@update:metadata -> function(value)':
-    desc: Dispara quando a action "fetchSingle" acontece com sucesso, é chamado antes do evento "fetch-success".
-    params:
-      value:
-        desc: metadata.
-        type: Object
-
-  '@update:fetching -> function(value)':
-    desc: Dispara logo antes da action "fetchSingle" e ao cair no bloco "finally", ou seja, quando começar o fetching e após terminar.
-    params:
-      value:
-        desc: Retorna se está ou não fazendo fetching de dados.
-        type: Boolean
+type: component
+
+meta:
+  desc: Componente para C.R.U.D. responsável pela visualização (Read) ou conhecido também como "show".
+
+props:
+  before-fetch:
+    desc: Callback para controlar como funciona o comportamento do fetchSingle.
+    default: null
+    type: Function
+    examples: ['beforeFetch({ payload, resolve, done })']
+
+  custom-id:
+    desc: Por padrão, o componente vai pegar o "id" que vem como parâmetro na url, caso queira que o id seja diferente da url, use esta prop.
+    type: String
+    examples: ['my-custom-id']
+
+  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
+    type: String
+
+  errors:
+    model: true
+    desc: Model de errors, utilizado para recuperar os errors fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:errors="errors"]
+
+  fields:
+    model: true
+    desc: Model de fields, utilizado para recuperar os fields fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:fields="fields"]
+
+  fetching:
+    model: true
+    desc: Model de fetching, utilizado para saber se o componente está fazendo fetching de dados.
+    type: Boolean
+    examples: [v-model:fetching="isFetching"]
+
+  metadata:
+    model: true
+    desc: Model de metadata, utilizado para recuperar os metadata fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:metadata="metadata"]
+
+  result:
+    model: true
+    desc: Model de result, utilizado para recuperar o resultado retornado pelo componente.
+    type: Object
+    examples: [v-model:result="result"]
+
+  url:
+    desc: Envia como parâmetro para a action "fetchSingle" do modulo correspondente a "entity".
+    type: String
+
+  use-boundary:
+    desc: Controla o limite que o FormView terá, quando é "false", a tag pai deixa de ser um "QPage" para ser uma "div" e é removido as classes "container" e "spaced", comumente utilizando quando precisa usar o QasFormView dentro de um dialog.
+    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.'
+
+  header:
+    desc: 'Slot para acessar o header.'
+
+events:
+  '@fetch-success -> function(value)':
+    desc: Dispara quando a action "fetchSingle" é executada com sucesso.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido pelo fetch.
+        type: Object
+
+  '@fetch-error -> function(value)':
+    desc: Dispara quando a action "fetchSingle" cai em uma exceção.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        type: Object
+
+  '@update:result -> function(value)':
+    desc: Dispara quando a action "fetchSingle" é executada com sucesso, é chamado antes do evento "fetch-success".
+    params:
+      value:
+        desc: lista retornada no "fetchSingle".
+        type: Array
+
+  '@update:fields -> function(value)':
+    desc: Dispara quando a action "fetchSingle" é executada com sucesso, é chamado antes do evento "fetch-success".
+    params:
+      value:
+        desc: fields.
+        type: Object
+
+  '@update:errors -> function(value)':
+    desc: Dispara quando a action "fetchSingle" é chamada.
+    params:
+      value:
+        desc: Errors durante o fetch.
+        type: Object
+
+  '@update:metadata -> function(value)':
+    desc: Dispara quando a action "fetchSingle" acontece com sucesso, é chamado antes do evento "fetch-success".
+    params:
+      value:
+        desc: metadata.
+        type: Object
+
+  '@update:fetching -> function(value)':
+    desc: Dispara logo antes da action "fetchSingle" e ao cair no bloco "finally", ou seja, quando começar o fetching e após terminar.
+    params:
+      value:
+        desc: Retorna se está ou não fazendo fetching de dados.
+        type: Boolean