vuetify eingebunden + erster Versuch Combobox

2019-04-17 15:58:15 +02:00
parent 24642ca1a8
commit 56f4a3f940
1846 changed files with 219701 additions and 53848 deletions
@@ -0,0 +1,121 @@
+import '../../stylus/components/_tables.styl'
+import '../../stylus/components/_data-table.styl'
+
+import DataIterable from '../../mixins/data-iterable'
+
+import Head from './mixins/head'
+import Body from './mixins/body'
+import Foot from './mixins/foot'
+import Progress from './mixins/progress'
+
+import {
+  createSimpleFunctional,
+  getObjectValueByPath
+} from '../../util/helpers'
+
+// Importing does not work properly
+const VTableOverflow = createSimpleFunctional('v-table__overflow')
+
+/* @vue/component */
+export default {
+  name: 'v-data-table',
+
+  mixins: [DataIterable, Head, Body, Foot, Progress],
+
+  props: {
+    headers: {
+      type: Array,
+      default: () => []
+    },
+    headersLength: {
+      type: Number
+    },
+    headerText: {
+      type: String,
+      default: 'text'
+    },
+    headerKey: {
+      type: String,
+      default: null
+    },
+    hideHeaders: Boolean,
+    rowsPerPageText: {
+      type: String,
+      default: '$vuetify.dataTable.rowsPerPageText'
+    },
+    customFilter: {
+      type: Function,
+      default: (items, search, filter, headers) => {
+        search = search.toString().toLowerCase()
+        if (search.trim() === '') return items
+
+        const props = headers.map(h => h.value)
+
+        return items.filter(item => props.some(prop => filter(getObjectValueByPath(item, prop, item[prop]), search)))
+      }
+    }
+  },
+
+  data () {
+    return {
+      actionsClasses: 'v-datatable__actions',
+      actionsRangeControlsClasses: 'v-datatable__actions__range-controls',
+      actionsSelectClasses: 'v-datatable__actions__select',
+      actionsPaginationClasses: 'v-datatable__actions__pagination'
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        'v-datatable v-table': true,
+        'v-datatable--select-all': this.selectAll !== false,
+        ...this.themeClasses
+      }
+    },
+    filteredItems () {
+      return this.filteredItemsImpl(this.headers)
+    },
+    headerColumns () {
+      return this.headersLength || this.headers.length + (this.selectAll !== false)
+    }
+  },
+
+  created () {
+    const firstSortable = this.headers.find(h => (
+      !('sortable' in h) || h.sortable)
+    )
+
+    this.defaultPagination.sortBy = !this.disableInitialSort && firstSortable
+      ? firstSortable.value
+      : null
+
+    this.initPagination()
+  },
+
+  methods: {
+    hasTag (elements, tag) {
+      return Array.isArray(elements) && elements.find(e => e.tag === tag)
+    },
+    genTR (children, data = {}) {
+      return this.$createElement('tr', data, children)
+    }
+  },
+
+  render (h) {
+    const tableOverflow = h(VTableOverflow, {}, [
+      h('table', {
+        'class': this.classes
+      }, [
+        this.genTHead(),
+        this.genTBody(),
+        this.genTFoot()
+      ])
+    ])
+
+    return h('div', [
+      tableOverflow,
+      this.genActionsFooter()
+    ])
+  }
+}