kdutify 0.16.9-rc.0

package/es5/components/KAlert/KAlert.js

@@ -0,0 +1,80 @@
+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/_alerts.styl');
+
+import KIcon from '../KIcon';
+
+import Colorable from '../../mixins/colorable';
+import Toggleable from '../../mixins/toggleable';
+import Transitionable from '../../mixins/transitionable';
+
+export default {
+  name: 'k-alert',
+
+  components: {
+    KIcon: KIcon
+  },
+
+  mixins: [Colorable, Toggleable, Transitionable],
+
+  props: {
+    dismissible: Boolean,
+    icon: String
+  },
+
+  computed: {
+    classes: function classes() {
+      return _defineProperty({
+        'alert--dismissible': this.dismissible
+      }, this.color || 'error', true);
+    }
+  },
+
+  render: function render(h) {
+    var _this = this;
+
+    var children = [h('div', this.$slots.default)];
+
+    if (this.icon) {
+      children.unshift(h('k-icon', {
+        'class': 'alert__icon'
+      }, this.icon));
+    }
+
+    if (this.dismissible) {
+      var close = h('a', {
+        'class': 'alert__dismissible',
+        domProps: { href: 'javascript:;' },
+        on: { click: function click() {
+            return _this.$emit('input', false);
+          } }
+      }, [h(KIcon, {
+        props: {
+          right: true
+        }
+      }, 'cancel')]);
+
+      children.push(close);
+    }
+
+    var alert = h('div', {
+      staticClass: 'alert',
+      'class': this.classes,
+      directives: [{
+        name: 'show',
+        value: this.isActive
+      }],
+      on: this.$listeners
+    }, children);
+
+    if (!this.transition) return alert;
+
+    return h('transition', {
+      props: {
+        name: this.transition,
+        origin: this.origin,
+        mode: this.mode
+      }
+    }, [alert]);
+  }
+};

package/es5/components/KAlert/index.js

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

package/es5/components/KApp/KApp.js

@@ -0,0 +1,67 @@
+require('../../../src/stylus/components/_app.styl');
+
+import Breakpoint from '../../util/breakpoint';
+import Themeable from '../../mixins/themeable';
+import TouchSupport from '../../util/touchSupport';
+
+import Resize from '../../directives/resize';
+
+export default {
+  name: 'k-app',
+
+  mixins: [Breakpoint, Themeable, TouchSupport],
+
+  directives: {
+    Resize: Resize
+  },
+
+  data: function data() {
+    return {
+      resizeTimeout: {}
+    };
+  },
+
+  props: {
+    id: {
+      type: String,
+      default: 'app'
+    }
+  },
+
+  mounted: function mounted() {
+    this.$kdutify.breakpoint = this.breakpoint;
+    window.addEventListener('load', this.runCallbacks);
+  },
+
+
+  methods: {
+    // Run all load callbacks created
+    // from the load helper utility
+    runCallbacks: function runCallbacks() {
+      // For unit tests
+      if (!document._loadCallbacks) return;
+
+      while (document._loadCallbacks.length) {
+        document._loadCallbacks.pop()();
+      }
+    }
+  },
+
+  render: function render(h) {
+    var data = {
+      staticClass: 'application',
+      'class': {
+        'application--dark': this.dark,
+        'application--light': !this.dark
+      },
+      attrs: { 'data-app': true },
+      domProps: { id: this.id },
+      directives: [{
+        name: 'resize',
+        value: this.onResize
+      }]
+    };
+
+    return h('div', data, this.$slots.default);
+  }
+};

package/es5/components/KApp/index.js

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

package/es5/components/KAvatar/KAvatar.js

@@ -0,0 +1,31 @@
+require('../../../src/stylus/components/_avatars.styl');
+
+export default {
+  name: 'k-avatar',
+
+  functional: true,
+
+  props: {
+    size: {
+      type: String,
+      default: '48px'
+    },
+    tile: Boolean
+  },
+
+  render: function render(h, _ref) {
+    var data = _ref.data,
+        props = _ref.props,
+        children = _ref.children;
+
+    data.staticClass = ('avatar ' + (data.staticClass || '')).trim();
+    data.style = data.style || {};
+
+    if (props.tile) data.staticClass += ' avatar--tile';
+
+    data.style.height = props.size;
+    data.style.width = props.size;
+
+    return h('div', data, children);
+  }
+};

package/es5/components/KAvatar/index.js

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

package/es5/components/KBadge/KBadge.js

@@ -0,0 +1,59 @@
+require('../../../src/stylus/components/_badges.styl');
+
+// Mixins
+import Colorable from '../../mixins/colorable';
+import Toggleable from '../../mixins/toggleable';
+
+export default {
+  name: 'k-badge',
+
+  mixins: [Colorable, Toggleable],
+
+  props: {
+    bottom: Boolean,
+    color: {
+      type: String,
+      default: 'primary'
+    },
+    left: Boolean,
+    overlap: Boolean,
+    transition: {
+      type: String,
+      default: 'fab-transition'
+    },
+    value: {
+      default: true
+    }
+  },
+
+  computed: {
+    classes: function classes() {
+      return {
+        'badge--bottom': this.bottom,
+        'badge--left': this.left,
+        'badge--overlap': this.overlap
+      };
+    }
+  },
+
+  render: function render(h) {
+    var badge = this.$slots.badge ? [h('span', {
+      staticClass: 'badge__badge',
+      'class': this.addBackgroundColorClassChecks({}),
+      attrs: this.attrs,
+      directives: [{
+        name: 'show',
+        value: this.isActive
+      }]
+    }, this.$slots.badge)] : null;
+
+    return h('span', {
+      staticClass: 'badge',
+      'class': this.classes
+    }, [this.$slots.default, h('transition', {
+      props: {
+        name: this.transition
+      }
+    }, badge)]);
+  }
+};

package/es5/components/KBadge/index.js

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

package/es5/components/KBottomNav/KBottomNav.js

@@ -0,0 +1,50 @@
+require('../../../src/stylus/components/_bottom-navs.styl');
+
+import ButtonGroup from '../../mixins/button-group';
+
+export default {
+  name: 'k-bottom-nav',
+
+  mixins: [ButtonGroup],
+
+  props: {
+    absolute: Boolean,
+    active: [Number, String],
+    shift: Boolean,
+    value: { required: false }
+  },
+
+  watch: {
+    active: function active() {
+      this.update();
+    }
+  },
+
+  computed: {
+    classes: function classes() {
+      return {
+        'bottom-nav': true,
+        'bottom-nav--absolute': this.absolute,
+        'bottom-nav--shift': this.shift,
+        'bottom-nav--active': this.value
+      };
+    }
+  },
+
+  methods: {
+    isSelected: function isSelected(i) {
+      var item = this.getValue(i);
+      return this.active === item;
+    },
+    updateValue: function updateValue(i) {
+      var item = this.getValue(i);
+      this.$emit('update:active', item);
+    }
+  },
+
+  render: function render(h) {
+    return h('div', {
+      class: this.classes
+    }, this.$slots.default);
+  }
+};

package/es5/components/KBottomNav/index.js

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

package/es5/components/KBottomSheet/KBottomSheet.js

@@ -0,0 +1,36 @@
+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/_bottom-sheets.styl');
+
+import KDialog from '../KDialog/KDialog';
+
+export default {
+  name: 'k-bottom-sheet',
+
+  components: {
+    KDialog: KDialog
+  },
+
+  props: {
+    inset: Boolean,
+    value: null
+  },
+
+  render: function render(h) {
+    var activator = h('template', {
+      slot: 'activator'
+    }, this.$slots.activator);
+
+    var contentClass = ['bottom-sheet', this.inset ? 'bottom-sheet--inset' : ''].join(' ');
+
+    return h(KDialog, {
+      attrs: _extends({}, this.$attrs),
+      on: _extends({}, this.$listeners),
+      props: {
+        contentClass: contentClass,
+        transition: 'bottom-sheet-transition',
+        value: this.value
+      }
+    }, [activator, this.$slots.default]);
+  }
+};

package/es5/components/KBottomSheet/index.js

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

package/es5/components/KBreadcrumbs/KBreadcrumbs.js

@@ -0,0 +1,36 @@
+require('../../../src/stylus/components/_breadcrumbs.styl');
+
+export default {
+  name: 'k-breadcrumbs',
+
+  provide: function provide() {
+    return {
+      divider: this.divider
+    };
+  },
+
+
+  props: {
+    divider: {
+      type: String,
+      default: '/'
+    },
+    icons: Boolean
+  },
+
+  computed: {
+    classes: function classes() {
+      return {
+        'breadcrumbs': true,
+        'breadcrumbs--with-icons': this.icons
+      };
+    }
+  },
+
+  render: function render(h) {
+    return h('ul', {
+      'class': this.classes,
+      props: { items: this.items }
+    }, this.$slots.default);
+  }
+};

package/es5/components/KBreadcrumbs/KBreadcrumbsItem.js

@@ -0,0 +1,38 @@
+import Routable from '../../mixins/routable';
+
+export default {
+  name: 'k-breadcrumbs-item',
+
+  mixins: [Routable],
+
+  inject: ['divider'],
+
+  props: {
+    activeClass: {
+      type: String,
+      default: 'breadcrumbs__item--disabled'
+    }
+  },
+
+  computed: {
+    classes: function classes() {
+      var classes = {
+        'breadcrumbs__item': true
+      };
+
+      classes[this.activeClass] = this.disabled;
+
+      return classes;
+    }
+  },
+
+  render: function render(h) {
+    var _generateRouteLink = this.generateRouteLink(),
+        tag = _generateRouteLink.tag,
+        data = _generateRouteLink.data;
+
+    return h('li', {
+      attrs: { 'data-divider': this.divider }
+    }, [h(tag, data, this.$slots.default)]);
+  }
+};

package/es5/components/KBreadcrumbs/index.js

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

package/es5/components/KBtn/KBtn.js

@@ -0,0 +1,153 @@
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+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/_buttons.styl');
+
+import Colorable from '../../mixins/colorable';
+import Contextualable from '../../mixins/contextualable';
+import Positionable from '../../mixins/positionable';
+import Routable from '../../mixins/routable';
+import Themeable from '../../mixins/themeable';
+import { factory as ToggleableFactory } from '../../mixins/toggleable';
+
+export default {
+  name: 'k-btn',
+
+  mixins: [Colorable, Contextualable, Routable, Positionable, Themeable, ToggleableFactory('inputValue')],
+
+  props: {
+    activeClass: {
+      type: String,
+      default: 'btn--active'
+    },
+    block: Boolean,
+    fab: Boolean,
+    flat: Boolean,
+    icon: Boolean,
+    large: Boolean,
+    loading: Boolean,
+    outline: Boolean,
+    raised: {
+      type: Boolean,
+      default: true
+    },
+    ripple: {
+      type: [Boolean, Object],
+      default: true
+    },
+    round: Boolean,
+    small: Boolean,
+    tag: {
+      type: String,
+      default: 'button'
+    },
+    type: {
+      type: String,
+      default: 'button'
+    },
+    value: null
+  },
+
+  computed: {
+    classes: function classes() {
+      var colorBackground = !this.outline && !this.flat;
+      var colorText = !this.disabled && !colorBackground;
+
+      var classes = _extends({
+        'btn': true,
+        'btn--active': this.isActive,
+        'btn--absolute': this.absolute,
+        'btn--block': this.block,
+        'btn--bottom': this.bottom,
+        'btn--disabled': this.disabled,
+        'btn--flat': this.flat,
+        'btn--floating': this.fab,
+        'btn--fixed': this.fixed,
+        'btn--hover': this.hover,
+        'btn--icon': this.icon,
+        'btn--large': this.large,
+        'btn--left': this.left,
+        'btn--loader': this.loading,
+        'btn--outline': this.outline,
+        'btn--raised': !this.flat || this.raised,
+        'btn--right': this.right,
+        'btn--round': this.round,
+        'btn--router': this.to,
+        'btn--small': this.small,
+        'btn--top': this.top
+      }, this.themeClasses);
+
+      if (!this.color) {
+        return Object.assign(classes, {
+          'primary': this.primary && colorBackground,
+          'secondary': this.secondary && colorBackground,
+          'success': this.success && colorBackground,
+          'info': this.info && colorBackground,
+          'warning': this.warning && colorBackground,
+          'error': this.error && colorBackground,
+          'primary--text': this.primary && colorText,
+          'secondary--text': this.secondary && colorText,
+          'success--text': this.success && colorText,
+          'info--text': this.info && colorText,
+          'warning--text': this.warning && colorText,
+          'error--text': this.error && colorText
+        });
+      }
+
+      return colorBackground ? this.addBackgroundColorClassChecks(classes) : this.addTextColorClassChecks(classes);
+    }
+  },
+
+  methods: {
+    // Prevent focus to match md spec
+    click: function click(e) {
+      !this.fab && e.detail && this.$el.blur();
+
+      this.$emit('click', e);
+    },
+    genContent: function genContent() {
+      return this.$createElement('div', { 'class': 'btn__content' }, [this.$slots.default]);
+    },
+    genLoader: function genLoader() {
+      var children = [];
+
+      if (!this.$slots.loader) {
+        children.push(this.$createElement('k-progress-circular', {
+          props: {
+            indeterminate: true,
+            size: 26
+          }
+        }));
+      } else {
+        children.push(this.$slots.loader);
+      }
+
+      return this.$createElement('span', { 'class': 'btn__loading' }, children);
+    }
+  },
+
+  mounted: function mounted() {
+    var _this = this;
+
+    Object.keys(Contextualable.props).forEach(function (prop) {
+      if (_this[prop]) {
+        console.warn('Context prop \'' + prop + '\' for KBtn component has been deprecated. Use \'color\' prop instead.');
+      }
+    });
+  },
+  render: function render(h) {
+    var _generateRouteLink = this.generateRouteLink(),
+        tag = _generateRouteLink.tag,
+        data = _generateRouteLink.data;
+
+    var children = [this.genContent()];
+
+    tag === 'button' && (data.attrs.type = this.type);
+    this.loading && children.push(this.genLoader());
+
+    data.attrs.value = ['string', 'number'].includes(_typeof(this.value)) ? this.value : JSON.stringify(this.value);
+
+    return h(tag, data, children);
+  }
+};

package/es5/components/KBtn/index.js

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