@bildvitta/quasar-ui-asteroid 2.14.0 → 3.0.0-alpha.1

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

@@ -1,23 +1,23 @@
 <template>
-  <component :is="componentTag">
-    <header v-if="hasHeaderSlot">
-      <slot :errors="errors" :fields="fields" :metadata="metadata" name="header" :result="result" />
+  <component :is="mx_componentTag">
+    <header v-if="mx_hasHeaderSlot">
+      <slot :errors="mx_errors" :fields="mx_fields" :metadata="mx_metadata" name="header" :result="result" />
     </header>
 
     <template v-if="hasResult">
-      <slot :errors="errors" :fields="fields" :metadata="metadata" :result="result" />
+      <slot :errors="mx_errors" :fields="mx_fields" :metadata="mx_metadata" :result="result" />
     </template>
 
-    <div v-else-if="!isFetching" class="q-my-xl text-center">
+    <div v-else-if="!mx_isFetching" class="q-my-xl text-center">
       <q-icon class="q-mb-sm text-center" color="grey-6" name="o_search" size="38px" />
       <div class="text-grey-6">Nenhum item encontrado.</div>
     </div>
 
-    <footer v-if="hasFooterSlot">
+    <footer v-if="mx_hasFooterSlot">
       <slot name="footer" />
     </footer>
 
-    <q-inner-loading :showing="isFetching">
+    <q-inner-loading :showing="mx_isFetching">
       <q-spinner color="grey" size="3em" />
     </q-inner-loading>
   </component>
@@ -27,6 +27,8 @@
 import viewMixin from '../../mixins/view'
 
 export default {
+  name: 'QasSingleView',
+
   mixins: [viewMixin],
 
   props: {
@@ -35,12 +37,18 @@ export default {
       type: [Number, String]
     },
 
-    value: {
+    modelValue: {
       default: () => ({}),
       type: Object
     }
   },
 
+  emits: [
+    'update:modelValue',
+    'fetch-success',
+    'fetch-error'
+  ],
+
   computed: {
     hasResult () {
       return !!this.result
@@ -56,12 +64,12 @@ export default {
   },
 
   watch: {
-    $route () {
-      this.fetchSingle()
+    $route (to, from) {
+      to.name === from.name && this.fetchSingle()
     },
 
     result (value) {
-      this.$emit('input', value)
+      this.$emit('update:modelValue', value)
     }
   },
 
@@ -71,22 +79,28 @@ export default {
 
   methods: {
     async fetchSingle () {
-      this.isFetching = true
+      this.mx_isFetching = true
 
       try {
         const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, { id: this.id, url: this.url })
         const { errors, fields, metadata } = response.data
 
-        this.setErrors(errors)
-        this.setFields(fields)
-        this.setMetadata(metadata)
+        this.mx_setErrors(errors)
+        this.mx_setFields(fields)
+        this.mx_setMetadata(metadata)
+
+        this.mx_updateModels({
+          errors: errors,
+          fields: this.mx_fields,
+          metadata: metadata
+        })
 
         this.$emit('fetch-success', response)
       } catch (error) {
-        this.fetchError(error)
+        this.mx_fetchError(error)
         this.$emit('fetch-error', error)
       } finally {
-        this.isFetching = false
+        this.mx_isFetching = false
       }
     }
   }

package/src/components/sortable/QasSortable.vue

@@ -1,25 +1,25 @@
 <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: '',
       type: String
     },
 
-    options: {
+    sortableOptions: {
       default: () => ({ animation: 500 }),
       type: Object
     },
@@ -37,39 +37,51 @@ export default {
     url: {
       default: '',
       type: String
+    },
+
+    sorted: {
+      default: () => [],
+      type: Array
     }
   },
 
+  emits: [
+    'update:sorted',
+    'sort',
+    'success'
+  ],
+
   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())
+      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 +90,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)
     },
 
+    // TODO precisa testar este metodo quando tivermos uma API para teste.
     async replace () {
       Loading.show()
 
@@ -101,21 +114,26 @@ export default {
 
         this.$emit('success', response)
       } catch (error) {
-        this.handleError(error)
+        this.setError(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.results)
+      this.updateSortedModel()
+    },
+
+    updateSortedModel () {
+      return this.$emit('update:sorted', this.sortedList)
     }
   }
 }

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 { scrollOnGrab } 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,
@@ -43,6 +43,23 @@ export default {
     rowKey: {
       default: 'name',
       type: String
+    },
+
+    emptyResultText: {
+      default: '-',
+      type: String
+    },
+
+    useScrollOnGrab: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data () {
+    return {
+      scrollableElement: null,
+      scrollOnGrab: {}
     }
   },
 
@@ -50,7 +67,7 @@ export default {
     attributes () {
       const attributes = {
         columns: this.columnsByFields,
-        data: this.resultsByFields,
+        rows: this.resultsByFields,
         flat: true,
         hideBottom: true,
         pagination: { rowsPerPage: 0 },
@@ -101,7 +118,7 @@ export default {
     },
 
     hasBodySlot () {
-      return !!(this.$slots.body || this.$scopedSlots.body)
+      return !!(this.$slots.body)
     },
 
     hasFields () {
@@ -114,7 +131,7 @@ export default {
       return results.map((result, index) => {
         for (const key in result) {
           result.default = this.results[index]
-          result[key] = humanize(this.fields[key], result[key])
+          result[key] = humanize(this.fields[key], result[key]) || this.emptyResultText
         }
 
         return result
@@ -125,15 +142,71 @@ 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.handleScrollOnGrab()
+    window.addEventListener('resize', this.handleScrollOnGrab)
+  },
+
+  onUnmounted () {
+    this.hasScrollOnGrab && this.scrollOnGrab.destroyEvents()
+
+    window.removeEventListener('resize', this.handleScrollOnGrab)
+  },
+
+  methods: {
+    setScrollOnGrab () {
+      if (this.hasScrollOnGrab) return
+
+      const element = this.$refs.table.$el.querySelector('.q-table__middle.scroll')
+
+      this.scrollOnGrab = scrollOnGrab(element)
+    },
+
+    getTableElement () {
+      return this.$refs.table.$el.querySelector('table')
+    },
+
+    getFullTableWidth () {
+      const tableElemet = this.getTableElement()
+
+      return tableElemet.getBoundingClientRect().width
+    },
+
+    getContainerTableWidth () {
+      const containerElement = this.$refs.table.$el.querySelector('.q-table__middle')
+
+      return containerElement.getBoundingClientRect().width
+    },
+
+    handleScrollOnGrab () {
+      const fullTableWidth = this.getFullTableWidth()
+      const containerTableWidth = this.getContainerTableWidth()
+
+      if (fullTableWidth > containerTableWidth) {
+        this.setScrollOnGrab()
+      } else if (this.hasScrollOnGrab) {
+        this.scrollOnGrab.destroyEvents()
+        this.scrollOnGrab.element.style.cursor = 'auto'
+        this.scrollOnGrab = {}
+      }
     }
   }
 }
 </script>
 
 <style lang="scss">
-.qas-table {
+.qas-table-generator {
   .q-table th {
     font-weight: bold;
   }

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
       }
     },
 
@@ -73,6 +75,16 @@ export default {
       }
 
       return tabs
+    },
+
+    model: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        this.$emit('update:modelValue', value)
+      }
     }
   }
 }

package/src/components/text-truncate/QasTextTruncate.vue

@@ -4,15 +4,10 @@
       <div ref="truncate" :class="truncateTextClass">
         <slot>{{ text }}</slot>
       </div>
-      <div v-if="hasTruncate" class="cursor-pointer text-primary" @click="toggleDialog">{{ seeMoreLabel }}</div>
+      <div v-if="isTruncated" class="cursor-pointer text-primary" @click="toggleDialog">{{ seeMoreLabel }}</div>
     </div>
-    <qas-dialog v-model="showDialog" :cancel="false" :ok="false" v-bind="dialog">
-      <template #header>
-        <div class="row" :class="headerClass">
-          <div v-if="dialogTitle" class="text-bold text-subtitle1">{{ dialogTitle }}</div>
-          <qas-btn v-close-popup dense flat icon="close" rounded />
-        </div>
-      </template>
+
+    <qas-dialog v-model="showDialog" v-bind="defaultDialogProps">
       <template #description>
         <slot>
           <div>{{ text }}</div>
@@ -23,20 +18,20 @@
 </template>
 
 <script>
-import screen from '../../mixins/screen'
-import QasDialog from '../dialog/QasDialog'
-import QasBtn from '../btn/QasBtn'
+import screenMixin from '../../mixins/screen'
+import QasDialog from '../dialog/QasDialog.vue'
 
 export default {
+  name: 'QasTextTruncate',
+
   components: {
-    QasDialog,
-    QasBtn
+    QasDialog
   },
 
-  mixins: [screen],
+  mixins: [screenMixin],
 
   props: {
-    dialog: {
+    dialogProps: {
       type: Object,
       default: () => ({
         persistent: false
@@ -74,15 +69,28 @@ export default {
 
   computed: {
     truncateTextClass () {
-      return (this.hasTruncate || this.$_isSmall) && 'ellipsis q-pr-sm'
+      return (this.isTruncated || this.mx_isSmall) && 'ellipsis q-pr-sm'
     },
 
-    hasTruncate () {
+    isTruncated () {
       return this.textWidth > this.maxPossibleWidth
     },
 
     headerClass () {
       return this.dialogTitle ? 'justify-between' : 'justify-end'
+    },
+
+    defaultDialogProps () {
+      return {
+        cancel: false,
+        ok: false,
+        useCloseIcon: true,
+        ...this.dialogProps,
+        card: {
+          title: this.dialogTitle,
+          description: this.text
+        }
+      }
     }
   },