kdutify 0.16.9-rc.0 → 2.6.1

package/src/components/KDataTable/KEditDialog.js

@@ -1,110 +0,0 @@
-require('../../stylus/components/_small-dialog.styl')
-
-export default {
-  name: 'k-edit-dialog',
-
-  data () {
-    return {
-      isActive: false,
-      isSaving: false
-    }
-  },
-
-  props: {
-    cancelText: {
-      default: 'Cancel'
-    },
-    large: Boolean,
-    lazy: Boolean,
-    saveText: {
-      default: 'Save'
-    },
-    transition: {
-      type: String,
-      default: 'slide-x-reverse-transition'
-    }
-  },
-
-  watch: {
-    isActive (val) {
-      val &&
-        this.$emit('open') &&
-        setTimeout(this.focus, 50) // Give DOM time to paint
-
-      if (!val) {
-        !this.isSaving && this.$emit('cancel')
-        this.isSaving && this.$emit('close')
-        this.isSaving = false
-      }
-    }
-  },
-
-  methods: {
-    cancel () {
-      this.isActive = false
-    },
-    focus () {
-      const input = this.$refs.content.querySelector('input')
-      input && input.focus()
-    },
-    save () {
-      this.isSaving = true
-      this.isActive = false
-      this.$emit('save')
-    },
-    genButton (fn, text) {
-      return this.$createElement('k-btn', {
-        props: {
-          flat: true,
-          color: 'primary',
-          light: true
-        },
-        on: { click: fn }
-      }, text)
-    },
-    genActions () {
-      return this.$createElement('div', {
-        'class': 'small-dialog__actions'
-      }, [
-        this.genButton(this.cancel, this.cancelText),
-        this.genButton(this.save, this.saveText)
-      ])
-    },
-    genContent () {
-      return this.$createElement('div', {
-        on: {
-          keydown: e => {
-            e.keyCode === 27 && this.cancel()
-            e.keyCode === 13 && this.save()
-          }
-        },
-        ref: 'content'
-      }, [this.$slots.input])
-    }
-  },
-
-  render (h) {
-    return h('k-menu', {
-      'class': 'small-dialog',
-      props: {
-        contentClass: 'small-dialog__content',
-        transition: this.transition,
-        origin: 'top right',
-        right: true,
-        value: this.isActive,
-        closeOnContentClick: false,
-        lazy: this.lazy
-      },
-      on: {
-        input: val => (this.isActive = val)
-      }
-    }, [
-      h('a', {
-        domProps: { href: 'javascript:;' },
-        slot: 'activator'
-      }, this.$slots.default),
-      this.genContent(),
-      this.large ? this.genActions() : null
-    ])
-  }
-}

package/src/components/KDataTable/index.js

@@ -1,16 +0,0 @@
-import {
-  createSimpleFunctional
-} from '../../util/helpers'
-
-import KDataTable from './KDataTable'
-import KEditDialog from './KEditDialog'
-
-KDataTable.install = function install (Kdu) {
-  const KTableOverflow = createSimpleFunctional('table__overflow')
-
-  Kdu.component(KDataTable.name, KDataTable)
-  Kdu.component(KEditDialog.name, KEditDialog)
-  Kdu.component('k-table-overflow', KTableOverflow)
-}
-
-export default KDataTable

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

@@ -1,98 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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])])
-    }
-  }
-}