@bildvitta/quasar-ui-asteroid 2.16.0 → 3.0.0-alpha.2

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

@@ -0,0 +1,116 @@
+type: component
+
+meta:
+  desc: Componente para C.R.U.D. responsável pela visualização (Read) ou conhecido também como "show".
+
+props:
+  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
+
+  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']
+
+  dialog:
+    desc: Este componente pode ser utilizado dentro de um dialog, neste caso o componente pai não pode ser um "QPage" e sim uma "div", esta prop cuida disto.
+    type: Boolean
+
+  url:
+    desc: Envia como parâmetro para a action "fetchSingle" do modulo correspondente a "entity".
+    type: String
+
+  result:
+    model: true
+    desc: Model de result, utilizado para recuperar o resultado retornado pelo componente.
+    type: Object
+    examples: [v-model:result="result"]
+
+  fields:
+    model: true
+    desc: Model de fields, utilizado para recuperar os fields fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:fields="fields"]
+
+  errors:
+    model: true
+    desc: Model de errors, utilizado para recuperar os errors fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:errors="errors"]
+
+  metadata:
+    model: true
+    desc: Model de metadata, utilizado para recuperar os metadata fora do template.
+    default: {}
+    type: Object
+    examples: [v-model:metadata="metadata"]
+
+  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"]
+
+slots:
+  header:
+    desc: 'Slot para acessar o header.'
+
+  default:
+    desc: 'Slot para ter o conteúdo principal (dentro do main).'
+
+  footer:
+    desc: 'Slot para acessar o footer.'
+
+events:
+  '@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
+
+  '@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

package/src/components/sortable/QasSortable.vue

@@ -1,30 +1,31 @@
 <template>
-  <component :is="tag" ref="items" v-bind="$attrs" v-on="$listeners">
-    <slot :sorted="sorted" />
+  <component :is="tag" ref="sortableItems">
+    <slot />
   </component>
 </template>
 
 <script>
-import { cloneDeep, get } from 'lodash'
-import { Loading } from 'quasar'
-import { NotifyError } from '../../plugins'
+import { Loading, extend } from 'quasar'
 import Sortable from 'sortablejs'
 
-let sortable = null
+import { NotifyError } from '../../plugins'
 
 export default {
+  name: 'QasSortable',
+
   props: {
     entity: {
       default: '',
+      required: true,
       type: String
     },
 
-    options: {
+    sortableOptions: {
       default: () => ({ animation: 500 }),
       type: Object
     },
 
-    results: {
+    list: {
       default: () => [],
       type: Array
     },
@@ -37,39 +38,52 @@ export default {
     url: {
       default: '',
       type: String
+    },
+
+    sorted: {
+      default: () => [],
+      type: Array
     }
   },
 
+  emits: [
+    'update:sorted',
+    'sort',
+    'success',
+    'error'
+  ],
+
   data () {
     return {
-      sorted: null
+      sortable: null,
+      sortedList: null
     }
   },
 
   computed: {
     identifiers () {
-      return this.sorted.map(({ id }) => id)
+      return this.sortedList.map(({ id }) => id)
     }
   },
 
   watch: {
-    options (value) {
-      sortable.options = { ...sortable.options, ...value }
+    sortableOptions (value) {
+      this.sortable.options = { ...this.sortable.options, ...value }
     },
 
-    results (value) {
-      this.updateValue(value)
-      sortable.sort(sortable.toArray())
+    list (value) {
+      this.setSortedValue(value)
+      this.sortable.sort(this.sortable.toArray())
     }
   },
 
   created () {
-    this.updateValue()
+    this.setSortedValue()
   },
 
-  mounted () {
-    sortable = new Sortable(this.$refs.items, {
-      ...this.options,
+  async mounted () {
+    this.sortable = new Sortable(this.$refs.sortableItems, {
+      ...this.sortableOptions,
 
       onUpdate: event => {
         this.updateOrder(event)
@@ -78,18 +92,19 @@ export default {
     })
   },
 
-  beforeDestroy () {
-    sortable.destroy()
+  unmounted () {
+    this.sortable.destroy()
   },
 
   methods: {
-    handleError (error) {
+    setError (error) {
       const { response } = error
-      const exception = get(response, 'data.exception') || error.message
+      const exception = response?.data?.exception || error.message
 
-      NotifyError('Ops! Erro ao ordernar itens.', exception)
+      NotifyError('Ops! Erro ao salvar ordenação.', exception)
     },
 
+    // TODO precisa testar este método quando tivermos uma API para teste.
     async replace () {
       Loading.show()
 
@@ -101,21 +116,27 @@ export default {
 
         this.$emit('success', response)
       } catch (error) {
-        this.handleError(error)
+        this.setError(error)
+        this.$emit('error', error)
       } finally {
         Loading.hide()
       }
     },
 
-    updateOrder ({ oldIndex, newIndex }) {
-      const deleted = this.sorted.splice(oldIndex, 1)
-      this.sorted.splice(newIndex, 0, deleted[0])
+    updateOrder ({ newIndex, oldIndex }) {
+      const deleted = this.sortedList.splice(oldIndex, 1)
+      this.sortedList.splice(newIndex, 0, deleted[0])
 
       this.replace()
     },
 
-    updateValue (value) {
-      this.sorted = cloneDeep(value || this.results)
+    setSortedValue (value) {
+      this.sortedList = extend(true, [], value || this.list)
+      this.updateSortedModel()
+    },
+
+    updateSortedModel () {
+      return this.$emit('update:sorted', this.sortedList)
     }
   }
 }

package/src/components/sortable/QasSortable.yml

@@ -0,0 +1,65 @@
+type: component
+
+meta:
+  desc: Componente para reordenar items em uma lista e salvar após isto.
+
+props:
+  entity:
+    desc: Entidade da store que para salvar os items após reordenar a lista.
+    required: true
+    type: String
+
+  sortable-options:
+    desc: Opções do "sortablejs" (https://github.com/SortableJS/Sortable#options).
+    default: { animation: 500 }
+    type: Object
+
+  list:
+    desc: Lista que vai ser reordenada.
+    default: []
+    type: Array
+
+  tag:
+    desc: Tag do componente pai.
+    default: div
+    type: String
+
+  url:
+    desc: Parâmetro enviado para a action "replace".
+    type: String
+
+  sorted:
+    desc: Model da lista reordenada
+    default: []
+    type: Array
+    examples: [v-model:sorted="fields"]
+    model: true
+
+slots:
+  default:
+    desc: Slot para adicionar os items que serão reordenados.
+
+events:
+  '@update:sorted -> function(value)':
+    desc: Dispara no created e toda vez que a prop "list" muda, usado para o v-model:sorted.
+    params:
+      value:
+        desc: Lista contendo nova ordenação.
+        type: Array
+
+  '@sort -> function(value)':
+    desc: Dispara toda vez que acontece uma nova ordenação.
+
+  '@success -> function(value)':
+    desc: Dispara toda vez que salva com sucesso a nova ordenação.
+    params:
+      value:
+        desc: fields.
+        type: Object
+
+  '@error -> function(value)':
+    desc: Dispara toda vez que acontece algum erro ao salvar a nova ordenação.
+    params:
+      value:
+        desc: fields.
+        type: Object

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

@@ -1,22 +1,27 @@
 <template>
-  <q-table class="bg-transparent qas-table" :class="tableClasses" v-bind="attributes">
-    <template v-for="(slot, key) in $scopedSlots" #[key]="context">
-      <slot v-if="hasBodySlot" name="body" :props="context" />
-
-      <q-td v-else :key="key">
-        <slot :name="key" v-bind="context" />
-      </q-td>
-    </template>
-  </q-table>
+  <qas-box class="q-mb-xl q-px-lg q-py-md">
+    <q-table ref="table" class="bg-transparent qas-table-generator" :class="tableClass" v-bind="attributes">
+      <template v-for="(_, name) in $slots" #[name]="context">
+        <slot v-if="hasBodySlot" name="body" :props="context" />
+
+        <q-td v-else :key="name">
+          <slot :name="name" v-bind="context || {}" />
+        </q-td>
+      </template>
+    </q-table>
+  </qas-box>
 </template>
 
 <script>
 import { extend } from 'quasar'
 import { humanize } from '../../helpers/filters'
-import screen from '../../mixins/screen'
+import { setScrollOnGrab } from '../../helpers'
+import screenMixin from '../../mixins/screen'
 
 export default {
-  mixins: [screen],
+  name: 'QasTableGenerator',
+
+  mixins: [screenMixin],
 
   props: {
     columns: {
@@ -29,11 +34,6 @@ export default {
       type: [Array, Object]
     },
 
-    order: {
-      default: () => [],
-      type: Array
-    },
-
     results: {
       default: () => [],
       required: true,
@@ -48,6 +48,20 @@ export default {
     emptyResultText: {
       default: '-',
       type: String
+    },
+
+    useScrollOnGrab: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data () {
+    return {
+      scrollableElement: null,
+      scrollOnGrab: {},
+      elementToObserve: null,
+      resizeObserver: null
     }
   },
 
@@ -55,7 +69,7 @@ export default {
     attributes () {
       const attributes = {
         columns: this.columnsByFields,
-        data: this.resultsByFields,
+        rows: this.resultsByFields,
         flat: true,
         hideBottom: true,
         pagination: { rowsPerPage: 0 },
@@ -106,7 +120,11 @@ export default {
     },
 
     hasBodySlot () {
-      return !!(this.$slots.body || this.$scopedSlots.body)
+      return !!this.$slots.body
+    },
+
+    hasTbodySlot () {
+      return !!this.$slots.tbody
     },
 
     hasFields () {
@@ -130,15 +148,88 @@ export default {
       return this.results.length
     },
 
-    tableClasses () {
-      return this.$_isSmall && 'qas-table--mobile'
+    tableClass () {
+      return this.mx_isSmall && 'qas-table-generator--mobile'
+    },
+
+    hasScrollOnGrab () {
+      return !!Object.keys(this.scrollOnGrab).length
+    }
+  },
+
+  mounted () {
+    if (!this.useScrollOnGrab) return
+
+    this.setObserver()
+    window.addEventListener('resize', this.handleScrollOnGrab)
+  },
+
+  onUnmounted () {
+    if (!this.hasScrollOnGrab) return
+
+    this.destroyObserver()
+    this.scrollOnGrab.destroyEvents()
+    window.removeEventListener('resize', this.handleScrollOnGrab)
+  },
+
+  methods: {
+    initializeScrollOnGrab () {
+      if (this.hasScrollOnGrab) return
+
+      const element = this.getTableElementComponent().querySelector('.q-table__middle.scroll')
+
+      this.scrollOnGrab = setScrollOnGrab(element)
+    },
+
+    getTableElementComponent () {
+      return this.$refs?.table?.$el
+    },
+
+    getTableElement () {
+      return this.getTableElementComponent()?.querySelector('table')
+    },
+
+    getFullTableWidth () {
+      const tableElemet = this.getTableElement()
+      return tableElemet?.getBoundingClientRect?.()?.width
+    },
+
+    getContainerTableWidth () {
+      const containerElement = this.getTableElementComponent()?.querySelector('.q-table__middle')
+      return containerElement?.getBoundingClientRect?.()?.width
+    },
+
+    handleScrollOnGrab () {
+      const fullTableWidth = this.getFullTableWidth()
+      const containerTableWidth = this.getContainerTableWidth()
+
+      if (fullTableWidth > containerTableWidth) {
+        this.initializeScrollOnGrab()
+      } else if (this.hasScrollOnGrab) {
+        this.scrollOnGrab.destroyEvents()
+        this.scrollOnGrab.element.style.cursor = 'auto'
+        this.scrollOnGrab = {}
+      }
+    },
+
+    setObserver () {
+      this.elementToObserve = this.getTableElement()
+      this.resizeObserver = new ResizeObserver(entries => {
+        entries.forEach(() => this.handleScrollOnGrab())
+      })
+
+      this.resizeObserver.observe(this.elementToObserve)
+    },
+
+    destroyObserver () {
+      this.resizeObserver.unobserve(this.elementToObserve)
     }
   }
 }
 </script>
 
 <style lang="scss">
-.qas-table {
+.qas-table-generator {
   .q-table th {
     font-weight: bold;
   }

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

@@ -0,0 +1,46 @@
+type: component
+
+meta:
+  desc: Componente para criação de tabela dinâmica usando o `QTable` do quasar.
+
+props:
+  columns:
+    desc: Colunas que vão ter na tabela.
+    default: []
+    type: Array
+
+  fields:
+    desc: Lista de field contendo informações necessárias para a criação da tabela.
+    default: {}
+    type: Object
+    examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
+
+  results:
+    desc: Lista com resultados para serem mostrados na tabela.
+    default: {}
+    type: Object
+    examples: ["{ name: { dense: true, onClick: () => alert('Estou sendo clicado') } }"]
+
+  row-key:
+    desc: Propriedade de cada linha que define a chave única de cada linha.
+    default: name
+    type: String
+
+  empty-result-text:
+    desc: Quando uma célula da tabela está vazia, esta prop define qual será o valor padrão.
+    default: '-'
+    type: String
+
+  use-scroll-on-grab:
+    desc: Adiciona scroll pelo mouse ao arrastar tabela em todas as telas (Celular, Desktop).
+    default: true
+    type: Boolean
+
+slots:
+  body:
+    desc: Acesso direto dentro do `tbody`.
+    scope:
+      row:
+        desc: Payload da linha da tabela.
+        default: {}
+        type: Object

package/src/components/tabs-generator/QasTabsGenerator.vue

@@ -1,9 +1,9 @@
 <template>
-  <q-tabs v-model="currentTab" v-bind="$attrs" :active-color="activeColor" :class="bgColorClass" :indicator-color="indicatorColor" outside-arrows v-on="$listeners">
+  <q-tabs v-model="model" :active-color="activeColor" :indicator-color="indicatorColor" outside-arrows>
     <slot v-for="(tab, key) in formattedTabs" :item="tab" :name="`tab-${tab.value}`">
-      <q-tab :key="key" v-bind="tab" :class="colorClass" :label="tab.label" :name="key">
+      <q-tab :key="key" v-bind="tab" :class="tabClass" :label="tab.label" :name="key">
         <slot :item="tab" :name="`tab-after-${tab.value}`">
-          <q-badge v-if="counters[key]" color="negative" floating :label="counters[key]" />
+          <q-badge v-if="counters[key]" :label="counters[key]" v-bind="defaultCounterProps" />
         </slot>
       </q-tab>
     </slot>
@@ -14,20 +14,17 @@
 import { extend } from 'quasar'
 
 export default {
+  name: 'QasTabsGenerator',
+
   props: {
     activeColor: {
       default: 'primary',
       type: String
     },
 
-    bgColorClass: {
-      default: 'transparent',
-      type: String
-    },
-
-    colorClass: {
-      default: 'text-primary',
-      type: String
+    counterProps: {
+      default: () => ({}),
+      type: Object
     },
 
     counters: {
@@ -40,26 +37,31 @@ export default {
       type: String
     },
 
-    tabs: {
-      default: () => ({}),
-      type: Object,
-      required: true
+    modelValue: {
+      default: '',
+      type: String
     },
 
-    value: {
-      default: '',
+    tabClass: {
+      default: 'text-primary',
       type: String
+    },
+
+    tabs: {
+      default: () => ({}),
+      required: true,
+      type: Object
     }
   },
 
-  computed: {
-    currentTab: {
-      get () {
-        return this.value
-      },
+  emits: ['update:modelValue'],
 
-      set (value) {
-        this.$emit('input', value)
+  computed: {
+    defaultCounterProps () {
+      return {
+        color: 'negative',
+        floating: true,
+        ...this.counterProps
       }
     },
 
@@ -68,11 +70,21 @@ export default {
 
       for (const key in tabs) {
         if (typeof tabs[key] === 'string') {
-          tabs[key] = { label: tabs[key] }
+          tabs[key] = { label: tabs[key], value: key }
         }
       }
 
       return tabs
+    },
+
+    model: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        this.$emit('update:modelValue', value)
+      }
     }
   }
 }