eks - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

CHANGELOG.md

 # Changelog
 
+## 0.2.0 (Oct 12, 2017)
+
+- Add a new component: Table.
+
 ## 0.1.0 (Sep 17, 2017)
@@ -4,0 +8,0 @@

dist/eks.common.js

 /*!
- * Eks v0.1.0
+ * Eks v0.2.0
  * https://github.com/xkeshi/eks
@@ -8,3 +8,3 @@ *
  *
- * Date: 2017-09-17T09:06:41.137Z
+ * Date: 2017-10-12T06:12:32.094Z
  */
@@ -164,2 +164,46 @@
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var toConsumableArray = function (arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+    return arr2;
+  } else {
+    return Array.from(arr);
+  }
+};
+
 var _Object$prototype = Object.prototype;
@@ -249,4 +293,6 @@ var toString = _Object$prototype.toString;
  */
+function isFunction(value) {
+  return typeof value === 'function';
+}
 
-
 /**
@@ -468,5 +514,5 @@ * Check if the given value is a function.
 var NumberInput = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "eks-number-input", class: defineProperty({ 'eks-number-input--inline': _vm.inline, 'eks-number-input--center': _vm.center, 'eks-number-input--controls': _vm.controls }, 'eks-number-input--' + _vm.size, _vm.size), attrs: { "value": _vm.value } }, [_vm.controls ? _c('button', { staticClass: "eks-number-input__button eks-number-input__button--minus", attrs: { "type": "button", "disabled": _vm.disabled || _vm.readonly || !_vm.decreasable }, on: { "click": _vm.decrease } }) : _vm._e(), _c('eks-input', _vm._b({ ref: "input", staticClass: "eks-number-input__input", attrs: { "type": "number", "value": _vm.currentValue, "min": _vm.min, "max": _vm.max, "step": _vm.step, "size": _vm.size, "readonly": _vm.readonly, "disabled": _vm.disabled || !_vm.decreasable && !_vm.increasable }, on: { "change": _vm.change }, nativeOn: { "paste": function paste($event) {
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "eks-number-input", class: defineProperty({ 'eks-number-input--inline': _vm.inline, 'eks-number-input--center': _vm.center, 'eks-number-input--controls': _vm.controls }, 'eks-number-input--' + _vm.size, _vm.size), attrs: { "value": _vm.value } }, [_vm.controls ? _c('button', { staticClass: "eks-number-input__button eks-number-input__button--minus", attrs: { "type": "button", "disabled": _vm.disabled || _vm.readonly || !_vm.decreasable }, on: { "click": _vm.decrease } }) : _vm._e(), _vm._v(" "), _c('eks-input', _vm._b({ ref: "input", staticClass: "eks-number-input__input", attrs: { "type": "number", "value": _vm.currentValue, "min": _vm.min, "max": _vm.max, "step": _vm.step, "size": _vm.size, "readonly": _vm.readonly, "disabled": _vm.disabled || !_vm.decreasable && !_vm.increasable }, on: { "change": _vm.change }, nativeOn: { "paste": function paste($event) {
           _vm.paste($event);
-        } } }, 'eks-input', _vm.$attrs, false)), _vm.controls ? _c('button', { staticClass: "eks-number-input__button eks-number-input__button--plus", attrs: { "type": "button", "disabled": _vm.disabled || _vm.readonly || !_vm.increasable }, on: { "click": _vm.increase } }) : _vm._e()], 1);
+        } } }, 'eks-input', _vm.$attrs, false)), _vm._v(" "), _vm.controls ? _c('button', { staticClass: "eks-number-input__button eks-number-input__button--plus", attrs: { "type": "button", "disabled": _vm.disabled || _vm.readonly || !_vm.increasable }, on: { "click": _vm.increase } }) : _vm._e()], 1);
   }, staticRenderFns: [],
@@ -616,3 +662,3 @@ name: 'eks-number-input',
 var Checkbox = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('label', { staticClass: "eks-checkbox", class: { 'eks-checkbox--disabled': _vm.disabled } }, [_c('input', _vm._b({ ref: "input", staticClass: "eks-checkbox__input", attrs: { "type": "checkbox", "name": _vm.name, "disabled": _vm.disabled }, domProps: { "value": _vm.value, "checked": _vm.isChecked }, on: { "change": _vm.change } }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('span', { staticClass: "eks-checkbox__indicator" }), _vm._t("default")], 2);
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('label', { staticClass: "eks-checkbox", class: { 'eks-checkbox--disabled': _vm.disabled } }, [_c('input', _vm._b({ ref: "input", staticClass: "eks-checkbox__input", attrs: { "type": "checkbox", "name": _vm.name, "disabled": _vm.disabled }, domProps: { "value": _vm.value, "checked": _vm.isChecked }, on: { "change": _vm.change } }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('span', { staticClass: "eks-checkbox__indicator" }), _vm._v(" "), _vm._t("default")], 2);
   }, staticRenderFns: [],
@@ -769,3 +815,3 @@ name: 'eks-checkbox',
 var Radio = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('label', { staticClass: "eks-radio", class: { 'eks-radio--disabled': _vm.disabled } }, [_c('input', _vm._b({ staticClass: "eks-radio__input", attrs: { "type": "radio", "name": _vm.name, "disabled": _vm.disabled }, domProps: { "value": _vm.value, "checked": _vm.isChecked }, on: { "change": _vm.change } }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('span', { staticClass: "eks-radio__indicator" }), _vm._t("default")], 2);
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('label', { staticClass: "eks-radio", class: { 'eks-radio--disabled': _vm.disabled } }, [_c('input', _vm._b({ staticClass: "eks-radio__input", attrs: { "type": "radio", "name": _vm.name, "disabled": _vm.disabled }, domProps: { "value": _vm.value, "checked": _vm.isChecked }, on: { "change": _vm.change } }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('span', { staticClass: "eks-radio__indicator" }), _vm._v(" "), _vm._t("default")], 2);
   }, staticRenderFns: [],
@@ -851,7 +897,7 @@ name: 'eks-radio',
 var Select = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('select', { staticClass: "eks-select", class: defineProperty({ 'eks-select--inline': _vm.inline }, 'eks-select--' + _vm.sizes.custom, _vm.sizes.custom), attrs: { "size": _vm.sizes.native }, on: { "change": _vm.change } }, [_vm.placeholder ? _c('option', [_vm._v(_vm._s(_vm.placeholder))]) : _vm._e(), _vm._l(_vm.list, function (option, index) {
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('select', { staticClass: "eks-select", class: defineProperty({ 'eks-select--inline': _vm.inline }, 'eks-select--' + _vm.sizes.custom, _vm.sizes.custom), attrs: { "size": _vm.sizes.native }, on: { "change": _vm.change } }, [_vm.placeholder ? _c('option', [_vm._v(_vm._s(_vm.placeholder))]) : _vm._e(), _vm._v(" "), _vm._l(_vm.list, function (option, index) {
       return [option.options ? _c('optgroup', { key: index, attrs: { "label": option.label, "disabled": option.disabled } }, _vm._l(option.options, function (opt, i) {
         return _c('option', { key: i, attrs: { "label": opt.label, "disabled": opt.disabled }, domProps: { "value": opt.value, "selected": opt.value === _vm.value || opt.selected } }, [_vm._v(_vm._s(opt.label !== undefined ? opt.label : opt.value))]);
       })) : _c('option', { key: index, attrs: { "label": option.label, "disabled": option.disabled }, domProps: { "value": option.value, "selected": option.value === _vm.value || option.selected } }, [_vm._v(_vm._s(option.label !== undefined ? option.label : option.value))])];
-    }), _vm._t("default")], 2);
+    }), _vm._v(" "), _vm._t("default")], 2);
   }, staticRenderFns: [],
@@ -959,2 +1005,582 @@ name: 'eks-select',
 
+var Cell = {
+  name: 'eks-table-cell',
+
+  props: {
+    colSpan: Number,
+    content: null,
+    headers: String,
+    index: null,
+    rowSpan: Number,
+    sortable: Boolean,
+    sortType: {
+      type: Number,
+
+      // 0: default, 1: ascending, 2: descending
+      default: 0
+    },
+
+    scope: String,
+
+    tag: {
+      type: String,
+      default: 'td'
+    }
+  },
+
+  computed: {
+    $table: function $table() {
+      return this.$parent.$parent.$parent;
+    }
+  },
+
+  render: function render(createElement) {
+    var _this = this;
+
+    var content = this.content,
+        sortType = this.sortType,
+        sortable = this.sortable;
+
+    var component = {};
+
+    if (isObject(content)) {
+      assign(component, content);
+    } else if (isFunction(content)) {
+      component.render = function (h) {
+        return content.call(_this, h, _this);
+      };
+    } else {
+      component.template = '<span>' + content + '</span>';
+    }
+
+    return createElement(this.tag, {
+      attrs: {
+        colSpan: this.colSpan,
+        headers: this.headers,
+        rowSpan: this.rowSpan,
+        scope: this.scope
+      },
+
+      class: {
+        'eks-table__cell': true,
+        'eks-table__cell--sortable': sortable,
+        'eks-table__cell--ascended': sortable && sortType === 1,
+        'eks-table__cell--descended': sortable && sortType === 2
+      },
+
+      on: sortable ? {
+        click: this.click
+      } : null
+    }, [createElement('div', {
+      class: 'eks-table__content'
+    }, [createElement(component), sortable ? createElement('i', {
+      class: 'eks-table__icon eks-table__icon--sort'
+    }, [createElement('span', {
+      on: {
+        click: function click() {
+          _this.sortType = 0;
+        }
+      }
+    }), createElement('span', {
+      on: {
+        click: function click() {
+          _this.sortType = 1;
+        }
+      }
+    })]) : undefined])]);
+  },
+
+
+  methods: {
+    click: function click() {
+      if (this.sortable) {
+        this.$table.sort(this.index, this.sortType + 1);
+      }
+    }
+  }
+};
+
+var Row$1 = {
+  name: 'eks-table-row',
+
+  props: {
+    cells: {
+      type: Array,
+      required: true
+    },
+
+    disabled: Boolean,
+    indeterminate: Boolean,
+    index: null,
+    selected: Boolean,
+    raw: [Array, Object],
+
+    tag: {
+      type: String,
+      default: 'tr'
+    }
+  },
+
+  computed: {
+    $table: function $table() {
+      return this.$parent.$parent;
+    },
+    inHeader: function inHeader() {
+      return this.$parent.tag === 'thead';
+    },
+    selectable: function selectable() {
+      return this.$table.selectable;
+    },
+    multiple: function multiple() {
+      return this.$table.multiple;
+    },
+    controls: function controls() {
+      return this.$table.controls;
+    }
+  },
+
+  render: function render(createElement) {
+    var selectable = this.selectable,
+        multiple = this.multiple,
+        controls = this.controls,
+        inHeader = this.inHeader,
+        indeterminate = this.indeterminate,
+        selected = this.selected,
+        disabled = this.disabled;
+
+    var cells = [].concat(toConsumableArray(this.cells));
+
+    if (selectable && controls) {
+      cells.unshift({
+        content: function content(h) {
+          return h(multiple ? 'eks-checkbox' : 'eks-radio', {
+            props: {
+              indeterminate: indeterminate,
+              checked: selected,
+              disabled: !multiple && inHeader || disabled
+            }
+          });
+        }
+      });
+    }
+
+    return createElement(this.tag, {
+      class: {
+        'eks-table__row': true,
+        'eks-table__row--disabled': selectable && disabled && !inHeader,
+        'eks-table__row--selected': selectable && selected && !controls && !inHeader
+      },
+
+      on: {
+        click: this.click
+      }
+    }, cells.map(function (cell, i) {
+      return createElement(Cell, {
+        key: i,
+        props: cell,
+        style: cell.style
+      });
+    }));
+  },
+
+
+  methods: {
+    click: function click() {
+      if (!this.selectable || this.disabled) {
+        return;
+      }
+
+      var $table = this.$table,
+          multiple = this.multiple;
+
+
+      if (this.inHeader) {
+        if (multiple && this.controls) {
+          $table.select(true, this.selected || this.indeterminate);
+        }
+      } else {
+        $table.select(this.raw, multiple && this.selected);
+      }
+    }
+  }
+};
+
+var Section = {
+  name: 'eks-table-section',
+
+  props: {
+    index: null,
+
+    rows: {
+      type: Array,
+      required: true
+    },
+
+    tag: {
+      type: String,
+      default: 'tbody'
+    }
+  },
+
+  render: function render(createElement) {
+    return createElement(this.tag, {
+      class: 'eks-table__section'
+    }, this.rows.map(function (row, i) {
+      return createElement(Row$1, {
+        key: i,
+        props: row,
+        style: row.style
+      });
+    }));
+  }
+};
+
+var _window = window;
+var JSON = _window.JSON;
+
+
+var Table = {
+  name: 'eks-table',
+
+  data: function data() {
+    return {
+      sections: []
+    };
+  },
+
+
+  model: {
+    prop: 'selectedRows',
+    event: 'change'
+  },
+
+  props: {
+    bordered: Boolean,
+    caption: String,
+    colgroup: Array,
+    controls: Boolean,
+    data: Array,
+    disabledRows: Array,
+    hoverable: Boolean,
+    multiple: Boolean,
+    responsive: Boolean,
+    selectable: Boolean,
+    selectedRows: Array,
+    size: String,
+    striped: Boolean,
+
+    tag: {
+      type: String,
+      default: 'table'
+    }
+  },
+
+  render: function render(createElement) {
+    var caption = this.caption,
+        colgroup = this.colgroup,
+        size = this.size;
+
+    var children = [];
+
+    if (caption) {
+      children.push(createElement('caption', {
+        domProps: {
+          textContent: caption
+        }
+      }));
+    }
+
+    if (colgroup) {
+      children.push(createElement('colgroup', colgroup.map(function (col, index) {
+        return createElement('col', {
+          attrs: {
+            span: col.span
+          },
+
+          key: index,
+          style: col.style
+        });
+      })));
+    }
+
+    return createElement(this.tag, {
+      class: defineProperty({
+        'eks-table': true,
+        'eks-table--bordered': this.bordered,
+        'eks-table--hoverable': this.hoverable,
+        'eks-table--selectable': this.selectable,
+        'eks-table--multiple': this.multiple,
+        'eks-table--controls': this.controls,
+        'eks-table--responsive': this.responsive,
+        'eks-table--striped': this.striped
+      }, 'eks-table--' + size, size)
+    }, children.concat(this.sections.map(function (section, index) {
+      return createElement(Section, {
+        key: index,
+        props: section,
+        style: section.style
+      });
+    })));
+  },
+
+
+  methods: {
+    init: function init() {
+      var data = this.data,
+          selectable = this.selectable,
+          _selectedRows = this.selectedRows,
+          selectedRows = _selectedRows === undefined ? [] : _selectedRows,
+          _disabledRows = this.disabledRows,
+          disabledRows = _disabledRows === undefined ? [] : _disabledRows;
+
+
+      if (!isArray(data)) {
+        return;
+      }
+
+      var defaultSection = {
+        rows: [],
+        tag: 'tbody'
+      };
+      var sections = [];
+
+      data.forEach(function (section, index) {
+        if (isObject(section)) {
+          if (isArray(section.rows)) {
+            sections.push(assign({
+              index: index,
+              rows: [],
+              tag: 'tbody'
+            }, section));
+            return;
+          }
+        } else if (!isArray(section)) {
+          throw new Error('Invalid table section: ' + JSON.stringify(section));
+        }
+
+        defaultSection.rows.push(section);
+
+        if (!includes(defaultSection, sections)) {
+          sections.push(defaultSection);
+        }
+      });
+
+      sections = sections.map(function (section, sectionIndex) {
+        var $section = {
+          index: sectionIndex,
+          rows: [],
+          tag: 'tbody'
+        };
+
+        if (isArray(section)) {
+          $section.rows = section;
+        } else if (isObject(section)) {
+          if (isArray(section.rows)) {
+            assign($section, section);
+          } else {
+            forEach(section, function (row, rowIndex) {
+              $section.rows.push({
+                cells: row,
+                index: rowIndex
+              });
+            });
+          }
+        } else {
+          throw new Error('Invalid table section: ' + JSON.stringify(section));
+        }
+
+        $section.rows = $section.rows.map(function (row, rowIndex) {
+          var $row = {
+            cells: [],
+            index: rowIndex,
+            raw: row,
+            indeterminate: false,
+            selected: includes(row, selectedRows),
+            disabled: includes(row, disabledRows),
+            tag: 'tr'
+          };
+
+          if (isArray(row)) {
+            $row.cells = row;
+          } else if (isObject(row)) {
+            if (isArray(row.cells)) {
+              assign($row, row);
+            } else {
+              forEach(row, function (cell, cellIndex) {
+                $row.cells.push({
+                  content: cell,
+                  index: cellIndex
+                });
+              });
+            }
+          } else {
+            throw new Error('Invalid table row: ' + JSON.stringify(row));
+          }
+
+          if (!selectable) {
+            $row.selected = false;
+          }
+
+          $row.cells = $row.cells.map(function (cell, cellIndex) {
+            var $cell = {
+              content: '',
+              index: cellIndex,
+              sortType: 0,
+              tag: $section.tag === 'thead' ? 'th' : 'td'
+            };
+
+            if (isObject(cell) && cell.content) {
+              assign($cell, cell);
+            } else {
+              $cell.content = cell;
+            }
+
+            return $cell;
+          });
+
+          return $row;
+        });
+
+        return $section;
+      });
+
+      this.sections = sections.sort(function (a, b) {
+        var orders = {
+          thead: 0,
+          tbody: 1,
+          tfoot: 2
+        };
+
+        return orders[a.tag] - orders[b.tag];
+      });
+
+      this.select();
+    },
+    sort: function sort(index, sortType) {
+      if (sortType > 2) {
+        sortType = 0;
+      }
+
+      this.sections.forEach(function (section) {
+        if (section.tag === 'thead') {
+          section.rows.forEach(function (row) {
+            row.cells.forEach(function (cell, cellIndex) {
+              cell.sortType = cellIndex === index ? sortType : 0;
+            });
+          });
+          return;
+        }
+
+        section.rows.sort(function (a, b) {
+          var cellA = a.cells[index];
+          var cellB = b.cells[index];
+
+          if (sortType > 0) {
+            var cellAContent = cellA.content;
+            var cellBContent = cellB.content;
+
+            switch (sortType) {
+              // Descending
+              case 2:
+                return [cellAContent, cellBContent].sort()[0] === cellAContent ? 1 : -1;
+
+              // Ascending
+              case 1:
+                return [cellAContent, cellBContent].sort()[0] === cellAContent ? -1 : 1;
+
+              default:
+            }
+          }
+
+          return a.index - b.index;
+        });
+      });
+    },
+
+
+    /**
+     * Select a row or all rows.
+     * @param {Array|Object|boolean} target - The target row or all rows if the value is `true`.
+     * @param {*} reversed - Indicate if the operation is reversed (deselect) or not.
+     */
+    select: function select(target) {
+      var reversed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+      if (!this.selectable) {
+        return;
+      }
+
+      var multiple = this.multiple;
+
+      var selectAll = multiple && target === true;
+      var selectedRows = [];
+      var totalRows = 0;
+      var thead = void 0;
+
+      this.sections.forEach(function (section) {
+        switch (section.tag) {
+          case 'thead':
+            thead = section;
+            break;
+
+          case 'tbody':
+            section.rows.forEach(function (row) {
+              totalRows += 1;
+
+              if (row.disabled) {
+                return;
+              }
+
+              if (!multiple && !isUndefined(target)) {
+                row.selected = false;
+              }
+
+              if (selectAll || row.raw === target) {
+                row.selected = !reversed;
+              }
+
+              if (row.selected) {
+                selectedRows.push(row.raw);
+              }
+            });
+            break;
+
+          // case 'tfoot':
+          default:
+        }
+      });
+
+      if (multiple && this.controls && thead) {
+        var row = thead.rows[thead.rows.length - 1];
+        var totalSelectedRows = selectedRows.length;
+
+        if (totalSelectedRows === totalRows) {
+          row.indeterminate = false;
+          row.selected = true;
+        } else if (totalSelectedRows > 0) {
+          row.selected = false;
+          row.indeterminate = true;
+        } else {
+          row.selected = false;
+          row.indeterminate = false;
+        }
+      }
+
+      if (!isUndefined(target)) {
+        this.$emit('change', selectedRows);
+      }
+    }
+  },
+
+  watch: {
+    data: function data() {
+      this.init();
+    }
+  },
+
+  mounted: function mounted() {
+    this.init();
+  }
+};
+
 var Textarea = { render: function render() {
@@ -1062,2 +1688,3 @@ var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('textarea', { staticClass: "eks-textarea", attrs: { "rows": _vm.rowsAsNumber }, domProps: { "value": _vm.currentValue }, on: { "input": _vm.input, "change": _vm.change } });
   Select: Select,
+  Table: Table,
   Textarea: Textarea,
@@ -1075,2 +1702,3 @@
     Vue.component(Select.name, Select);
+    Vue.component(Table.name, Table);
     Vue.component(Textarea.name, Textarea);
@@ -1077,0 +1705,0 @@ }

dist/eks.esm.js

 /*!
- * Eks v0.1.0
+ * Eks v0.2.0
  * https://github.com/xkeshi/eks
@@ -8,3 +8,3 @@ *
  *
- * Date: 2017-09-17T09:06:41.137Z
+ * Date: 2017-10-12T06:12:32.094Z
  */
@@ -162,2 +162,46 @@
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var toConsumableArray = function (arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+    return arr2;
+  } else {
+    return Array.from(arr);
+  }
+};
+
 var _Object$prototype = Object.prototype;
@@ -247,4 +291,6 @@ var toString = _Object$prototype.toString;
  */
+function isFunction(value) {
+  return typeof value === 'function';
+}
 
-
 /**
@@ -466,5 +512,5 @@ * Check if the given value is a function.
 var NumberInput = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "eks-number-input", class: defineProperty({ 'eks-number-input--inline': _vm.inline, 'eks-number-input--center': _vm.center, 'eks-number-input--controls': _vm.controls }, 'eks-number-input--' + _vm.size, _vm.size), attrs: { "value": _vm.value } }, [_vm.controls ? _c('button', { staticClass: "eks-number-input__button eks-number-input__button--minus", attrs: { "type": "button", "disabled": _vm.disabled || _vm.readonly || !_vm.decreasable }, on: { "click": _vm.decrease } }) : _vm._e(), _c('eks-input', _vm._b({ ref: "input", staticClass: "eks-number-input__input", attrs: { "type": "number", "value": _vm.currentValue, "min": _vm.min, "max": _vm.max, "step": _vm.step, "size": _vm.size, "readonly": _vm.readonly, "disabled": _vm.disabled || !_vm.decreasable && !_vm.increasable }, on: { "change": _vm.change }, nativeOn: { "paste": function paste($event) {
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "eks-number-input", class: defineProperty({ 'eks-number-input--inline': _vm.inline, 'eks-number-input--center': _vm.center, 'eks-number-input--controls': _vm.controls }, 'eks-number-input--' + _vm.size, _vm.size), attrs: { "value": _vm.value } }, [_vm.controls ? _c('button', { staticClass: "eks-number-input__button eks-number-input__button--minus", attrs: { "type": "button", "disabled": _vm.disabled || _vm.readonly || !_vm.decreasable }, on: { "click": _vm.decrease } }) : _vm._e(), _vm._v(" "), _c('eks-input', _vm._b({ ref: "input", staticClass: "eks-number-input__input", attrs: { "type": "number", "value": _vm.currentValue, "min": _vm.min, "max": _vm.max, "step": _vm.step, "size": _vm.size, "readonly": _vm.readonly, "disabled": _vm.disabled || !_vm.decreasable && !_vm.increasable }, on: { "change": _vm.change }, nativeOn: { "paste": function paste($event) {
           _vm.paste($event);
-        } } }, 'eks-input', _vm.$attrs, false)), _vm.controls ? _c('button', { staticClass: "eks-number-input__button eks-number-input__button--plus", attrs: { "type": "button", "disabled": _vm.disabled || _vm.readonly || !_vm.increasable }, on: { "click": _vm.increase } }) : _vm._e()], 1);
+        } } }, 'eks-input', _vm.$attrs, false)), _vm._v(" "), _vm.controls ? _c('button', { staticClass: "eks-number-input__button eks-number-input__button--plus", attrs: { "type": "button", "disabled": _vm.disabled || _vm.readonly || !_vm.increasable }, on: { "click": _vm.increase } }) : _vm._e()], 1);
   }, staticRenderFns: [],
@@ -614,3 +660,3 @@ name: 'eks-number-input',
 var Checkbox = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('label', { staticClass: "eks-checkbox", class: { 'eks-checkbox--disabled': _vm.disabled } }, [_c('input', _vm._b({ ref: "input", staticClass: "eks-checkbox__input", attrs: { "type": "checkbox", "name": _vm.name, "disabled": _vm.disabled }, domProps: { "value": _vm.value, "checked": _vm.isChecked }, on: { "change": _vm.change } }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('span', { staticClass: "eks-checkbox__indicator" }), _vm._t("default")], 2);
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('label', { staticClass: "eks-checkbox", class: { 'eks-checkbox--disabled': _vm.disabled } }, [_c('input', _vm._b({ ref: "input", staticClass: "eks-checkbox__input", attrs: { "type": "checkbox", "name": _vm.name, "disabled": _vm.disabled }, domProps: { "value": _vm.value, "checked": _vm.isChecked }, on: { "change": _vm.change } }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('span', { staticClass: "eks-checkbox__indicator" }), _vm._v(" "), _vm._t("default")], 2);
   }, staticRenderFns: [],
@@ -767,3 +813,3 @@ name: 'eks-checkbox',
 var Radio = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('label', { staticClass: "eks-radio", class: { 'eks-radio--disabled': _vm.disabled } }, [_c('input', _vm._b({ staticClass: "eks-radio__input", attrs: { "type": "radio", "name": _vm.name, "disabled": _vm.disabled }, domProps: { "value": _vm.value, "checked": _vm.isChecked }, on: { "change": _vm.change } }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('span', { staticClass: "eks-radio__indicator" }), _vm._t("default")], 2);
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('label', { staticClass: "eks-radio", class: { 'eks-radio--disabled': _vm.disabled } }, [_c('input', _vm._b({ staticClass: "eks-radio__input", attrs: { "type": "radio", "name": _vm.name, "disabled": _vm.disabled }, domProps: { "value": _vm.value, "checked": _vm.isChecked }, on: { "change": _vm.change } }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('span', { staticClass: "eks-radio__indicator" }), _vm._v(" "), _vm._t("default")], 2);
   }, staticRenderFns: [],
@@ -849,7 +895,7 @@ name: 'eks-radio',
 var Select = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('select', { staticClass: "eks-select", class: defineProperty({ 'eks-select--inline': _vm.inline }, 'eks-select--' + _vm.sizes.custom, _vm.sizes.custom), attrs: { "size": _vm.sizes.native }, on: { "change": _vm.change } }, [_vm.placeholder ? _c('option', [_vm._v(_vm._s(_vm.placeholder))]) : _vm._e(), _vm._l(_vm.list, function (option, index) {
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('select', { staticClass: "eks-select", class: defineProperty({ 'eks-select--inline': _vm.inline }, 'eks-select--' + _vm.sizes.custom, _vm.sizes.custom), attrs: { "size": _vm.sizes.native }, on: { "change": _vm.change } }, [_vm.placeholder ? _c('option', [_vm._v(_vm._s(_vm.placeholder))]) : _vm._e(), _vm._v(" "), _vm._l(_vm.list, function (option, index) {
       return [option.options ? _c('optgroup', { key: index, attrs: { "label": option.label, "disabled": option.disabled } }, _vm._l(option.options, function (opt, i) {
         return _c('option', { key: i, attrs: { "label": opt.label, "disabled": opt.disabled }, domProps: { "value": opt.value, "selected": opt.value === _vm.value || opt.selected } }, [_vm._v(_vm._s(opt.label !== undefined ? opt.label : opt.value))]);
       })) : _c('option', { key: index, attrs: { "label": option.label, "disabled": option.disabled }, domProps: { "value": option.value, "selected": option.value === _vm.value || option.selected } }, [_vm._v(_vm._s(option.label !== undefined ? option.label : option.value))])];
-    }), _vm._t("default")], 2);
+    }), _vm._v(" "), _vm._t("default")], 2);
   }, staticRenderFns: [],
@@ -957,2 +1003,582 @@ name: 'eks-select',
 
+var Cell = {
+  name: 'eks-table-cell',
+
+  props: {
+    colSpan: Number,
+    content: null,
+    headers: String,
+    index: null,
+    rowSpan: Number,
+    sortable: Boolean,
+    sortType: {
+      type: Number,
+
+      // 0: default, 1: ascending, 2: descending
+      default: 0
+    },
+
+    scope: String,
+
+    tag: {
+      type: String,
+      default: 'td'
+    }
+  },
+
+  computed: {
+    $table: function $table() {
+      return this.$parent.$parent.$parent;
+    }
+  },
+
+  render: function render(createElement) {
+    var _this = this;
+
+    var content = this.content,
+        sortType = this.sortType,
+        sortable = this.sortable;
+
+    var component = {};
+
+    if (isObject(content)) {
+      assign(component, content);
+    } else if (isFunction(content)) {
+      component.render = function (h) {
+        return content.call(_this, h, _this);
+      };
+    } else {
+      component.template = '<span>' + content + '</span>';
+    }
+
+    return createElement(this.tag, {
+      attrs: {
+        colSpan: this.colSpan,
+        headers: this.headers,
+        rowSpan: this.rowSpan,
+        scope: this.scope
+      },
+
+      class: {
+        'eks-table__cell': true,
+        'eks-table__cell--sortable': sortable,
+        'eks-table__cell--ascended': sortable && sortType === 1,
+        'eks-table__cell--descended': sortable && sortType === 2
+      },
+
+      on: sortable ? {
+        click: this.click
+      } : null
+    }, [createElement('div', {
+      class: 'eks-table__content'
+    }, [createElement(component), sortable ? createElement('i', {
+      class: 'eks-table__icon eks-table__icon--sort'
+    }, [createElement('span', {
+      on: {
+        click: function click() {
+          _this.sortType = 0;
+        }
+      }
+    }), createElement('span', {
+      on: {
+        click: function click() {
+          _this.sortType = 1;
+        }
+      }
+    })]) : undefined])]);
+  },
+
+
+  methods: {
+    click: function click() {
+      if (this.sortable) {
+        this.$table.sort(this.index, this.sortType + 1);
+      }
+    }
+  }
+};
+
+var Row$1 = {
+  name: 'eks-table-row',
+
+  props: {
+    cells: {
+      type: Array,
+      required: true
+    },
+
+    disabled: Boolean,
+    indeterminate: Boolean,
+    index: null,
+    selected: Boolean,
+    raw: [Array, Object],
+
+    tag: {
+      type: String,
+      default: 'tr'
+    }
+  },
+
+  computed: {
+    $table: function $table() {
+      return this.$parent.$parent;
+    },
+    inHeader: function inHeader() {
+      return this.$parent.tag === 'thead';
+    },
+    selectable: function selectable() {
+      return this.$table.selectable;
+    },
+    multiple: function multiple() {
+      return this.$table.multiple;
+    },
+    controls: function controls() {
+      return this.$table.controls;
+    }
+  },
+
+  render: function render(createElement) {
+    var selectable = this.selectable,
+        multiple = this.multiple,
+        controls = this.controls,
+        inHeader = this.inHeader,
+        indeterminate = this.indeterminate,
+        selected = this.selected,
+        disabled = this.disabled;
+
+    var cells = [].concat(toConsumableArray(this.cells));
+
+    if (selectable && controls) {
+      cells.unshift({
+        content: function content(h) {
+          return h(multiple ? 'eks-checkbox' : 'eks-radio', {
+            props: {
+              indeterminate: indeterminate,
+              checked: selected,
+              disabled: !multiple && inHeader || disabled
+            }
+          });
+        }
+      });
+    }
+
+    return createElement(this.tag, {
+      class: {
+        'eks-table__row': true,
+        'eks-table__row--disabled': selectable && disabled && !inHeader,
+        'eks-table__row--selected': selectable && selected && !controls && !inHeader
+      },
+
+      on: {
+        click: this.click
+      }
+    }, cells.map(function (cell, i) {
+      return createElement(Cell, {
+        key: i,
+        props: cell,
+        style: cell.style
+      });
+    }));
+  },
+
+
+  methods: {
+    click: function click() {
+      if (!this.selectable || this.disabled) {
+        return;
+      }
+
+      var $table = this.$table,
+          multiple = this.multiple;
+
+
+      if (this.inHeader) {
+        if (multiple && this.controls) {
+          $table.select(true, this.selected || this.indeterminate);
+        }
+      } else {
+        $table.select(this.raw, multiple && this.selected);
+      }
+    }
+  }
+};
+
+var Section = {
+  name: 'eks-table-section',
+
+  props: {
+    index: null,
+
+    rows: {
+      type: Array,
+      required: true
+    },
+
+    tag: {
+      type: String,
+      default: 'tbody'
+    }
+  },
+
+  render: function render(createElement) {
+    return createElement(this.tag, {
+      class: 'eks-table__section'
+    }, this.rows.map(function (row, i) {
+      return createElement(Row$1, {
+        key: i,
+        props: row,
+        style: row.style
+      });
+    }));
+  }
+};
+
+var _window = window;
+var JSON = _window.JSON;
+
+
+var Table = {
+  name: 'eks-table',
+
+  data: function data() {
+    return {
+      sections: []
+    };
+  },
+
+
+  model: {
+    prop: 'selectedRows',
+    event: 'change'
+  },
+
+  props: {
+    bordered: Boolean,
+    caption: String,
+    colgroup: Array,
+    controls: Boolean,
+    data: Array,
+    disabledRows: Array,
+    hoverable: Boolean,
+    multiple: Boolean,
+    responsive: Boolean,
+    selectable: Boolean,
+    selectedRows: Array,
+    size: String,
+    striped: Boolean,
+
+    tag: {
+      type: String,
+      default: 'table'
+    }
+  },
+
+  render: function render(createElement) {
+    var caption = this.caption,
+        colgroup = this.colgroup,
+        size = this.size;
+
+    var children = [];
+
+    if (caption) {
+      children.push(createElement('caption', {
+        domProps: {
+          textContent: caption
+        }
+      }));
+    }
+
+    if (colgroup) {
+      children.push(createElement('colgroup', colgroup.map(function (col, index) {
+        return createElement('col', {
+          attrs: {
+            span: col.span
+          },
+
+          key: index,
+          style: col.style
+        });
+      })));
+    }
+
+    return createElement(this.tag, {
+      class: defineProperty({
+        'eks-table': true,
+        'eks-table--bordered': this.bordered,
+        'eks-table--hoverable': this.hoverable,
+        'eks-table--selectable': this.selectable,
+        'eks-table--multiple': this.multiple,
+        'eks-table--controls': this.controls,
+        'eks-table--responsive': this.responsive,
+        'eks-table--striped': this.striped
+      }, 'eks-table--' + size, size)
+    }, children.concat(this.sections.map(function (section, index) {
+      return createElement(Section, {
+        key: index,
+        props: section,
+        style: section.style
+      });
+    })));
+  },
+
+
+  methods: {
+    init: function init() {
+      var data = this.data,
+          selectable = this.selectable,
+          _selectedRows = this.selectedRows,
+          selectedRows = _selectedRows === undefined ? [] : _selectedRows,
+          _disabledRows = this.disabledRows,
+          disabledRows = _disabledRows === undefined ? [] : _disabledRows;
+
+
+      if (!isArray(data)) {
+        return;
+      }
+
+      var defaultSection = {
+        rows: [],
+        tag: 'tbody'
+      };
+      var sections = [];
+
+      data.forEach(function (section, index) {
+        if (isObject(section)) {
+          if (isArray(section.rows)) {
+            sections.push(assign({
+              index: index,
+              rows: [],
+              tag: 'tbody'
+            }, section));
+            return;
+          }
+        } else if (!isArray(section)) {
+          throw new Error('Invalid table section: ' + JSON.stringify(section));
+        }
+
+        defaultSection.rows.push(section);
+
+        if (!includes(defaultSection, sections)) {
+          sections.push(defaultSection);
+        }
+      });
+
+      sections = sections.map(function (section, sectionIndex) {
+        var $section = {
+          index: sectionIndex,
+          rows: [],
+          tag: 'tbody'
+        };
+
+        if (isArray(section)) {
+          $section.rows = section;
+        } else if (isObject(section)) {
+          if (isArray(section.rows)) {
+            assign($section, section);
+          } else {
+            forEach(section, function (row, rowIndex) {
+              $section.rows.push({
+                cells: row,
+                index: rowIndex
+              });
+            });
+          }
+        } else {
+          throw new Error('Invalid table section: ' + JSON.stringify(section));
+        }
+
+        $section.rows = $section.rows.map(function (row, rowIndex) {
+          var $row = {
+            cells: [],
+            index: rowIndex,
+            raw: row,
+            indeterminate: false,
+            selected: includes(row, selectedRows),
+            disabled: includes(row, disabledRows),
+            tag: 'tr'
+          };
+
+          if (isArray(row)) {
+            $row.cells = row;
+          } else if (isObject(row)) {
+            if (isArray(row.cells)) {
+              assign($row, row);
+            } else {
+              forEach(row, function (cell, cellIndex) {
+                $row.cells.push({
+                  content: cell,
+                  index: cellIndex
+                });
+              });
+            }
+          } else {
+            throw new Error('Invalid table row: ' + JSON.stringify(row));
+          }
+
+          if (!selectable) {
+            $row.selected = false;
+          }
+
+          $row.cells = $row.cells.map(function (cell, cellIndex) {
+            var $cell = {
+              content: '',
+              index: cellIndex,
+              sortType: 0,
+              tag: $section.tag === 'thead' ? 'th' : 'td'
+            };
+
+            if (isObject(cell) && cell.content) {
+              assign($cell, cell);
+            } else {
+              $cell.content = cell;
+            }
+
+            return $cell;
+          });
+
+          return $row;
+        });
+
+        return $section;
+      });
+
+      this.sections = sections.sort(function (a, b) {
+        var orders = {
+          thead: 0,
+          tbody: 1,
+          tfoot: 2
+        };
+
+        return orders[a.tag] - orders[b.tag];
+      });
+
+      this.select();
+    },
+    sort: function sort(index, sortType) {
+      if (sortType > 2) {
+        sortType = 0;
+      }
+
+      this.sections.forEach(function (section) {
+        if (section.tag === 'thead') {
+          section.rows.forEach(function (row) {
+            row.cells.forEach(function (cell, cellIndex) {
+              cell.sortType = cellIndex === index ? sortType : 0;
+            });
+          });
+          return;
+        }
+
+        section.rows.sort(function (a, b) {
+          var cellA = a.cells[index];
+          var cellB = b.cells[index];
+
+          if (sortType > 0) {
+            var cellAContent = cellA.content;
+            var cellBContent = cellB.content;
+
+            switch (sortType) {
+              // Descending
+              case 2:
+                return [cellAContent, cellBContent].sort()[0] === cellAContent ? 1 : -1;
+
+              // Ascending
+              case 1:
+                return [cellAContent, cellBContent].sort()[0] === cellAContent ? -1 : 1;
+
+              default:
+            }
+          }
+
+          return a.index - b.index;
+        });
+      });
+    },
+
+
+    /**
+     * Select a row or all rows.
+     * @param {Array|Object|boolean} target - The target row or all rows if the value is `true`.
+     * @param {*} reversed - Indicate if the operation is reversed (deselect) or not.
+     */
+    select: function select(target) {
+      var reversed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+      if (!this.selectable) {
+        return;
+      }
+
+      var multiple = this.multiple;
+
+      var selectAll = multiple && target === true;
+      var selectedRows = [];
+      var totalRows = 0;
+      var thead = void 0;
+
+      this.sections.forEach(function (section) {
+        switch (section.tag) {
+          case 'thead':
+            thead = section;
+            break;
+
+          case 'tbody':
+            section.rows.forEach(function (row) {
+              totalRows += 1;
+
+              if (row.disabled) {
+                return;
+              }
+
+              if (!multiple && !isUndefined(target)) {
+                row.selected = false;
+              }
+
+              if (selectAll || row.raw === target) {
+                row.selected = !reversed;
+              }
+
+              if (row.selected) {
+                selectedRows.push(row.raw);
+              }
+            });
+            break;
+
+          // case 'tfoot':
+          default:
+        }
+      });
+
+      if (multiple && this.controls && thead) {
+        var row = thead.rows[thead.rows.length - 1];
+        var totalSelectedRows = selectedRows.length;
+
+        if (totalSelectedRows === totalRows) {
+          row.indeterminate = false;
+          row.selected = true;
+        } else if (totalSelectedRows > 0) {
+          row.selected = false;
+          row.indeterminate = true;
+        } else {
+          row.selected = false;
+          row.indeterminate = false;
+        }
+      }
+
+      if (!isUndefined(target)) {
+        this.$emit('change', selectedRows);
+      }
+    }
+  },
+
+  watch: {
+    data: function data() {
+      this.init();
+    }
+  },
+
+  mounted: function mounted() {
+    this.init();
+  }
+};
+
 var Textarea = { render: function render() {
@@ -1060,2 +1686,3 @@ var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('textarea', { staticClass: "eks-textarea", attrs: { "rows": _vm.rowsAsNumber }, domProps: { "value": _vm.currentValue }, on: { "input": _vm.input, "change": _vm.change } });
   Select: Select,
+  Table: Table,
   Textarea: Textarea,
@@ -1073,2 +1700,3 @@
     Vue.component(Select.name, Select);
+    Vue.component(Table.name, Table);
     Vue.component(Textarea.name, Textarea);
@@ -1075,0 +1703,0 @@ }

dist/eks.js

 /*!
- * Eks v0.1.0
+ * Eks v0.2.0
  * https://github.com/xkeshi/eks
@@ -8,3 +8,3 @@ *
  *
- * Date: 2017-09-17T09:06:41.137Z
+ * Date: 2017-10-12T06:12:32.094Z
  */
@@ -168,2 +168,46 @@
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var toConsumableArray = function (arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+    return arr2;
+  } else {
+    return Array.from(arr);
+  }
+};
+
 var _Object$prototype = Object.prototype;
@@ -253,4 +297,6 @@ var toString = _Object$prototype.toString;
  */
+function isFunction(value) {
+  return typeof value === 'function';
+}
 
-
 /**
@@ -472,5 +518,5 @@ * Check if the given value is a function.
 var NumberInput = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "eks-number-input", class: defineProperty({ 'eks-number-input--inline': _vm.inline, 'eks-number-input--center': _vm.center, 'eks-number-input--controls': _vm.controls }, 'eks-number-input--' + _vm.size, _vm.size), attrs: { "value": _vm.value } }, [_vm.controls ? _c('button', { staticClass: "eks-number-input__button eks-number-input__button--minus", attrs: { "type": "button", "disabled": _vm.disabled || _vm.readonly || !_vm.decreasable }, on: { "click": _vm.decrease } }) : _vm._e(), _c('eks-input', _vm._b({ ref: "input", staticClass: "eks-number-input__input", attrs: { "type": "number", "value": _vm.currentValue, "min": _vm.min, "max": _vm.max, "step": _vm.step, "size": _vm.size, "readonly": _vm.readonly, "disabled": _vm.disabled || !_vm.decreasable && !_vm.increasable }, on: { "change": _vm.change }, nativeOn: { "paste": function paste($event) {
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "eks-number-input", class: defineProperty({ 'eks-number-input--inline': _vm.inline, 'eks-number-input--center': _vm.center, 'eks-number-input--controls': _vm.controls }, 'eks-number-input--' + _vm.size, _vm.size), attrs: { "value": _vm.value } }, [_vm.controls ? _c('button', { staticClass: "eks-number-input__button eks-number-input__button--minus", attrs: { "type": "button", "disabled": _vm.disabled || _vm.readonly || !_vm.decreasable }, on: { "click": _vm.decrease } }) : _vm._e(), _vm._v(" "), _c('eks-input', _vm._b({ ref: "input", staticClass: "eks-number-input__input", attrs: { "type": "number", "value": _vm.currentValue, "min": _vm.min, "max": _vm.max, "step": _vm.step, "size": _vm.size, "readonly": _vm.readonly, "disabled": _vm.disabled || !_vm.decreasable && !_vm.increasable }, on: { "change": _vm.change }, nativeOn: { "paste": function paste($event) {
           _vm.paste($event);
-        } } }, 'eks-input', _vm.$attrs, false)), _vm.controls ? _c('button', { staticClass: "eks-number-input__button eks-number-input__button--plus", attrs: { "type": "button", "disabled": _vm.disabled || _vm.readonly || !_vm.increasable }, on: { "click": _vm.increase } }) : _vm._e()], 1);
+        } } }, 'eks-input', _vm.$attrs, false)), _vm._v(" "), _vm.controls ? _c('button', { staticClass: "eks-number-input__button eks-number-input__button--plus", attrs: { "type": "button", "disabled": _vm.disabled || _vm.readonly || !_vm.increasable }, on: { "click": _vm.increase } }) : _vm._e()], 1);
   }, staticRenderFns: [],
@@ -620,3 +666,3 @@ name: 'eks-number-input',
 var Checkbox = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('label', { staticClass: "eks-checkbox", class: { 'eks-checkbox--disabled': _vm.disabled } }, [_c('input', _vm._b({ ref: "input", staticClass: "eks-checkbox__input", attrs: { "type": "checkbox", "name": _vm.name, "disabled": _vm.disabled }, domProps: { "value": _vm.value, "checked": _vm.isChecked }, on: { "change": _vm.change } }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('span', { staticClass: "eks-checkbox__indicator" }), _vm._t("default")], 2);
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('label', { staticClass: "eks-checkbox", class: { 'eks-checkbox--disabled': _vm.disabled } }, [_c('input', _vm._b({ ref: "input", staticClass: "eks-checkbox__input", attrs: { "type": "checkbox", "name": _vm.name, "disabled": _vm.disabled }, domProps: { "value": _vm.value, "checked": _vm.isChecked }, on: { "change": _vm.change } }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('span', { staticClass: "eks-checkbox__indicator" }), _vm._v(" "), _vm._t("default")], 2);
   }, staticRenderFns: [],
@@ -773,3 +819,3 @@ name: 'eks-checkbox',
 var Radio = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('label', { staticClass: "eks-radio", class: { 'eks-radio--disabled': _vm.disabled } }, [_c('input', _vm._b({ staticClass: "eks-radio__input", attrs: { "type": "radio", "name": _vm.name, "disabled": _vm.disabled }, domProps: { "value": _vm.value, "checked": _vm.isChecked }, on: { "change": _vm.change } }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('span', { staticClass: "eks-radio__indicator" }), _vm._t("default")], 2);
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('label', { staticClass: "eks-radio", class: { 'eks-radio--disabled': _vm.disabled } }, [_c('input', _vm._b({ staticClass: "eks-radio__input", attrs: { "type": "radio", "name": _vm.name, "disabled": _vm.disabled }, domProps: { "value": _vm.value, "checked": _vm.isChecked }, on: { "change": _vm.change } }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('span', { staticClass: "eks-radio__indicator" }), _vm._v(" "), _vm._t("default")], 2);
   }, staticRenderFns: [],
@@ -855,7 +901,7 @@ name: 'eks-radio',
 var Select = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('select', { staticClass: "eks-select", class: defineProperty({ 'eks-select--inline': _vm.inline }, 'eks-select--' + _vm.sizes.custom, _vm.sizes.custom), attrs: { "size": _vm.sizes.native }, on: { "change": _vm.change } }, [_vm.placeholder ? _c('option', [_vm._v(_vm._s(_vm.placeholder))]) : _vm._e(), _vm._l(_vm.list, function (option, index) {
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('select', { staticClass: "eks-select", class: defineProperty({ 'eks-select--inline': _vm.inline }, 'eks-select--' + _vm.sizes.custom, _vm.sizes.custom), attrs: { "size": _vm.sizes.native }, on: { "change": _vm.change } }, [_vm.placeholder ? _c('option', [_vm._v(_vm._s(_vm.placeholder))]) : _vm._e(), _vm._v(" "), _vm._l(_vm.list, function (option, index) {
       return [option.options ? _c('optgroup', { key: index, attrs: { "label": option.label, "disabled": option.disabled } }, _vm._l(option.options, function (opt, i) {
         return _c('option', { key: i, attrs: { "label": opt.label, "disabled": opt.disabled }, domProps: { "value": opt.value, "selected": opt.value === _vm.value || opt.selected } }, [_vm._v(_vm._s(opt.label !== undefined ? opt.label : opt.value))]);
       })) : _c('option', { key: index, attrs: { "label": option.label, "disabled": option.disabled }, domProps: { "value": option.value, "selected": option.value === _vm.value || option.selected } }, [_vm._v(_vm._s(option.label !== undefined ? option.label : option.value))])];
-    }), _vm._t("default")], 2);
+    }), _vm._v(" "), _vm._t("default")], 2);
   }, staticRenderFns: [],
@@ -963,2 +1009,582 @@ name: 'eks-select',
 
+var Cell = {
+  name: 'eks-table-cell',
+
+  props: {
+    colSpan: Number,
+    content: null,
+    headers: String,
+    index: null,
+    rowSpan: Number,
+    sortable: Boolean,
+    sortType: {
+      type: Number,
+
+      // 0: default, 1: ascending, 2: descending
+      default: 0
+    },
+
+    scope: String,
+
+    tag: {
+      type: String,
+      default: 'td'
+    }
+  },
+
+  computed: {
+    $table: function $table() {
+      return this.$parent.$parent.$parent;
+    }
+  },
+
+  render: function render(createElement) {
+    var _this = this;
+
+    var content = this.content,
+        sortType = this.sortType,
+        sortable = this.sortable;
+
+    var component = {};
+
+    if (isObject(content)) {
+      assign(component, content);
+    } else if (isFunction(content)) {
+      component.render = function (h) {
+        return content.call(_this, h, _this);
+      };
+    } else {
+      component.template = '<span>' + content + '</span>';
+    }
+
+    return createElement(this.tag, {
+      attrs: {
+        colSpan: this.colSpan,
+        headers: this.headers,
+        rowSpan: this.rowSpan,
+        scope: this.scope
+      },
+
+      class: {
+        'eks-table__cell': true,
+        'eks-table__cell--sortable': sortable,
+        'eks-table__cell--ascended': sortable && sortType === 1,
+        'eks-table__cell--descended': sortable && sortType === 2
+      },
+
+      on: sortable ? {
+        click: this.click
+      } : null
+    }, [createElement('div', {
+      class: 'eks-table__content'
+    }, [createElement(component), sortable ? createElement('i', {
+      class: 'eks-table__icon eks-table__icon--sort'
+    }, [createElement('span', {
+      on: {
+        click: function click() {
+          _this.sortType = 0;
+        }
+      }
+    }), createElement('span', {
+      on: {
+        click: function click() {
+          _this.sortType = 1;
+        }
+      }
+    })]) : undefined])]);
+  },
+
+
+  methods: {
+    click: function click() {
+      if (this.sortable) {
+        this.$table.sort(this.index, this.sortType + 1);
+      }
+    }
+  }
+};
+
+var Row$1 = {
+  name: 'eks-table-row',
+
+  props: {
+    cells: {
+      type: Array,
+      required: true
+    },
+
+    disabled: Boolean,
+    indeterminate: Boolean,
+    index: null,
+    selected: Boolean,
+    raw: [Array, Object],
+
+    tag: {
+      type: String,
+      default: 'tr'
+    }
+  },
+
+  computed: {
+    $table: function $table() {
+      return this.$parent.$parent;
+    },
+    inHeader: function inHeader() {
+      return this.$parent.tag === 'thead';
+    },
+    selectable: function selectable() {
+      return this.$table.selectable;
+    },
+    multiple: function multiple() {
+      return this.$table.multiple;
+    },
+    controls: function controls() {
+      return this.$table.controls;
+    }
+  },
+
+  render: function render(createElement) {
+    var selectable = this.selectable,
+        multiple = this.multiple,
+        controls = this.controls,
+        inHeader = this.inHeader,
+        indeterminate = this.indeterminate,
+        selected = this.selected,
+        disabled = this.disabled;
+
+    var cells = [].concat(toConsumableArray(this.cells));
+
+    if (selectable && controls) {
+      cells.unshift({
+        content: function content(h) {
+          return h(multiple ? 'eks-checkbox' : 'eks-radio', {
+            props: {
+              indeterminate: indeterminate,
+              checked: selected,
+              disabled: !multiple && inHeader || disabled
+            }
+          });
+        }
+      });
+    }
+
+    return createElement(this.tag, {
+      class: {
+        'eks-table__row': true,
+        'eks-table__row--disabled': selectable && disabled && !inHeader,
+        'eks-table__row--selected': selectable && selected && !controls && !inHeader
+      },
+
+      on: {
+        click: this.click
+      }
+    }, cells.map(function (cell, i) {
+      return createElement(Cell, {
+        key: i,
+        props: cell,
+        style: cell.style
+      });
+    }));
+  },
+
+
+  methods: {
+    click: function click() {
+      if (!this.selectable || this.disabled) {
+        return;
+      }
+
+      var $table = this.$table,
+          multiple = this.multiple;
+
+
+      if (this.inHeader) {
+        if (multiple && this.controls) {
+          $table.select(true, this.selected || this.indeterminate);
+        }
+      } else {
+        $table.select(this.raw, multiple && this.selected);
+      }
+    }
+  }
+};
+
+var Section = {
+  name: 'eks-table-section',
+
+  props: {
+    index: null,
+
+    rows: {
+      type: Array,
+      required: true
+    },
+
+    tag: {
+      type: String,
+      default: 'tbody'
+    }
+  },
+
+  render: function render(createElement) {
+    return createElement(this.tag, {
+      class: 'eks-table__section'
+    }, this.rows.map(function (row, i) {
+      return createElement(Row$1, {
+        key: i,
+        props: row,
+        style: row.style
+      });
+    }));
+  }
+};
+
+var _window = window;
+var JSON = _window.JSON;
+
+
+var Table = {
+  name: 'eks-table',
+
+  data: function data() {
+    return {
+      sections: []
+    };
+  },
+
+
+  model: {
+    prop: 'selectedRows',
+    event: 'change'
+  },
+
+  props: {
+    bordered: Boolean,
+    caption: String,
+    colgroup: Array,
+    controls: Boolean,
+    data: Array,
+    disabledRows: Array,
+    hoverable: Boolean,
+    multiple: Boolean,
+    responsive: Boolean,
+    selectable: Boolean,
+    selectedRows: Array,
+    size: String,
+    striped: Boolean,
+
+    tag: {
+      type: String,
+      default: 'table'
+    }
+  },
+
+  render: function render(createElement) {
+    var caption = this.caption,
+        colgroup = this.colgroup,
+        size = this.size;
+
+    var children = [];
+
+    if (caption) {
+      children.push(createElement('caption', {
+        domProps: {
+          textContent: caption
+        }
+      }));
+    }
+
+    if (colgroup) {
+      children.push(createElement('colgroup', colgroup.map(function (col, index) {
+        return createElement('col', {
+          attrs: {
+            span: col.span
+          },
+
+          key: index,
+          style: col.style
+        });
+      })));
+    }
+
+    return createElement(this.tag, {
+      class: defineProperty({
+        'eks-table': true,
+        'eks-table--bordered': this.bordered,
+        'eks-table--hoverable': this.hoverable,
+        'eks-table--selectable': this.selectable,
+        'eks-table--multiple': this.multiple,
+        'eks-table--controls': this.controls,
+        'eks-table--responsive': this.responsive,
+        'eks-table--striped': this.striped
+      }, 'eks-table--' + size, size)
+    }, children.concat(this.sections.map(function (section, index) {
+      return createElement(Section, {
+        key: index,
+        props: section,
+        style: section.style
+      });
+    })));
+  },
+
+
+  methods: {
+    init: function init() {
+      var data = this.data,
+          selectable = this.selectable,
+          _selectedRows = this.selectedRows,
+          selectedRows = _selectedRows === undefined ? [] : _selectedRows,
+          _disabledRows = this.disabledRows,
+          disabledRows = _disabledRows === undefined ? [] : _disabledRows;
+
+
+      if (!isArray(data)) {
+        return;
+      }
+
+      var defaultSection = {
+        rows: [],
+        tag: 'tbody'
+      };
+      var sections = [];
+
+      data.forEach(function (section, index) {
+        if (isObject(section)) {
+          if (isArray(section.rows)) {
+            sections.push(assign({
+              index: index,
+              rows: [],
+              tag: 'tbody'
+            }, section));
+            return;
+          }
+        } else if (!isArray(section)) {
+          throw new Error('Invalid table section: ' + JSON.stringify(section));
+        }
+
+        defaultSection.rows.push(section);
+
+        if (!includes(defaultSection, sections)) {
+          sections.push(defaultSection);
+        }
+      });
+
+      sections = sections.map(function (section, sectionIndex) {
+        var $section = {
+          index: sectionIndex,
+          rows: [],
+          tag: 'tbody'
+        };
+
+        if (isArray(section)) {
+          $section.rows = section;
+        } else if (isObject(section)) {
+          if (isArray(section.rows)) {
+            assign($section, section);
+          } else {
+            forEach(section, function (row, rowIndex) {
+              $section.rows.push({
+                cells: row,
+                index: rowIndex
+              });
+            });
+          }
+        } else {
+          throw new Error('Invalid table section: ' + JSON.stringify(section));
+        }
+
+        $section.rows = $section.rows.map(function (row, rowIndex) {
+          var $row = {
+            cells: [],
+            index: rowIndex,
+            raw: row,
+            indeterminate: false,
+            selected: includes(row, selectedRows),
+            disabled: includes(row, disabledRows),
+            tag: 'tr'
+          };
+
+          if (isArray(row)) {
+            $row.cells = row;
+          } else if (isObject(row)) {
+            if (isArray(row.cells)) {
+              assign($row, row);
+            } else {
+              forEach(row, function (cell, cellIndex) {
+                $row.cells.push({
+                  content: cell,
+                  index: cellIndex
+                });
+              });
+            }
+          } else {
+            throw new Error('Invalid table row: ' + JSON.stringify(row));
+          }
+
+          if (!selectable) {
+            $row.selected = false;
+          }
+
+          $row.cells = $row.cells.map(function (cell, cellIndex) {
+            var $cell = {
+              content: '',
+              index: cellIndex,
+              sortType: 0,
+              tag: $section.tag === 'thead' ? 'th' : 'td'
+            };
+
+            if (isObject(cell) && cell.content) {
+              assign($cell, cell);
+            } else {
+              $cell.content = cell;
+            }
+
+            return $cell;
+          });
+
+          return $row;
+        });
+
+        return $section;
+      });
+
+      this.sections = sections.sort(function (a, b) {
+        var orders = {
+          thead: 0,
+          tbody: 1,
+          tfoot: 2
+        };
+
+        return orders[a.tag] - orders[b.tag];
+      });
+
+      this.select();
+    },
+    sort: function sort(index, sortType) {
+      if (sortType > 2) {
+        sortType = 0;
+      }
+
+      this.sections.forEach(function (section) {
+        if (section.tag === 'thead') {
+          section.rows.forEach(function (row) {
+            row.cells.forEach(function (cell, cellIndex) {
+              cell.sortType = cellIndex === index ? sortType : 0;
+            });
+          });
+          return;
+        }
+
+        section.rows.sort(function (a, b) {
+          var cellA = a.cells[index];
+          var cellB = b.cells[index];
+
+          if (sortType > 0) {
+            var cellAContent = cellA.content;
+            var cellBContent = cellB.content;
+
+            switch (sortType) {
+              // Descending
+              case 2:
+                return [cellAContent, cellBContent].sort()[0] === cellAContent ? 1 : -1;
+
+              // Ascending
+              case 1:
+                return [cellAContent, cellBContent].sort()[0] === cellAContent ? -1 : 1;
+
+              default:
+            }
+          }
+
+          return a.index - b.index;
+        });
+      });
+    },
+
+
+    /**
+     * Select a row or all rows.
+     * @param {Array|Object|boolean} target - The target row or all rows if the value is `true`.
+     * @param {*} reversed - Indicate if the operation is reversed (deselect) or not.
+     */
+    select: function select(target) {
+      var reversed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+      if (!this.selectable) {
+        return;
+      }
+
+      var multiple = this.multiple;
+
+      var selectAll = multiple && target === true;
+      var selectedRows = [];
+      var totalRows = 0;
+      var thead = void 0;
+
+      this.sections.forEach(function (section) {
+        switch (section.tag) {
+          case 'thead':
+            thead = section;
+            break;
+
+          case 'tbody':
+            section.rows.forEach(function (row) {
+              totalRows += 1;
+
+              if (row.disabled) {
+                return;
+              }
+
+              if (!multiple && !isUndefined(target)) {
+                row.selected = false;
+              }
+
+              if (selectAll || row.raw === target) {
+                row.selected = !reversed;
+              }
+
+              if (row.selected) {
+                selectedRows.push(row.raw);
+              }
+            });
+            break;
+
+          // case 'tfoot':
+          default:
+        }
+      });
+
+      if (multiple && this.controls && thead) {
+        var row = thead.rows[thead.rows.length - 1];
+        var totalSelectedRows = selectedRows.length;
+
+        if (totalSelectedRows === totalRows) {
+          row.indeterminate = false;
+          row.selected = true;
+        } else if (totalSelectedRows > 0) {
+          row.selected = false;
+          row.indeterminate = true;
+        } else {
+          row.selected = false;
+          row.indeterminate = false;
+        }
+      }
+
+      if (!isUndefined(target)) {
+        this.$emit('change', selectedRows);
+      }
+    }
+  },
+
+  watch: {
+    data: function data() {
+      this.init();
+    }
+  },
+
+  mounted: function mounted() {
+    this.init();
+  }
+};
+
 var Textarea = { render: function render() {
@@ -1066,2 +1692,3 @@ var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('textarea', { staticClass: "eks-textarea", attrs: { "rows": _vm.rowsAsNumber }, domProps: { "value": _vm.currentValue }, on: { "input": _vm.input, "change": _vm.change } });
   Select: Select,
+  Table: Table,
   Textarea: Textarea,
@@ -1079,2 +1706,3 @@
     Vue.component(Select.name, Select);
+    Vue.component(Table.name, Table);
     Vue.component(Textarea.name, Textarea);
@@ -1081,0 +1709,0 @@ }

dist/eks.min.js

 /*!
- * Eks v0.1.0
+ * Eks v0.2.0
  * https://github.com/xkeshi/eks
@@ -8,4 +8,4 @@ *
  *
- * Date: 2017-09-17T09:06:41.137Z
+ * Date: 2017-10-12T06:12:32.094Z
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Eks=t()}(this,function(){"use strict";function e(e){return c.call(e).slice(8,-1).toLowerCase()}function t(e){return void 0===e}function n(e){return"string"==typeof e}function i(e){return"number"==typeof e&&!h(e)}function s(e){return"boolean"==typeof e}function a(e){return"object"===(void 0===e?"undefined":u(e))&&null!==e}function r(e,t){Array.isArray(e)?e.forEach(t):a(e)&&Object.keys(e).forEach(function(n){t(e[n],n,e)})}function o(e){return d(e)?e.map(function(e){return e.children?o(e.children):e.text}).join(""):""}var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},l=(function(){function e(e){this.value=e}function t(t){function n(s,a){try{var r=t[s](a),o=r.value;o instanceof e?Promise.resolve(o.value).then(function(e){n("next",e)},function(e){n("throw",e)}):i(r.done?"return":"normal",r.value)}catch(e){i("throw",e)}}function i(e,t){switch(e){case"return":s.resolve({value:t,done:!0});break;case"throw":s.reject(t);break;default:s.resolve({value:t,done:!1})}(s=s.next)?n(s.key,s.arg):a=null}var s,a;this._invoke=function(e,t){return new Promise(function(i,r){var o={key:e,arg:t,resolve:i,reject:r,next:null};a?a=a.next=o:(s=a=o,n(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}(),function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}),c=Object.prototype.toString,h=Number.isNaN||window.isNaN,d=Array.isArray||function(t){return"array"===e(t)},p=function(e,t){return t.includes?t.includes(e):-1!==t.indexOf(e)},m=Object.assign||function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];return a(e)&&n.length>0&&n.forEach(function(t){Object.keys(t).forEach(function(n){e[n]=t[n]})}),e},f={name:"eks-button",props:{block:Boolean,disabled:Boolean,outline:Boolean,size:String,tag:{type:String,default:"button"},type:{type:String,default:"button"}},computed:{types:function(){var e=["button","submit","reset"],t=["primary","secondary","success","danger","warning","info","light","dark","link"],n={native:e[0],custom:""};return this.type.split(/\s+/).forEach(function(i){p(i,e)?n.native=i:p(i,t)&&(n.custom=i)}),n}},render:function(e){var t,n=this.size,i=this.tag,s=this.types,a=this.$slots,r=this.$attrs,u=void 0===r?{}:r;return e(p(i,["button","input","a"])?i:"button",{class:(t={"eks-button":!0},l(t,"eks-button--"+s.custom,s.custom),l(t,"eks-button--"+n,n),l(t,"eks-button--block",this.block),l(t,"eks-button--outline",this.outline),t),attrs:{type:p(i,["button","input"])?s.native:u.type,value:u.value||"input"!==i?u.value:o(a.default),disabled:this.disabled},on:{click:this.click}},"input"!==i?a.default:void 0)},methods:{click:function(e){this.$emit("click",e)}}},b={name:"eks-col",props:{alignSelf:String,offset:[Number,String],order:[Number,String],span:[Number,String],tag:{type:String,default:"div"}},render:function(e){var t=this.alignSelf,s=this.offset,a=this.order,r=this.span,o=["eks-col",t?"eks-col--align-self-"+t:""],u=/\s+/;return i(r)?o.push("eks-col--span-"+r):n(r)?o.push(r.split(u).map(function(e){return"eks-col--span-"+e})):o.push("eks-col--span"),i(s)?o.push("eks-col--offset-"+s):n(s)&&o.push(s.split(u).map(function(e){return"eks-col--offset-"+e})),i(a)?o.push("eks-col--order-"+a):n(a)&&o.push(a.split(u).map(function(e){return"eks-col--order-"+e})),e(this.tag,{class:o},this.$slots.default)}},v={name:"eks-container",props:{fluid:Boolean,tag:{type:String,default:"div"}},render:function(e){return e(this.tag,{class:{"eks-container":!0,"eks-container--fluid":this.fluid}},this.$slots.default)}},k={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"eks-number-input",class:l({"eks-number-input--inline":e.inline,"eks-number-input--center":e.center,"eks-number-input--controls":e.controls},"eks-number-input--"+e.size,e.size),attrs:{value:e.value}},[e.controls?n("button",{staticClass:"eks-number-input__button eks-number-input__button--minus",attrs:{type:"button",disabled:e.disabled||e.readonly||!e.decreasable},on:{click:e.decrease}}):e._e(),n("eks-input",e._b({ref:"input",staticClass:"eks-number-input__input",attrs:{type:"number",value:e.currentValue,min:e.min,max:e.max,step:e.step,size:e.size,readonly:e.readonly,disabled:e.disabled||!e.decreasable&&!e.increasable},on:{change:e.change},nativeOn:{paste:function(t){e.paste(t)}}},"eks-input",e.$attrs,!1)),e.controls?n("button",{staticClass:"eks-number-input__button eks-number-input__button--plus",attrs:{type:"button",disabled:e.disabled||e.readonly||!e.increasable},on:{click:e.increase}}):e._e()],1)},staticRenderFns:[],name:"eks-number-input",inheritAttrs:!1,data:function(){return{currentValue:NaN}},model:{event:"change"},props:{value:Number,min:{type:Number,default:-1/0},max:{type:Number,default:1/0},step:{type:Number,default:1},size:String,inline:Boolean,center:Boolean,controls:Boolean,readonly:Boolean,disabled:Boolean},computed:{increasable:function(){var e=this.currentValue;return h(e)||e<this.max},decreasable:function(){var e=this.currentValue;return h(e)||e>this.min}},created:function(){this.min<=this.max&&(this.currentValue=Math.min(this.max,Math.max(this.min,this.value)))},methods:{change:function(e){this.setValue(Math.min(this.max,Math.max(this.min,e)))},paste:function(e){/^-?\d+$/.test(e.clipboardData.getData("text"))||e.preventDefault()},decrease:function(){if(this.decreasable){var e=this.currentValue;h(e)&&(e=0),this.setValue(Math.min(this.max,Math.max(this.min,e-this.step)))}},increase:function(){if(this.increasable){var e=this.currentValue;h(e)&&(e=0),this.setValue(Math.min(this.max,Math.max(this.min,e+this.step)))}},setValue:function(e){var t=this;this.$nextTick(function(){t.$refs.input.setValue(e)}),this.currentValue=e,this.$emit("change",e)}}},g={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("label",{staticClass:"eks-checkbox",class:{"eks-checkbox--disabled":e.disabled}},[n("input",e._b({ref:"input",staticClass:"eks-checkbox__input",attrs:{type:"checkbox",name:e.name,disabled:e.disabled},domProps:{value:e.value,checked:e.isChecked},on:{change:e.change}},"input",e.$attrs,!1)),e._v(" "),n("span",{staticClass:"eks-checkbox__indicator"}),e._t("default")],2)},staticRenderFns:[],name:"eks-checkbox",inheritAttrs:!1,model:{prop:"checkedValue",event:"change"},props:{checkedValue:null,checked:Boolean,disabled:Boolean,indeterminate:Boolean,name:String,value:{default:"on"}},computed:{isChecked:function(){var e=this.value,n=this.checkedValue,i=this.checked;return d(n)?i=p(e,n):s(n)?i=n:t(n)||(i=n===e),i}},methods:{change:function(e){var n=e.target,i=this.value,a=this.checkedValue,r=n.checked,o=n.value;if(d(a)){var u=a.indexOf(i);o=a.slice(),r?-1===u&&o.push(i):-1!==u&&o.splice(u,1)}else s(a)?o=r:t(a)||(o=a===i);this.$emit("change",o,a)},setIndeterminate:function(){this.$refs.input.indeterminate=this.indeterminate}},watch:{indeterminate:function(){this.setIndeterminate()}},mounted:function(){this.setIndeterminate()}},y={render:function(){var e,t=this,n=t.$createElement;return(t._self._c||n)("input",{staticClass:"eks-input",class:(e={},l(e,"eks-input--inline",t.inline),l(e,"eks-input--"+t.sizes.custom,t.sizes.custom),e),attrs:{size:t.sizes.native},on:{change:t.change}})},staticRenderFns:[],name:"eks-input",model:{event:"change"},props:{inline:Boolean,size:String},computed:{sizes:function(){var e=this.size,t=void 0,n=void 0;return p(e,["small","large"])?t=e:n=e,{custom:t,native:n}}},methods:{change:function(e){this.$emit("change",e.target.value)},setValue:function(e){this.$el.value=e}}},_={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("label",{staticClass:"eks-radio",class:{"eks-radio--disabled":e.disabled}},[n("input",e._b({staticClass:"eks-radio__input",attrs:{type:"radio",name:e.name,disabled:e.disabled},domProps:{value:e.value,checked:e.isChecked},on:{change:e.change}},"input",e.$attrs,!1)),e._v(" "),n("span",{staticClass:"eks-radio__indicator"}),e._t("default")],2)},staticRenderFns:[],name:"eks-radio",inheritAttrs:!1,model:{prop:"checkedValue",event:"change"},props:{checked:Boolean,checkedValue:null,disabled:Boolean,name:String,value:{default:"on"}},computed:{isChecked:function(){var e=this.checkedValue,n=this.checked;return t(e)||(n=e===this.value),n}},methods:{change:function(){this.$emit("change",this.value,this.checkedValue)}}},x={name:"eks-row",props:{alignItems:String,gutters:{type:Boolean,default:!0},justifyContent:String,tag:{type:String,default:"div"}},render:function(e){var t,n=this.alignItems,i=this.justifyContent;return e(this.tag,{class:(t={"eks-row":!0,"eks-row--gutters":this.gutters},l(t,"eks-row--align-items-"+n,n),l(t,"eks-row--justify-content-"+i,i),t)},this.$slots.default)}},w={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("select",{staticClass:"eks-select",class:l({"eks-select--inline":e.inline},"eks-select--"+e.sizes.custom,e.sizes.custom),attrs:{size:e.sizes.native},on:{change:e.change}},[e.placeholder?n("option",[e._v(e._s(e.placeholder))]):e._e(),e._l(e.list,function(t,i){return[t.options?n("optgroup",{key:i,attrs:{label:t.label,disabled:t.disabled}},e._l(t.options,function(t,i){return n("option",{key:i,attrs:{label:t.label,disabled:t.disabled},domProps:{value:t.value,selected:t.value===e.value||t.selected}},[e._v(e._s(void 0!==t.label?t.label:t.value))])})):n("option",{key:i,attrs:{label:t.label,disabled:t.disabled},domProps:{value:t.value,selected:t.value===e.value||t.selected}},[e._v(e._s(void 0!==t.label?t.label:t.value))])]}),e._t("default")],2)},staticRenderFns:[],name:"eks-select",model:{event:"change"},data:function(){return{list:[]}},props:{inline:Boolean,options:[Array,Object],placeholder:String,size:String,value:null},computed:{sizes:function(){var e=this.size,t=void 0,n=void 0;return p(e,["small","large"])?t=e:n=e,{custom:t,native:n}}},methods:{init:function(){this.list=function e(n){var i=[];return r(n,function(n,s){var r={value:n,selected:!1,disabled:!1};a(n)&&(d(n.options)?(t(n.label)||(r.label=n.label),t(n.value)||(r.value=n.value),r.options=e(n.options)):(r.label=s,m(r,n))),i.push(r)}),i}(this.options)},change:function(e){this.$emit("change",e.target.value)}},watch:{options:function(){this.init()}},mounted:function(){this.init()}},S={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("textarea",{staticClass:"eks-textarea",attrs:{rows:e.rowsAsNumber},domProps:{value:e.currentValue},on:{input:e.input,change:e.change}})},staticRenderFns:[],name:"eks-textarea",model:{event:"change"},props:{value:null,rows:{type:[Number,Array],default:2}},computed:{currentValue:function(){return t(this.value)?o(this.$slots.default):this.value},isArrayRows:function(){return d(this.rows)},rowsAsArray:function(){var e=this.rows,t=1,n=1/0;return this.isArrayRows&&(t=Math.max(e[0],t)||t,n=Math.min(e[1],n)||n,n=Math.max(n,t)),[t,n]},rowsAsNumber:function(){var e=this.rows;return this.isArrayRows?this.rowsAsArray[0]:Math.max(e,1)},maxHeight:function(){var e=this.rowsAsArray[1];return e===1/0?e:18+20*e}},methods:{input:function(e){var t=e.target;if(this.isArrayRows){var n=t.style;t.style.height="auto";var i=t.scrollHeight;i>t.clientHeight&&(n.height=Math.min(i+2,this.maxHeight)+"px")}},change:function(e){this.$emit("change",e.target.value)}}};return{Button:f,Col:b,Container:v,NumberInput:k,Checkbox:g,Input:y,Radio:_,Row:x,Select:w,Textarea:S,install:function(e){e.component(f.name,f),e.component(g.name,g),e.component(b.name,b),e.component(v.name,v),e.component(y.name,y),e.component(k.name,k),e.component(_.name,_),e.component(x.name,x),e.component(w.name,w),e.component(S.name,S)}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Eks=t()}(this,function(){"use strict";function e(e){return h.call(e).slice(8,-1).toLowerCase()}function t(e){return void 0===e}function n(e){return"string"==typeof e}function s(e){return"number"==typeof e&&!p(e)}function i(e){return"boolean"==typeof e}function a(e){return"object"===(void 0===e?"undefined":c(e))&&null!==e}function r(e){return"function"==typeof e}function o(e,t){Array.isArray(e)?e.forEach(t):a(e)&&Object.keys(e).forEach(function(n){t(e[n],n,e)})}function l(e){return f(e)?e.map(function(e){return e.children?l(e.children):e.text}).join(""):""}var c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u=(function(){function e(e){this.value=e}function t(t){function n(i,a){try{var r=t[i](a),o=r.value;o instanceof e?Promise.resolve(o.value).then(function(e){n("next",e)},function(e){n("throw",e)}):s(r.done?"return":"normal",r.value)}catch(e){s("throw",e)}}function s(e,t){switch(e){case"return":i.resolve({value:t,done:!0});break;case"throw":i.reject(t);break;default:i.resolve({value:t,done:!1})}(i=i.next)?n(i.key,i.arg):a=null}var i,a;this._invoke=function(e,t){return new Promise(function(s,r){var o={key:e,arg:t,resolve:s,reject:r,next:null};a?a=a.next=o:(i=a=o,n(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}(),function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}),d=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},h=Object.prototype.toString,p=Number.isNaN||window.isNaN,f=Array.isArray||function(t){return"array"===e(t)},m=function(e,t){return t.includes?t.includes(e):-1!==t.indexOf(e)},b=Object.assign||function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;s<t;s++)n[s-1]=arguments[s];return a(e)&&n.length>0&&n.forEach(function(t){Object.keys(t).forEach(function(n){e[n]=t[n]})}),e},v={name:"eks-button",props:{block:Boolean,disabled:Boolean,outline:Boolean,size:String,tag:{type:String,default:"button"},type:{type:String,default:"button"}},computed:{types:function(){var e=["button","submit","reset"],t=["primary","secondary","success","danger","warning","info","light","dark","link"],n={native:e[0],custom:""};return this.type.split(/\s+/).forEach(function(s){m(s,e)?n.native=s:m(s,t)&&(n.custom=s)}),n}},render:function(e){var t,n=this.size,s=this.tag,i=this.types,a=this.$slots,r=this.$attrs,o=void 0===r?{}:r;return e(m(s,["button","input","a"])?s:"button",{class:(t={"eks-button":!0},u(t,"eks-button--"+i.custom,i.custom),u(t,"eks-button--"+n,n),u(t,"eks-button--block",this.block),u(t,"eks-button--outline",this.outline),t),attrs:{type:m(s,["button","input"])?i.native:o.type,value:o.value||"input"!==s?o.value:l(a.default),disabled:this.disabled},on:{click:this.click}},"input"!==s?a.default:void 0)},methods:{click:function(e){this.$emit("click",e)}}},k={name:"eks-col",props:{alignSelf:String,offset:[Number,String],order:[Number,String],span:[Number,String],tag:{type:String,default:"div"}},render:function(e){var t=this.alignSelf,i=this.offset,a=this.order,r=this.span,o=["eks-col",t?"eks-col--align-self-"+t:""],l=/\s+/;return s(r)?o.push("eks-col--span-"+r):n(r)?o.push(r.split(l).map(function(e){return"eks-col--span-"+e})):o.push("eks-col--span"),s(i)?o.push("eks-col--offset-"+i):n(i)&&o.push(i.split(l).map(function(e){return"eks-col--offset-"+e})),s(a)?o.push("eks-col--order-"+a):n(a)&&o.push(a.split(l).map(function(e){return"eks-col--order-"+e})),e(this.tag,{class:o},this.$slots.default)}},y={name:"eks-container",props:{fluid:Boolean,tag:{type:String,default:"div"}},render:function(e){return e(this.tag,{class:{"eks-container":!0,"eks-container--fluid":this.fluid}},this.$slots.default)}},g={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"eks-number-input",class:u({"eks-number-input--inline":e.inline,"eks-number-input--center":e.center,"eks-number-input--controls":e.controls},"eks-number-input--"+e.size,e.size),attrs:{value:e.value}},[e.controls?n("button",{staticClass:"eks-number-input__button eks-number-input__button--minus",attrs:{type:"button",disabled:e.disabled||e.readonly||!e.decreasable},on:{click:e.decrease}}):e._e(),e._v(" "),n("eks-input",e._b({ref:"input",staticClass:"eks-number-input__input",attrs:{type:"number",value:e.currentValue,min:e.min,max:e.max,step:e.step,size:e.size,readonly:e.readonly,disabled:e.disabled||!e.decreasable&&!e.increasable},on:{change:e.change},nativeOn:{paste:function(t){e.paste(t)}}},"eks-input",e.$attrs,!1)),e._v(" "),e.controls?n("button",{staticClass:"eks-number-input__button eks-number-input__button--plus",attrs:{type:"button",disabled:e.disabled||e.readonly||!e.increasable},on:{click:e.increase}}):e._e()],1)},staticRenderFns:[],name:"eks-number-input",inheritAttrs:!1,data:function(){return{currentValue:NaN}},model:{event:"change"},props:{value:Number,min:{type:Number,default:-1/0},max:{type:Number,default:1/0},step:{type:Number,default:1},size:String,inline:Boolean,center:Boolean,controls:Boolean,readonly:Boolean,disabled:Boolean},computed:{increasable:function(){var e=this.currentValue;return p(e)||e<this.max},decreasable:function(){var e=this.currentValue;return p(e)||e>this.min}},created:function(){this.min<=this.max&&(this.currentValue=Math.min(this.max,Math.max(this.min,this.value)))},methods:{change:function(e){this.setValue(Math.min(this.max,Math.max(this.min,e)))},paste:function(e){/^-?\d+$/.test(e.clipboardData.getData("text"))||e.preventDefault()},decrease:function(){if(this.decreasable){var e=this.currentValue;p(e)&&(e=0),this.setValue(Math.min(this.max,Math.max(this.min,e-this.step)))}},increase:function(){if(this.increasable){var e=this.currentValue;p(e)&&(e=0),this.setValue(Math.min(this.max,Math.max(this.min,e+this.step)))}},setValue:function(e){var t=this;this.$nextTick(function(){t.$refs.input.setValue(e)}),this.currentValue=e,this.$emit("change",e)}}},_={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("label",{staticClass:"eks-checkbox",class:{"eks-checkbox--disabled":e.disabled}},[n("input",e._b({ref:"input",staticClass:"eks-checkbox__input",attrs:{type:"checkbox",name:e.name,disabled:e.disabled},domProps:{value:e.value,checked:e.isChecked},on:{change:e.change}},"input",e.$attrs,!1)),e._v(" "),n("span",{staticClass:"eks-checkbox__indicator"}),e._v(" "),e._t("default")],2)},staticRenderFns:[],name:"eks-checkbox",inheritAttrs:!1,model:{prop:"checkedValue",event:"change"},props:{checkedValue:null,checked:Boolean,disabled:Boolean,indeterminate:Boolean,name:String,value:{default:"on"}},computed:{isChecked:function(){var e=this.value,n=this.checkedValue,s=this.checked;return f(n)?s=m(e,n):i(n)?s=n:t(n)||(s=n===e),s}},methods:{change:function(e){var n=e.target,s=this.value,a=this.checkedValue,r=n.checked,o=n.value;if(f(a)){var l=a.indexOf(s);o=a.slice(),r?-1===l&&o.push(s):-1!==l&&o.splice(l,1)}else i(a)?o=r:t(a)||(o=a===s);this.$emit("change",o,a)},setIndeterminate:function(){this.$refs.input.indeterminate=this.indeterminate}},watch:{indeterminate:function(){this.setIndeterminate()}},mounted:function(){this.setIndeterminate()}},w={render:function(){var e,t=this,n=t.$createElement;return(t._self._c||n)("input",{staticClass:"eks-input",class:(e={},u(e,"eks-input--inline",t.inline),u(e,"eks-input--"+t.sizes.custom,t.sizes.custom),e),attrs:{size:t.sizes.native},on:{change:t.change}})},staticRenderFns:[],name:"eks-input",model:{event:"change"},props:{inline:Boolean,size:String},computed:{sizes:function(){var e=this.size,t=void 0,n=void 0;return m(e,["small","large"])?t=e:n=e,{custom:t,native:n}}},methods:{change:function(e){this.$emit("change",e.target.value)},setValue:function(e){this.$el.value=e}}},x={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("label",{staticClass:"eks-radio",class:{"eks-radio--disabled":e.disabled}},[n("input",e._b({staticClass:"eks-radio__input",attrs:{type:"radio",name:e.name,disabled:e.disabled},domProps:{value:e.value,checked:e.isChecked},on:{change:e.change}},"input",e.$attrs,!1)),e._v(" "),n("span",{staticClass:"eks-radio__indicator"}),e._v(" "),e._t("default")],2)},staticRenderFns:[],name:"eks-radio",inheritAttrs:!1,model:{prop:"checkedValue",event:"change"},props:{checked:Boolean,checkedValue:null,disabled:Boolean,name:String,value:{default:"on"}},computed:{isChecked:function(){var e=this.checkedValue,n=this.checked;return t(e)||(n=e===this.value),n}},methods:{change:function(){this.$emit("change",this.value,this.checkedValue)}}},S={name:"eks-row",props:{alignItems:String,gutters:{type:Boolean,default:!0},justifyContent:String,tag:{type:String,default:"div"}},render:function(e){var t,n=this.alignItems,s=this.justifyContent;return e(this.tag,{class:(t={"eks-row":!0,"eks-row--gutters":this.gutters},u(t,"eks-row--align-items-"+n,n),u(t,"eks-row--justify-content-"+s,s),t)},this.$slots.default)}},$={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("select",{staticClass:"eks-select",class:u({"eks-select--inline":e.inline},"eks-select--"+e.sizes.custom,e.sizes.custom),attrs:{size:e.sizes.native},on:{change:e.change}},[e.placeholder?n("option",[e._v(e._s(e.placeholder))]):e._e(),e._v(" "),e._l(e.list,function(t,s){return[t.options?n("optgroup",{key:s,attrs:{label:t.label,disabled:t.disabled}},e._l(t.options,function(t,s){return n("option",{key:s,attrs:{label:t.label,disabled:t.disabled},domProps:{value:t.value,selected:t.value===e.value||t.selected}},[e._v(e._s(void 0!==t.label?t.label:t.value))])})):n("option",{key:s,attrs:{label:t.label,disabled:t.disabled},domProps:{value:t.value,selected:t.value===e.value||t.selected}},[e._v(e._s(void 0!==t.label?t.label:t.value))])]}),e._v(" "),e._t("default")],2)},staticRenderFns:[],name:"eks-select",model:{event:"change"},data:function(){return{list:[]}},props:{inline:Boolean,options:[Array,Object],placeholder:String,size:String,value:null},computed:{sizes:function(){var e=this.size,t=void 0,n=void 0;return m(e,["small","large"])?t=e:n=e,{custom:t,native:n}}},methods:{init:function(){this.list=function e(n){var s=[];return o(n,function(n,i){var r={value:n,selected:!1,disabled:!1};a(n)&&(f(n.options)?(t(n.label)||(r.label=n.label),t(n.value)||(r.value=n.value),r.options=e(n.options)):(r.label=i,b(r,n))),s.push(r)}),s}(this.options)},change:function(e){this.$emit("change",e.target.value)}},watch:{options:function(){this.init()}},mounted:function(){this.init()}},A={name:"eks-table-cell",props:{colSpan:Number,content:null,headers:String,index:null,rowSpan:Number,sortable:Boolean,sortType:{type:Number,default:0},scope:String,tag:{type:String,default:"td"}},computed:{$table:function(){return this.$parent.$parent.$parent}},render:function(e){var t=this,n=this.content,s=this.sortType,i=this.sortable,o={};return a(n)?b(o,n):r(n)?o.render=function(e){return n.call(t,e,t)}:o.template="<span>"+n+"</span>",e(this.tag,{attrs:{colSpan:this.colSpan,headers:this.headers,rowSpan:this.rowSpan,scope:this.scope},class:{"eks-table__cell":!0,"eks-table__cell--sortable":i,"eks-table__cell--ascended":i&&1===s,"eks-table__cell--descended":i&&2===s},on:i?{click:this.click}:null},[e("div",{class:"eks-table__content"},[e(o),i?e("i",{class:"eks-table__icon eks-table__icon--sort"},[e("span",{on:{click:function(){t.sortType=0}}}),e("span",{on:{click:function(){t.sortType=1}}})]):void 0])])},methods:{click:function(){this.sortable&&this.$table.sort(this.index,this.sortType+1)}}},B={name:"eks-table-row",props:{cells:{type:Array,required:!0},disabled:Boolean,indeterminate:Boolean,index:null,selected:Boolean,raw:[Array,Object],tag:{type:String,default:"tr"}},computed:{$table:function(){return this.$parent.$parent},inHeader:function(){return"thead"===this.$parent.tag},selectable:function(){return this.$table.selectable},multiple:function(){return this.$table.multiple},controls:function(){return this.$table.controls}},render:function(e){var t=this.selectable,n=this.multiple,s=this.controls,i=this.inHeader,a=this.indeterminate,r=this.selected,o=this.disabled,l=[].concat(d(this.cells));return t&&s&&l.unshift({content:function(e){return e(n?"eks-checkbox":"eks-radio",{props:{indeterminate:a,checked:r,disabled:!n&&i||o}})}}),e(this.tag,{class:{"eks-table__row":!0,"eks-table__row--disabled":t&&o&&!i,"eks-table__row--selected":t&&r&&!s&&!i},on:{click:this.click}},l.map(function(t,n){return e(A,{key:n,props:t,style:t.style})}))},methods:{click:function(){if(this.selectable&&!this.disabled){var e=this.$table,t=this.multiple;this.inHeader?t&&this.controls&&e.select(!0,this.selected||this.indeterminate):e.select(this.raw,t&&this.selected)}}}},C={name:"eks-table-section",props:{index:null,rows:{type:Array,required:!0},tag:{type:String,default:"tbody"}},render:function(e){return e(this.tag,{class:"eks-table__section"},this.rows.map(function(t,n){return e(B,{key:n,props:t,style:t.style})}))}},V=window.JSON,z={name:"eks-table",data:function(){return{sections:[]}},model:{prop:"selectedRows",event:"change"},props:{bordered:Boolean,caption:String,colgroup:Array,controls:Boolean,data:Array,disabledRows:Array,hoverable:Boolean,multiple:Boolean,responsive:Boolean,selectable:Boolean,selectedRows:Array,size:String,striped:Boolean,tag:{type:String,default:"table"}},render:function(e){var t=this.caption,n=this.colgroup,s=this.size,i=[];return t&&i.push(e("caption",{domProps:{textContent:t}})),n&&i.push(e("colgroup",n.map(function(t,n){return e("col",{attrs:{span:t.span},key:n,style:t.style})}))),e(this.tag,{class:u({"eks-table":!0,"eks-table--bordered":this.bordered,"eks-table--hoverable":this.hoverable,"eks-table--selectable":this.selectable,"eks-table--multiple":this.multiple,"eks-table--controls":this.controls,"eks-table--responsive":this.responsive,"eks-table--striped":this.striped},"eks-table--"+s,s)},i.concat(this.sections.map(function(t,n){return e(C,{key:n,props:t,style:t.style})})))},methods:{init:function(){var e=this.data,t=this.selectable,n=this.selectedRows,s=void 0===n?[]:n,i=this.disabledRows,r=void 0===i?[]:i;if(f(e)){var l={rows:[],tag:"tbody"},c=[];e.forEach(function(e,t){if(a(e)){if(f(e.rows))return void c.push(b({index:t,rows:[],tag:"tbody"},e))}else if(!f(e))throw new Error("Invalid table section: "+V.stringify(e));l.rows.push(e),m(l,c)||c.push(l)}),c=c.map(function(e,n){var i={index:n,rows:[],tag:"tbody"};if(f(e))i.rows=e;else{if(!a(e))throw new Error("Invalid table section: "+V.stringify(e));f(e.rows)?b(i,e):o(e,function(e,t){i.rows.push({cells:e,index:t})})}return i.rows=i.rows.map(function(e,n){var l={cells:[],index:n,raw:e,indeterminate:!1,selected:m(e,s),disabled:m(e,r),tag:"tr"};if(f(e))l.cells=e;else{if(!a(e))throw new Error("Invalid table row: "+V.stringify(e));f(e.cells)?b(l,e):o(e,function(e,t){l.cells.push({content:e,index:t})})}return t||(l.selected=!1),l.cells=l.cells.map(function(e,t){var n={content:"",index:t,sortType:0,tag:"thead"===i.tag?"th":"td"};return a(e)&&e.content?b(n,e):n.content=e,n}),l}),i}),this.sections=c.sort(function(e,t){var n={thead:0,tbody:1,tfoot:2};return n[e.tag]-n[t.tag]}),this.select()}},sort:function(e,t){t>2&&(t=0),this.sections.forEach(function(n){"thead"!==n.tag?n.rows.sort(function(n,s){var i=n.cells[e],a=s.cells[e];if(t>0){var r=i.content,o=a.content;switch(t){case 2:return[r,o].sort()[0]===r?1:-1;case 1:return[r,o].sort()[0]===r?-1:1}}return n.index-s.index}):n.rows.forEach(function(n){n.cells.forEach(function(n,s){n.sortType=s===e?t:0})})})},select:function(e){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(this.selectable){var s=this.multiple,i=s&&!0===e,a=[],r=0,o=void 0;if(this.sections.forEach(function(l){switch(l.tag){case"thead":o=l;break;case"tbody":l.rows.forEach(function(o){r+=1,o.disabled||(s||t(e)||(o.selected=!1),(i||o.raw===e)&&(o.selected=!n),o.selected&&a.push(o.raw))})}}),s&&this.controls&&o){var l=o.rows[o.rows.length-1],c=a.length;c===r?(l.indeterminate=!1,l.selected=!0):c>0?(l.selected=!1,l.indeterminate=!0):(l.selected=!1,l.indeterminate=!1)}t(e)||this.$emit("change",a)}}},watch:{data:function(){this.init()}},mounted:function(){this.init()}},N={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("textarea",{staticClass:"eks-textarea",attrs:{rows:e.rowsAsNumber},domProps:{value:e.currentValue},on:{input:e.input,change:e.change}})},staticRenderFns:[],name:"eks-textarea",model:{event:"change"},props:{value:null,rows:{type:[Number,Array],default:2}},computed:{currentValue:function(){return t(this.value)?l(this.$slots.default):this.value},isArrayRows:function(){return f(this.rows)},rowsAsArray:function(){var e=this.rows,t=1,n=1/0;return this.isArrayRows&&(t=Math.max(e[0],t)||t,n=Math.min(e[1],n)||n,n=Math.max(n,t)),[t,n]},rowsAsNumber:function(){var e=this.rows;return this.isArrayRows?this.rowsAsArray[0]:Math.max(e,1)},maxHeight:function(){var e=this.rowsAsArray[1];return e===1/0?e:18+20*e}},methods:{input:function(e){var t=e.target;if(this.isArrayRows){var n=t.style;t.style.height="auto";var s=t.scrollHeight;s>t.clientHeight&&(n.height=Math.min(s+2,this.maxHeight)+"px")}},change:function(e){this.$emit("change",e.target.value)}}};return{Button:v,Col:k,Container:y,NumberInput:g,Checkbox:_,Input:w,Radio:x,Row:S,Select:$,Table:z,Textarea:N,install:function(e){e.component(v.name,v),e.component(_.name,_),e.component(k.name,k),e.component(y.name,y),e.component(w.name,w),e.component(g.name,g),e.component(x.name,x),e.component(S.name,S),e.component($.name,$),e.component(z.name,z),e.component(N.name,N)}}});

package.json

 {
   "name": "eks",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A series of Vue components.",
@@ -44,3 +44,3 @@ "main": "dist/eks.common.js",
     "lint:docs": "eslint docs/src --ext .js,.vue,.md --fix",
-    "postbuild": "npm run compress && npm run test && npm run deploy",
+    "postbuild": "npm run compress && npm test && npm run deploy",
     "prebuild": "npm run lint && npm run clear",
@@ -68,8 +68,8 @@ "start": "npm run dev",
     "cssnano": "^3.10.0",
-    "eslint": "^4.6.1",
-    "eslint-config-airbnb-base": "^12.0.0",
+    "eslint": "^4.8.0",
+    "eslint-config-airbnb-base": "^12.0.2",
     "eslint-plugin-html": "^3.2.1",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-markdown": "^1.0.0-beta.7",
-    "file-loader": "^0.11.2",
+    "file-loader": "^1.1.5",
     "highlight.js": "^9.12.0",
@@ -86,6 +86,6 @@ "html-webpack-plugin": "^2.30.1",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.4",
+    "karma-webpack": "^2.0.5",
     "markdown-to-vue-loader": "^0.1.1",
-    "mocha": "^3.5.3",
-    "postcss": "^6.0.11",
+    "mocha": "^4.0.1",
+    "postcss": "^6.0.13",
     "postcss-atrule-bem": "^3.0.1",
@@ -95,6 +95,7 @@ "postcss-cli": "^4.1.1",
     "postcss-for": "^2.1.1",
-    "postcss-loader": "^2.0.6",
+    "postcss-header": "^1.0.0",
+    "postcss-loader": "^2.0.7",
     "postcss-smart-import": "^0.7.5",
     "rimraf": "^2.6.2",
-    "rollup": "^0.49.3",
+    "rollup": "^0.50.0",
     "rollup-plugin-babel": "^3.0.2",
@@ -104,13 +105,14 @@ "rollup-plugin-commonjs": "^8.2.1",
     "rollup-plugin-postcss": "^0.5.5",
-    "rollup-plugin-vue": "^2.4.2",
-    "style-loader": "^0.18.2",
+    "rollup-plugin-vue": "^2.5.2",
+    "style-loader": "^0.19.0",
     "stylefmt": "^6.0.0",
-    "uglify-js": "^3.1.0",
+    "uglify-js": "^3.1.3",
     "vue": "^2.4.4",
-    "vue-loader": "^13.0.4",
-    "vue-router": "^2.7.0",
-    "vuex": "^2.4.0",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.8.2"
+    "vue-loader": "^13.3.0",
+    "vue-router": "^2.8.0",
+    "vue-template-compiler": "^2.4.4",
+    "vuex": "^2.5.0",
+    "webpack": "^3.7.1",
+    "webpack-dev-server": "^2.9.1"
   }
 }

README.md

@@ -13,3 +13,3 @@ # Eks
 
-```bash
+```shell
 npm install eks
@@ -16,0 +16,0 @@ ```

src/index.js

@@ -10,2 +10,3 @@ import Button from './components/button';
 import Select from './components/select/index.vue';
+import Table from './components/table';
 import Textarea from './components/textarea/index.vue';
@@ -23,2 +24,3 @@
   Select,
+  Table,
   Textarea,
@@ -36,4 +38,5 @@
     Vue.component(Select.name, Select);
+    Vue.component(Table.name, Table);
     Vue.component(Textarea.name, Textarea);
   },
 };

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

367270

increased by25.59%

Number of package files

42

increased by13.51%

Lines of code

8893

increased by36.75%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

56

increased by3.7%

No dependency changes