kdutify 0.16.9-rc.0

package/src/components/KCheckbox/KCheckbox.js

@@ -0,0 +1,92 @@
+require('../../stylus/components/_input-groups.styl')
+require('../../stylus/components/_selection-controls.styl')
+
+import KIcon from '../KIcon'
+import { KFadeTransition } from '../transitions'
+import Rippleable from '../../mixins/rippleable'
+import Selectable from '../../mixins/selectable'
+
+export default {
+  name: 'k-checkbox',
+
+  components: {
+    KFadeTransition,
+    KIcon
+  },
+
+  mixins: [Rippleable, Selectable],
+
+  data () {
+    return {
+      inputIndeterminate: this.indeterminate
+    }
+  },
+
+  props: {
+    indeterminate: Boolean
+  },
+
+  computed: {
+    classes () {
+      const classes = {
+        'checkbox': true,
+        'input-group--selection-controls': true,
+        'input-group--active': this.isActive
+      }
+
+      if (this.hasError) {
+        classes['error--text'] = true
+      } else {
+        return this.addTextColorClassChecks(classes)
+      }
+
+      return classes
+    },
+    icon () {
+      if (this.inputIndeterminate) {
+        return 'indeterminate_check_box'
+      } else if (this.isActive) {
+        return 'check_box'
+      } else {
+        return 'check_box_outline_blank'
+      }
+    }
+  },
+
+  methods: {
+    groupFocus (e) {
+      this.isFocused = true
+      this.$emit('focus', e)
+    },
+    groupBlur (e) {
+      this.isFocused = false
+      this.tabFocused = false
+      this.$emit('blur', this.inputValue)
+    }
+  },
+
+  render (h) {
+    const transition = h('k-fade-transition', [
+      h('k-icon', {
+        staticClass: 'icon--selection-control',
+        'class': {
+          'icon--checkbox': this.icon === 'check_box'
+        },
+        key: this.icon
+      }, this.icon)
+    ])
+
+    const data = {
+      attrs: {
+        tabindex: this.disabled
+          ? -1
+          : this.internalTabIndex || this.tabindex,
+        role: 'checkbox',
+        'aria-checked': this.inputIndeterminate && 'mixed' || this.isActive && 'true' || 'false',
+        'aria-label': this.label
+      }
+    }
+
+    return this.genInputGroup([transition, this.genRipple()], data)
+  }
+}

package/src/components/KCheckbox/index.js

@@ -0,0 +1,7 @@
+import KCheckbox from './KCheckbox'
+
+KCheckbox.install = function install (Kdu) {
+  Kdu.component(KCheckbox.name, KCheckbox)
+}
+
+export default KCheckbox

package/src/components/KChip/KChip.js

@@ -0,0 +1,83 @@
+require('../../stylus/components/_chips.styl')
+
+import KIcon from '../KIcon'
+import Colorable from '../../mixins/colorable'
+import Themeable from '../../mixins/themeable'
+import Toggleable from '../../mixins/toggleable'
+
+export default {
+  name: 'k-chip',
+
+  components: {
+    KIcon
+  },
+
+  mixins: [Colorable, Themeable, Toggleable],
+
+  props: {
+    close: Boolean,
+    disabled: Boolean,
+    label: Boolean,
+    outline: Boolean,
+    // Used for selects/tagging
+    selected: Boolean,
+    small: Boolean,
+    textColor: String,
+    value: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  computed: {
+    classes () {
+      const classes = this.addBackgroundColorClassChecks({
+        'chip': true,
+        'chip--disabled': this.disabled,
+        'chip--selected': this.selected,
+        'chip--label': this.label,
+        'chip--outline': this.outline,
+        'chip--small': this.small,
+        'chip--removable': this.close,
+        'theme--light': this.light,
+        'theme--dark': this.dark
+      })
+
+      return (this.textColor || this.outline)
+        ? this.addTextColorClassChecks(classes, this.textColor ? 'textColor' : 'color')
+        : classes
+    }
+  },
+
+  render (h) {
+    const children = [this.$slots.default]
+    const data = {
+      'class': this.classes,
+      attrs: { tabindex: this.disabled ? -1 : 0 },
+      directives: [{
+        name: 'show',
+        value: this.isActive
+      }],
+      on: this.$listeners
+    }
+
+    if (this.close) {
+      const data = {
+        staticClass: 'chip__close',
+        on: {
+          click: e => {
+            e.stopPropagation()
+
+            this.$emit('input', false)
+          }
+        }
+      }
+
+      children.push(h('div', data, [
+        h(KIcon, { props: { right: true } }, 'cancel')
+      ]))
+    }
+
+    return h('span', data, children)
+  }
+}

package/src/components/KChip/index.js

@@ -0,0 +1,7 @@
+import KChip from './KChip'
+
+KChip.install = function install (Kdu) {
+  Kdu.component(KChip.name, KChip)
+}
+
+export default KChip

package/src/components/KDataTable/KDataTable.js

@@ -0,0 +1,346 @@
+require('../../stylus/components/_tables.styl')
+require('../../stylus/components/_data-table.styl')
+
+import KBtn from '../KBtn'
+import KIcon from '../KIcon'
+import KProgressLinear from '../KProgressLinear'
+import KSelect from '../KSelect'
+
+import Filterable from '../../mixins/filterable'
+import Themeable from '../../mixins/themeable'
+import Loadable from '../../mixins/loadable'
+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'
+
+export default {
+  name: 'k-data-table',
+
+  components: {
+    KBtn,
+    KIcon,
+    KProgressLinear,
+    KSelect,
+    // Importing does not work properly
+    'k-table-overflow': createSimpleFunctional('table__overflow')
+  },
+
+  data () {
+    return {
+      all: false,
+      searchLength: 0,
+      defaultPagination: {
+        descending: false,
+        page: 1,
+        rowsPerPage: 5,
+        sortBy: null,
+        totalItems: 0
+      },
+      expanded: {}
+    }
+  },
+
+  mixins: [Head, Body, Filterable, Foot, Loadable, Progress, Themeable],
+
+  props: {
+    expand: {
+      type: Boolean
+    },
+    headers: {
+      type: Array,
+      default: () => []
+    },
+    headerText: {
+      type: String,
+      default: 'text'
+    },
+    hideActions: Boolean,
+    hideHeaders: Boolean,
+    mustSort: Boolean,
+    noResultsText: {
+      type: String,
+      default: 'No matching records found'
+    },
+    rowsPerPageItems: {
+      type: Array,
+      default () {
+        return [
+          5,
+          10,
+          25,
+          { text: 'All', value: -1 }
+        ]
+      }
+    },
+    rowsPerPageText: {
+      type: String,
+      default: 'Rows per page:'
+    },
+    selectAll: [Boolean, String],
+    search: {
+      required: false
+    },
+    filter: {
+      type: Function,
+      default: (val, search) => {
+        return val !== null &&
+          ['undefined', 'boolean'].indexOf(typeof val) === -1 &&
+          val.toString().toLowerCase().indexOf(search) !== -1
+      }
+    },
+    customFilter: {
+      type: Function,
+      default: (items, search, filter) => {
+        search = search.toString().toLowerCase()
+        return items.filter(i => (
+          Object.keys(i).some(j => filter(i[j], search))
+        ))
+      }
+    },
+    customSort: {
+      type: Function,
+      default: (items, index, isDescending) => {
+        if (index === null) return items
+
+        return items.sort((a, b) => {
+          let sortA = getObjectValueByPath(a, index)
+          let sortB = getObjectValueByPath(b, index)
+
+          if (isDescending) {
+            [sortA, sortB] = [sortB, sortA]
+          }
+
+          // Check if both are numbers
+          if (!isNaN(sortA) && !isNaN(sortB)) {
+            return sortA - sortB
+          }
+
+          // Check if both cannot be evaluated
+          if (sortA === null && sortB === null) {
+            return 0
+          }
+
+          [sortA, sortB] = [sortA, sortB]
+            .map(s => (
+              (s || '').toString().toLocaleLowerCase()
+            ))
+
+          if (sortA > sortB) return 1
+          if (sortA < sortB) return -1
+
+          return 0
+        })
+      }
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    items: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    totalItems: {
+      type: Number,
+      default: null
+    },
+    itemKey: {
+      type: String,
+      default: 'id'
+    },
+    pagination: {
+      type: Object,
+      default: () => {}
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        'datatable table': true,
+        'datatable--select-all': this.selectAll !== false,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      }
+    },
+    computedPagination () {
+      return this.hasPagination
+        ? this.pagination
+        : this.defaultPagination
+    },
+    hasPagination () {
+      const pagination = this.pagination || {}
+
+      return Object.keys(pagination).length > 0
+    },
+    hasSelectAll () {
+      return this.selectAll !== undefined && this.selectAll !== false
+    },
+    itemsLength () {
+      if (this.search) return this.searchLength
+      return this.totalItems || this.items.length
+    },
+    indeterminate () {
+      return this.hasSelectAll && this.someItems && !this.everyItem
+    },
+    everyItem () {
+      return this.filteredItems.length &&
+        this.filteredItems.every(i => this.isSelected(i))
+    },
+    someItems () {
+      return this.filteredItems.some(i => this.isSelected(i))
+    },
+    getPage () {
+      const { rowsPerPage } = this.computedPagination
+
+      return rowsPerPage === Object(rowsPerPage)
+        ? rowsPerPage.value
+        : rowsPerPage
+    },
+    pageStart () {
+      return this.getPage === -1
+        ? 0
+        : (this.computedPagination.page - 1) * this.getPage
+    },
+    pageStop () {
+      return this.getPage === -1
+        ? this.itemsLength
+        : this.computedPagination.page * this.getPage
+    },
+    filteredItems () {
+      if (this.totalItems) return this.items
+
+      let items = this.items.slice()
+      const hasSearch = typeof this.search !== 'undefined' &&
+        this.search !== null
+
+      if (hasSearch) {
+        items = this.customFilter(items, this.search, this.filter)
+        this.searchLength = items.length
+      }
+
+      items = this.customSort(
+        items,
+        this.computedPagination.sortBy,
+        this.computedPagination.descending
+      )
+
+      return this.hideActions &&
+        !this.hasPagination
+        ? items
+        : items.slice(this.pageStart, this.pageStop)
+    },
+    selected () {
+      const selected = {}
+      this.value.forEach(i => (selected[i[this.itemKey]] = true))
+      return selected
+    }
+  },
+
+  watch: {
+    indeterminate (val) {
+      if (val) this.all = true
+    },
+    someItems (val) {
+      if (!val) this.all = false
+    },
+    search () {
+      this.updatePagination({ page: 1, totalItems: this.itemsLength })
+    },
+    everyItem (val) {
+      if (val) this.all = true
+    }
+  },
+
+  methods: {
+    updatePagination (val) {
+      const pagination = this.hasPagination
+        ? this.pagination
+        : this.defaultPagination
+      const updatedPagination = Object.assign({}, pagination, val)
+      this.$emit('update:pagination', updatedPagination)
+
+      if (!this.hasPagination) {
+        this.defaultPagination = updatedPagination
+      }
+    },
+    isSelected (item) {
+      return this.selected[item[this.itemKey]]
+    },
+    isExpanded (item) {
+      return this.expanded[item[this.itemKey]]
+    },
+    sort (index) {
+      const { sortBy, descending } = this.computedPagination
+      if (sortBy === null) {
+        this.updatePagination({ sortBy: index, descending: false })
+      } else if (sortBy === index && !descending) {
+        this.updatePagination({ descending: true })
+      } else if (sortBy !== index) {
+        this.updatePagination({ sortBy: index, descending: false })
+      } else if (!this.mustSort) {
+        this.updatePagination({ sortBy: null, descending: null })
+      } else {
+        this.updatePagination({ sortBy: index, descending: false })
+      }
+    },
+    needsTR (row) {
+      return row.length && row.find(c => c.tag === 'td')
+    },
+    genTR (children, data = {}) {
+      return this.$createElement('tr', data, children)
+    },
+    toggle (value) {
+      const selected = Object.assign({}, this.selected)
+      this.filteredItems.forEach(i => (
+        selected[i[this.itemKey]] = value)
+      )
+
+      this.$emit('input', this.items.filter(i => (
+        selected[i[this.itemKey]]))
+      )
+    }
+  },
+
+  created () {
+    const firstSortable = this.headers.find(h => (
+      !('sortable' in h) || h.sortable)
+    )
+
+    this.defaultPagination.sortBy = firstSortable
+      ? firstSortable.value
+      : null
+
+    if (!this.rowsPerPageItems.length) {
+      console.warn('The prop \'rows-per-page-items\' in k-data-table can not be empty.')
+    } else {
+      this.defaultPagination.rowsPerPage = this.rowsPerPageItems[0]
+    }
+
+    this.defaultPagination.totalItems = this.itemsLength
+
+    this.updatePagination(
+      Object.assign({}, this.defaultPagination, this.pagination)
+    )
+  },
+
+  render (h) {
+    return h('k-table-overflow', {}, [
+      h('table', {
+        'class': this.classes
+      }, [
+        this.genTHead(),
+        this.genTProgress(),
+        this.genTBody(),
+        this.genTFoot()
+      ])
+    ])
+  }
+}

package/src/components/KDataTable/KEditDialog.js

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

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