kdutify 0.16.9-rc.0

package/src/components/KDataTable/mixins/body.js

@@ -0,0 +1,98 @@
+import RowExpandTransitionFunctions from '../../transitions/row-expand-transition'
+
+export default {
+  methods: {
+    genTBody () {
+      const children = []
+
+      if (!this.itemsLength) {
+        children.push(this.genEmptyBody(this.noDataText))
+      } else if (!this.filteredItems.length) {
+        children.push(this.genEmptyBody(this.noResultsText))
+      } else {
+        children.push(this.genFilteredItems())
+      }
+
+      return this.$createElement('tbody', children)
+    },
+    genExpandedRow (props) {
+      const children = []
+
+      if (this.isExpanded(props.item)) {
+        const expand = this.$createElement('div', {
+          class: 'datatable__expand-content',
+          key: props.item[this.itemKey]
+        }, this.$scopedSlots.expand(props))
+
+        children.push(expand)
+      }
+
+      const transition = this.$createElement('transition-group', {
+        class: 'datatable__expand-col',
+        attrs: { colspan: '100%' },
+        props: {
+          tag: 'td'
+        },
+        on: RowExpandTransitionFunctions
+      }, children)
+
+      return this.genTR([transition], { class: 'datatable__expand-row' })
+    },
+    createProps (item, index) {
+      const props = { item, index }
+      const key = this.itemKey
+
+      Object.defineProperty(props, 'selected', {
+        get: () => this.selected[item[this.itemKey]],
+        set: (value) => {
+          let selected = this.value.slice()
+          if (value) selected.push(item)
+          else selected = selected.filter(i => i[key] !== item[key])
+          this.$emit('input', selected)
+        }
+      })
+
+      Object.defineProperty(props, 'expanded', {
+        get: () => this.expanded[item[this.itemKey]],
+        set: (value) => {
+          if (!this.expand) {
+            Object.keys(this.expanded).forEach((key) => {
+              this.$set(this.expanded, key, false)
+            })
+          }
+          this.$set(this.expanded, item[this.itemKey], value)
+        }
+      })
+
+      return props
+    },
+    genFilteredItems () {
+      const rows = []
+      this.filteredItems.forEach((item, index) => {
+        const props = this.createProps(item, index)
+        const row = this.$scopedSlots.items
+          ? this.$scopedSlots.items(props)
+          : []
+
+        rows.push(this.needsTR(row)
+          ? this.genTR(row, {
+            attrs: { active: this.isSelected(item) }
+          })
+          : row)
+
+        if (this.$scopedSlots.expand) {
+          const expandRow = this.genExpandedRow(props)
+          rows.push(expandRow)
+        }
+      })
+
+      return rows
+    },
+    genEmptyBody (text) {
+      return this.genTR([this.$createElement('td', {
+        'class': 'text-xs-center',
+        attrs: { colspan: '100%' }
+      }, text)])
+    }
+  }
+}

package/src/components/KDataTable/mixins/foot.js

@@ -0,0 +1,128 @@
+export default {
+  methods: {
+    genPrevIcon () {
+      return this.$createElement('k-btn', {
+        props: {
+          disabled: this.computedPagination.page === 1,
+          icon: true,
+          flat: true,
+          dark: this.dark,
+          light: this.light
+        },
+        on: {
+          click: () => {
+            const page = this.computedPagination.page
+            this.updatePagination({ page: page - 1 })
+          }
+        },
+        attrs: {
+          'aria-label': 'Previous page' // TODO: Localization
+        }
+      }, [this.$createElement('k-icon', 'chevron_left')])
+    },
+    genNextIcon () {
+      const pagination = this.computedPagination
+      const disabled = pagination.rowsPerPage < 0 ||
+        pagination.page * pagination.rowsPerPage >= this.itemsLength ||
+        this.pageStop < 0
+
+      return this.$createElement('k-btn', {
+        props: {
+          disabled,
+          icon: true,
+          flat: true,
+          dark: this.dark,
+          light: this.light
+        },
+        on: {
+          click: () => {
+            const page = this.computedPagination.page
+            this.updatePagination({ page: page + 1 })
+          }
+        },
+        attrs: {
+          'aria-label': 'Next page' // TODO: Localization
+        }
+      }, [this.$createElement('k-icon', 'chevron_right')])
+    },
+    genSelect () {
+      return this.$createElement('div', {
+        'class': 'datatable__actions__select'
+      }, [
+        this.rowsPerPageText,
+        this.$createElement('k-select', {
+          attrs: {
+            'aria-label': this.rowsPerPageText
+          },
+          props: {
+            items: this.rowsPerPageItems,
+            value: this.computedPagination.rowsPerPage,
+            hideDetails: true,
+            auto: true,
+            minWidth: '75px'
+          },
+          on: {
+            input: (val) => {
+              this.updatePagination({
+                page: 1,
+                rowsPerPage: val
+              })
+            }
+          }
+        })
+      ])
+    },
+    genPagination () {
+      let pagination = '–'
+
+      if (this.itemsLength) {
+        const stop = this.itemsLength < this.pageStop || this.pageStop < 0
+          ? this.itemsLength
+          : this.pageStop
+
+        pagination = this.$scopedSlots.pageText
+          ? this.$scopedSlots.pageText({
+            pageStart: this.pageStart + 1,
+            pageStop: stop,
+            itemsLength: this.itemsLength
+          })
+          : `${this.pageStart + 1}-${stop} of ${this.itemsLength}`
+      }
+
+      return this.$createElement('div', {
+        'class': 'datatable__actions__pagination'
+      }, [pagination])
+    },
+    genActions () {
+      return [this.$createElement('div', {
+        'class': 'datatable__actions'
+      }, [
+        this.genSelect(),
+        this.genPagination(),
+        this.genPrevIcon(),
+        this.genNextIcon()
+      ])]
+    },
+    genTFoot () {
+      const children = []
+
+      if (this.$slots.footer) {
+        const footer = this.$slots.footer
+        const row = this.needsTR(footer) ? this.genTR(footer) : footer
+
+        children.push(row)
+      }
+
+      if (!this.hideActions) {
+        children.push(this.genTR([
+          this.$createElement('td', {
+            attrs: { colspan: '100%' }
+          }, this.genActions())
+        ]))
+      }
+
+      if (!children.length) return null
+      return this.$createElement('tfoot', children)
+    }
+  }
+}

package/src/components/KDataTable/mixins/head.js

@@ -0,0 +1,119 @@
+export default {
+  methods: {
+    genTHead () {
+      if (this.hideHeaders) return // Exit Early since no headers are needed.
+
+      let children = []
+
+      if (this.$scopedSlots.headers) {
+        const row = this.$scopedSlots.headers({
+          headers: this.headers,
+          indeterminate: this.indeterminate,
+          all: this.all
+        })
+
+        children = this.needsTR(row) ? this.genTR(row) : row
+      } else {
+        const row = this.headers.map(o => this.genHeader(o))
+        const checkbox = this.$createElement('k-checkbox', {
+          props: {
+            dark: this.dark,
+            light: this.light,
+            color: this.selectAll === true ? '' : this.selectAll,
+            hideDetails: true,
+            inputValue: this.all,
+            indeterminate: this.indeterminate
+          },
+          on: { change: this.toggle }
+        })
+
+        this.hasSelectAll && row.unshift(this.$createElement('th', [checkbox]))
+
+        children = this.genTR(row)
+      }
+
+      return this.$createElement('thead', [children])
+    },
+    genHeader (header) {
+      const array = [
+        this.$scopedSlots.headerCell
+          ? this.$scopedSlots.headerCell({ header })
+          : header[this.headerText]
+      ]
+
+      return this.$createElement('th', ...this.genHeaderData(header, array))
+    },
+    genHeaderData (header, children) {
+      const classes = ['column']
+      const data = {
+        attrs: {
+          role: 'columnheader',
+          scope: 'col',
+          'aria-label': header[this.headerText] || '',
+          'aria-sort': 'none'
+        }
+      }
+
+      if ('sortable' in header && header.sortable || !('sortable' in header)) {
+        this.genHeaderSortingData(header, children, data, classes)
+      } else {
+        data.attrs['aria-label'] += ': Not sorted.' // TODO: Localization
+      }
+
+      classes.push(`text-xs-${header.align || 'right'}`)
+      if (Array.isArray(header.class)) {
+        classes.push(...header.class)
+      } else if (header.class) {
+        classes.push(header.class)
+      }
+      data.class = classes
+
+      return [data, children]
+    },
+    genHeaderSortingData (header, children, data, classes) {
+      if (!('value' in header)) {
+        console.warn('Data table headers must have a value property that corresponds to a value in the k-model array')
+      }
+
+      data.attrs.tabIndex = 0
+      data.on = {
+        click: () => {
+          this.expanded = []
+          this.sort(header.value)
+        },
+        keydown: e => {
+          // check for space
+          if (e.keyCode === 32) {
+            e.preventDefault()
+            this.sort(header.value)
+          }
+        }
+      }
+
+      classes.push('sortable')
+      const icon = this.$createElement('k-icon', { attrs: { 'aria-hidden': true } }, 'arrow_upward')
+      if (header.align && header.align === 'left') {
+        children.push(icon)
+      } else {
+        children.unshift(icon)
+      }
+
+      const pagination = this.computedPagination
+      const beingSorted = pagination.sortBy === header.value
+      if (beingSorted) {
+        classes.push('active')
+        if (pagination.descending) {
+          classes.push('desc')
+          data.attrs['aria-sort'] = 'descending'
+          data.attrs['aria-label'] += ': Sorted descending. Activate to remove sorting.' // TODO: Localization
+        } else {
+          classes.push('asc')
+          data.attrs['aria-sort'] = 'ascending'
+          data.attrs['aria-label'] += ': Sorted ascending. Activate to sort descending.' // TODO: Localization
+        }
+      } else {
+        data.attrs['aria-label'] += ': Not sorted. Activate to sort ascending.' // TODO: Localization
+      }
+    }
+  }
+}

package/src/components/KDataTable/mixins/progress.js

@@ -0,0 +1,16 @@
+export default {
+  methods: {
+    genTProgress () {
+      const col = this.$createElement('th', {
+        staticClass: 'column',
+        attrs: {
+          colspan: '100%'
+        }
+      }, [this.genProgress()])
+
+      return this.$createElement('thead', {
+        staticClass: 'datatable__progress'
+      }, [this.genTR([col])])
+    }
+  }
+}