kdutify 0.16.9-rc.0

package/es5/components/KDatePicker/mixins/date-table.js

@@ -0,0 +1,101 @@
+export default {
+  methods: {
+    dateWheelScroll: function dateWheelScroll(e) {
+      e.preventDefault();
+
+      var month = this.tableMonth;
+
+      if (e.deltaY < 0) month++;else month--;
+
+      this.tableDate = this.normalizeDate(this.tableYear, month);
+    },
+    dateGenTHead: function dateGenTHead() {
+      var _this = this;
+
+      var days = this.narrowDays.map(function (day) {
+        return _this.$createElement('th', day);
+      });
+      return this.$createElement('thead', this.dateGenTR(days));
+    },
+    dateClick: function dateClick(day) {
+      var _this2 = this;
+
+      this.inputDate = this.normalizeDate(this.tableYear, this.tableMonth, day);
+      this.$nextTick(function () {
+        return _this2.autosave && _this2.save();
+      });
+    },
+    dateGenButtonText: function dateGenButtonText(date, day) {
+      return this.supportsLocaleFormat ? date.toLocaleDateString(this.locale, {
+        day: 'numeric',
+        timeZone: this.timeZone
+      }) : day;
+    },
+    dateGenTD: function dateGenTD(day) {
+      var _this3 = this;
+
+      var date = this.normalizeDate(this.tableYear, this.tableMonth, day);
+      var buttonText = this.dateGenButtonText(date, day);
+      var button = this.$createElement('button', {
+        staticClass: 'btn btn--date-picker btn--floating btn--small btn--flat',
+        'class': {
+          'btn--active': this.dateIsActive(day),
+          'btn--outline': this.dateIsCurrent(day) && !this.dateIsActive(day),
+          'btn--disabled': !this.isAllowed(date)
+        },
+        attrs: {
+          type: 'button'
+        },
+        domProps: {
+          innerHTML: '<span class="btn__content">' + buttonText + '</span>'
+        },
+        on: {
+          click: function click() {
+            return _this3.dateClick(day);
+          }
+        }
+      });
+
+      return this.$createElement('td', [button]);
+    },
+    dateGenTBody: function dateGenTBody() {
+      var children = [];
+      var daysInMonth = this.normalizeDate(this.tableYear, this.tableMonth + 1, 0).getDate();
+      var rows = [];
+      var day = (this.normalizeDate(this.tableYear, this.tableMonth).getDay() - parseInt(this.firstDayOfWeek) + 7) % 7;
+
+      for (var i = 0; i < day; i++) {
+        rows.push(this.$createElement('td'));
+      }
+
+      for (var _i = 1; _i <= daysInMonth; _i++) {
+        rows.push(this.dateGenTD(_i));
+
+        if (rows.length % 7 === 0) {
+          children.push(this.dateGenTR(rows));
+          rows = [];
+        }
+      }
+
+      if (rows.length) {
+        children.push(this.dateGenTR(rows));
+      }
+
+      children.length < 6 && children.push(this.dateGenTR([this.$createElement('td', { domProps: { innerHTML: '&nbsp;' } })]));
+
+      return this.$createElement('tbody', children);
+    },
+    dateGenTR: function dateGenTR() {
+      var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+      return [this.$createElement('tr', data, children)];
+    },
+    dateIsActive: function dateIsActive(i) {
+      return this.tableYear === this.year && this.tableMonth === this.month && this.day === i;
+    },
+    dateIsCurrent: function dateIsCurrent(i) {
+      return this.currentYear === this.tableYear && this.currentMonth === this.tableMonth && this.currentDay === i;
+    }
+  }
+};

package/es5/components/KDatePicker/mixins/date-title.js

@@ -0,0 +1,64 @@
+
+export default {
+  methods: {
+    genYearIcon: function genYearIcon() {
+      return this.yearIcon ? this.$createElement('k-icon', {
+        props: {
+          dark: true
+        }
+      }, this.yearIcon) : null;
+    },
+    getYearBtn: function getYearBtn() {
+      var _this = this;
+
+      var titleDate = this.normalizeDate(this.year, this.month, this.day);
+      return this.$createElement('div', {
+        'class': {
+          'picker--date__title-year': true,
+          'active': this.activePicker === 'YEAR'
+        },
+        on: {
+          click: function click(e) {
+            e.stopPropagation();
+            _this.activePicker = 'YEAR';
+          }
+        }
+      }, [this.supportsLocaleFormat ? titleDate.toLocaleDateString(this.locale, {
+        year: 'numeric',
+        timeZone: this.timeZone
+      }) : this.year, this.genYearIcon()]);
+    },
+    genTitleText: function genTitleText(title) {
+      return this.$createElement('transition', {
+        props: {
+          name: 'slide-y-reverse-transition',
+          mode: 'out-in'
+        }
+      }, [this.$createElement('div', {
+        domProps: { innerHTML: title },
+        key: title
+      })]);
+    },
+    genTitleDate: function genTitleDate(title) {
+      var _this2 = this;
+
+      return this.$createElement('div', {
+        staticClass: 'picker--date__title-date',
+        'class': {
+          'active': this.activePicker === this.type.toUpperCase()
+        },
+        on: {
+          click: function click(e) {
+            e.stopPropagation();
+            _this2.activePicker = _this2.type.toUpperCase();
+          }
+        }
+      }, [this.genTitleText(title)]);
+    },
+    genTitle: function genTitle(title) {
+      return this.$createElement('div', {
+        'class': 'picker__title'
+      }, [this.getYearBtn(), this.genTitleDate(title)]);
+    }
+  }
+};

package/es5/components/KDatePicker/mixins/date-years.js

@@ -0,0 +1,53 @@
+export default {
+  methods: {
+    genYears: function genYears() {
+      return this.$createElement('ul', {
+        staticClass: 'picker--date__years',
+        key: 'year',
+        ref: 'years'
+      }, this.genYearItems());
+    },
+    yearClick: function yearClick(year) {
+      var _this = this;
+
+      this.inputDate = this.normalizeDate(year, this.tableMonth, this.day);
+
+      if (this.type === 'year') {
+        this.$nextTick(function () {
+          return _this.autosave && _this.save();
+        });
+      } else {
+        this.activePicker = 'MONTH';
+      }
+    },
+    genYearItems: function genYearItems() {
+      var _this2 = this;
+
+      var children = [];
+
+      var _loop = function _loop(year, length) {
+        var date = _this2.normalizeDate(year, _this2.month, _this2.day);
+        var buttonText = _this2.supportsLocaleFormat ? date.toLocaleDateString(_this2.locale, {
+          year: 'numeric',
+          timeZone: _this2.timeZone
+        }) : year;
+
+        children.push(_this2.$createElement('li', {
+          'class': {
+            active: _this2.year === year
+          },
+          on: {
+            click: function click() {
+              return _this2.yearClick(year);
+            }
+          }
+        }, buttonText));
+      };
+
+      for (var year = this.year + 100, length = this.year - 100; year > length; year--) {
+        _loop(year, length);
+      }
+      return children;
+    }
+  }
+};

package/es5/components/KDatePicker/mixins/month-table.js

@@ -0,0 +1,91 @@
+export default {
+  methods: {
+    monthWheelScroll: function monthWheelScroll(e) {
+      e.preventDefault();
+
+      var year = this.tableYear;
+
+      if (e.deltaY < 0) year++;else year--;
+
+      this.tableDate = this.normalizeDate(year);
+    },
+    monthClick: function monthClick(month) {
+      var _this = this;
+
+      this.inputDate = this.normalizeDate(this.tableYear, month, this.day);
+      if (this.type === 'date') {
+        this.activePicker = 'DATE';
+      } else {
+        this.$nextTick(function () {
+          return _this.autosave && _this.save();
+        });
+      }
+    },
+    monthGenTD: function monthGenTD(month) {
+      var _this2 = this;
+
+      var date = this.normalizeDate(this.tableYear, month);
+      var monthName = void 0;
+
+      if (typeof this.monthFormat === 'function') {
+        monthName = this.monthFormat(date);
+      } else if (this.supportsLocaleFormat) {
+        monthName = date.toLocaleDateString(this.locale, Object.assign(this.monthFormat, {
+          timeZone: this.timeZone
+        }));
+      } else {
+        monthName = date.getMonth() + 1;
+        if (monthName < 10) {
+          monthName = '0' + monthName;
+        }
+      }
+
+      return this.$createElement('td', [this.$createElement('button', {
+        'class': {
+          'btn btn--date-picker': true,
+          'btn--raised': this.monthIsActive(month),
+          'btn--flat': true,
+          'btn--active': this.monthIsActive(month),
+          'btn--outline': this.monthIsCurrent(month) && !this.monthIsActive(month),
+          'btn--disabled': this.type === 'month' && !this.isAllowed(date)
+        },
+        attrs: {
+          type: 'button'
+        },
+        domProps: {
+          innerHTML: '<span class="btn__content">' + monthName + '</span>'
+        },
+        on: {
+          click: function click() {
+            return _this2.monthClick(month);
+          }
+        }
+      })]);
+    },
+    monthGenTBody: function monthGenTBody() {
+      var _this3 = this;
+
+      var children = [];
+      var cols = Array(3).fill(null);
+      var rows = 12 / cols.length;
+
+      var _loop = function _loop(row) {
+        children.push(_this3.$createElement('tr', cols.map(function (_, col) {
+          return _this3.monthGenTD(row * cols.length + col);
+        })));
+      };
+
+      for (var row = 0; row < rows; row++) {
+        _loop(row);
+      }
+
+      return this.$createElement('tbody', children);
+    },
+    monthIsActive: function monthIsActive(i) {
+      return this.tableYear === this.year && this.month === i;
+    },
+    monthIsCurrent: function monthIsCurrent(i) {
+      return this.currentYear === this.tableYear && this.currentMonth === i;
+    }
+  }
+};

package/es5/components/KDialog/KDialog.js

@@ -0,0 +1,181 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+require('../../../src/stylus/components/_dialogs.styl');
+
+// Mixins
+import Dependent from '../../mixins/dependent';
+import Detachable from '../../mixins/detachable';
+import Overlayable from '../../mixins/overlayable';
+import Stackable from '../../mixins/stackable';
+import Toggleable from '../../mixins/toggleable';
+
+// Directives
+import ClickOutside from '../../directives/click-outside';
+
+// Helpers
+import { getZIndex } from '../../util/helpers';
+
+export default {
+  name: 'k-dialog',
+
+  mixins: [Dependent, Detachable, Overlayable, Stackable, Toggleable],
+
+  directives: {
+    ClickOutside: ClickOutside
+  },
+
+  data: function data() {
+    return {
+      isDependent: false,
+      stackClass: 'dialog__content__active',
+      stackMinZIndex: 200
+    };
+  },
+
+
+  props: {
+    disabled: Boolean,
+    persistent: Boolean,
+    fullscreen: Boolean,
+    fullWidth: Boolean,
+    maxWidth: {
+      type: [String, Number],
+      default: 290
+    },
+    origin: {
+      type: String,
+      default: 'center center'
+    },
+    width: [String, Number],
+    scrollable: Boolean,
+    transition: {
+      type: [String, Boolean],
+      default: 'dialog-transition'
+    }
+  },
+
+  computed: {
+    classes: function classes() {
+      var _ref;
+
+      return _ref = {}, _defineProperty(_ref, ('dialog ' + this.contentClass).trim(), true), _defineProperty(_ref, 'dialog--active', this.isActive), _defineProperty(_ref, 'dialog--persistent', this.persistent), _defineProperty(_ref, 'dialog--fullscreen', this.fullscreen), _defineProperty(_ref, 'dialog--stacked-actions', this.stackedActions && !this.fullscreen), _defineProperty(_ref, 'dialog--scrollable', this.scrollable), _ref;
+    },
+    contentClasses: function contentClasses() {
+      return {
+        'dialog__content': true,
+        'dialog__content__active': this.isActive
+      };
+    }
+  },
+
+  watch: {
+    isActive: function isActive(val) {
+      if (val) {
+        this.show();
+      } else {
+        this.removeOverlay();
+        this.unbind();
+      }
+    }
+  },
+
+  mounted: function mounted() {
+    this.isBooted = this.isActive;
+    this.$kdutify.load(this.init);
+  },
+  beforeDestroy: function beforeDestroy() {
+    if (typeof window !== 'undefined') this.unbind();
+  },
+
+
+  methods: {
+    closeConditional: function closeConditional(e) {
+      // close dialog if !persistent, clicked outside and we're the topmost dialog.
+      // Since this should only be called in a capture event (bottom up), we shouldn't need to stop propagation
+      return !this.persistent && getZIndex(this.$refs.content) >= this.getMaxZIndex();
+    },
+    init: function init() {
+      this.isActive && this.show();
+    },
+    show: function show() {
+      !this.fullscreen && !this.hideOverlay && this.genOverlay();
+      this.fullscreen && this.hideScroll();
+      this.$refs.content.focus();
+      this.$listeners.keydown && this.bind();
+    },
+    bind: function bind() {
+      window.addEventListener('keydown', this.onKeydown);
+    },
+    unbind: function unbind() {
+      window.removeEventListener('keydown', this.onKeydown);
+    },
+    onKeydown: function onKeydown(e) {
+      this.$emit('keydown', e);
+    }
+  },
+
+  render: function render(h) {
+    var _this = this;
+
+    var children = [];
+    var data = {
+      'class': this.classes,
+      ref: 'dialog',
+      directives: [{
+        name: 'click-outside',
+        value: {
+          callback: this.closeConditional,
+          include: this.getOpenDependentElements
+        }
+      }, { name: 'show', value: this.isActive }],
+      on: { click: function click(e) {
+          return e.stopPropagation();
+        } }
+    };
+
+    if (!this.fullscreen) {
+      var width = this.maxWidth;
+
+      if (this.width) {
+        console.log('The {width} property is being deprecated, please use {max-width}.');
+        // TODO: Deprecate
+        width = this.width;
+      }
+
+      data.style = {
+        maxWidth: isNaN(width) ? width : width + 'px'
+      };
+    }
+
+    if (this.$slots.activator) {
+      children.push(h('div', {
+        'class': 'dialog__activator',
+        on: {
+          click: function click(e) {
+            if (!_this.disabled) _this.isActive = !_this.isActive;
+          }
+        }
+      }, [this.$slots.activator]));
+    }
+
+    var dialog = h('transition', {
+      props: {
+        name: this.transition || '', // If false, show nothing
+        origin: this.origin
+      }
+    }, [h('div', data, this.showLazyContent(this.$slots.default))]);
+
+    children.push(h('div', {
+      'class': this.contentClasses,
+      style: { zIndex: this.activeZIndex },
+      ref: 'content'
+    }, [dialog]));
+
+    return h('div', {
+      'class': 'dialog__container',
+      style: {
+        display: !this.$slots.activator && 'none' || this.fullWidth ? 'block' : 'inline-block'
+      }
+    }, children);
+  }
+};

package/es5/components/KDialog/index.js

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

package/es5/components/KDivider/KDivider.js

@@ -0,0 +1,29 @@
+require('../../../src/stylus/components/_dividers.styl');
+
+import Themeable from '../../mixins/themeable';
+
+export default {
+  name: 'k-divider',
+
+  functional: true,
+
+  mixins: [Themeable],
+
+  props: {
+    inset: Boolean
+  },
+
+  render: function render(h, _ref) {
+    var props = _ref.props,
+        data = _ref.data,
+        children = _ref.children;
+
+    data.staticClass = ('divider ' + (data.staticClass || '')).trim();
+
+    if (props.inset) data.staticClass += ' divider--inset';
+    if (props.light) data.staticClass += ' theme--light';
+    if (props.dark) data.staticClass += ' theme--dark';
+
+    return h('hr', data);
+  }
+};

package/es5/components/KDivider/index.js

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

package/es5/components/KExpansionPanel/KExpansionPanel.js

@@ -0,0 +1,60 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+require('../../../src/stylus/components/_expansion-panel.styl');
+
+import Themeable from '../../mixins/themeable';
+
+export default {
+  name: 'k-expansion-panel',
+
+  mixins: [Themeable],
+
+  provide: function provide() {
+    return {
+      panelClick: this.panelClick,
+      focusable: this.focusable
+    };
+  },
+
+
+  props: {
+    expand: Boolean,
+    focusable: Boolean,
+    inset: Boolean,
+    popout: Boolean
+  },
+
+  methods: {
+    getChildren: function getChildren() {
+      return this.$children.filter(function (c) {
+        if (!c.$options) return;
+
+        return c.$options._componentTag === 'k-expansion-panel-content';
+      });
+    },
+    panelClick: function panelClick(uid) {
+      if (!this.expand) {
+        return this.getChildren().forEach(function (e) {
+          return e.toggle(uid);
+        });
+      }
+
+      var panel = this.$children.find(function (e) {
+        return e._uid === uid;
+      });
+
+      panel && panel.toggle(uid);
+    }
+  },
+
+  render: function render(h) {
+    return h('ul', {
+      staticClass: 'expansion-panel',
+      'class': _extends({
+        'expansion-panel--focusable': this.focusable,
+        'expansion-panel--popout': this.popout,
+        'expansion-panel--inset': this.inset
+      }, this.themeClasses)
+    }, this.$slots.default);
+  }
+};