kdutify 0.16.9-rc.0

package/es5/components/Kdutify/index.js

@@ -0,0 +1,50 @@
+import load from '../../util/load';
+
+var Kdutify = {
+  install: function install(Kdu) {
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    var $kdutify = {
+      load: load,
+      application: {
+        bar: 0,
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+      },
+      breakpoint: {},
+      touchSupport: false
+    };
+
+    Kdu.util.defineReactive({}, 'breakpoint', $kdutify);
+    Kdu.util.defineReactive({}, 'application', $kdutify);
+
+    Kdu.prototype.$kdutify = $kdutify;
+
+    if (opts.transitions) {
+      Object.keys(opts.transitions).forEach(function (key) {
+        var t = opts.transitions[key];
+        if (t.name !== undefined && t.name.startsWith('k-')) {
+          Kdu.component(t.name, t);
+        }
+      });
+    }
+
+    if (opts.directives) {
+      Object.keys(opts.directives).forEach(function (key) {
+        var d = opts.directives[key];
+        Kdu.directive(d.name, d);
+      });
+    }
+
+    if (opts.components) {
+      Object.keys(opts.components).forEach(function (key) {
+        var c = opts.components[key];
+        Kdu.use(c);
+      });
+    }
+  }
+};
+
+export default Kdutify;

package/es5/components/index.js

@@ -0,0 +1,45 @@
+export { default as Kdutify } from './Kdutify';
+export { default as KApp } from './KApp';
+export { default as KAlert } from './KAlert';
+export { default as KAvatar } from './KAvatar';
+export { default as KBadge } from './KBadge';
+export { default as KBottomNav } from './KBottomNav';
+export { default as KBottomSheet } from './KBottomSheet';
+export { default as KBreadcrumbs } from './KBreadcrumbs';
+export { default as KBtn } from './KBtn';
+export { default as KBtnToggle } from './KBtnToggle';
+export { default as KCard } from './KCard';
+export { default as KCarousel } from './KCarousel';
+export { default as KCheckbox } from './KCheckbox';
+export { default as KChip } from './KChip';
+export { default as KDataTable } from './KDataTable';
+export { default as KDatePicker } from './KDatePicker';
+export { default as KDialog } from './KDialog';
+export { default as KDivider } from './KDivider';
+export { default as KExpansionPanel } from './KExpansionPanel';
+export { default as KFooter } from './KFooter';
+export { default as KForm } from './KForm';
+export { default as KGrid } from './KGrid';
+export { default as KIcon } from './KIcon';
+export { default as KList } from './KList';
+export { default as KMenu } from './KMenu';
+export { default as KNavigationDrawer } from './KNavigationDrawer';
+export { default as KPagination } from './KPagination';
+export { default as KParallax } from './KParallax';
+export { default as KProgressCircular } from './KProgressCircular';
+export { default as KProgressLinear } from './KProgressLinear';
+export { default as KRadioGroup } from './KRadioGroup';
+export { default as KSelect } from './KSelect';
+export { default as KSlider } from './KSlider';
+export { default as KSnackbar } from './KSnackbar';
+export { default as KSpeedDial } from './KSpeedDial';
+export { default as KStepper } from './KStepper';
+export { default as KSubheader } from './KSubheader';
+export { default as KSwitch } from './KSwitch';
+export { default as KSystemBar } from './KSystemBar';
+export { default as KTabs } from './KTabs';
+export { default as KTextField } from './KTextField';
+export { default as KTimePicker } from './KTimePicker';
+export { default as KToolbar } from './KToolbar';
+export { default as KTooltip } from './KTooltip';
+export { default as Transitions } from './transitions';

package/es5/components/transitions/expand-transition.js

@@ -0,0 +1,36 @@
+import { addOnceEventListener } from '../../util/helpers';
+
+export default {
+  enter: function enter(el, done) {
+    // Remove initial transition
+    el.style.transition = 'none';
+    addOnceEventListener(el, 'transitionend', done);
+
+    // Get height that is to be scrolled
+    el.style.overflow = 'hidden';
+    el.style.height = null;
+    el.style.display = 'block';
+    var height = el.clientHeight + 'px';
+    el.style.height = 0;
+    el.style.transition = null;
+
+    setTimeout(function () {
+      return el.style.height = height;
+    }, 100);
+  },
+  afterEnter: function afterEnter(el) {
+    el.style.height = 'auto';
+    el.style.overflow = null;
+  },
+  leave: function leave(el, done) {
+    addOnceEventListener(el, 'transitionend', done);
+
+    // Set height before we transition to 0
+    el.style.overflow = 'hidden';
+    el.style.height = el.clientHeight + 'px';
+
+    setTimeout(function () {
+      return el.style.height = 0;
+    }, 100);
+  }
+};

package/es5/components/transitions/index.js

@@ -0,0 +1,47 @@
+import { createSimpleTransition, createJavaScriptTransition } from '../../util/helpers';
+
+import ExpandTransitionFunctions from './expand-transition';
+import RowExpandTransitionFunctions from './row-expand-transition';
+
+// Component specific transitions
+export var KBottomSheetTranstion = createSimpleTransition('bottom-sheet-transition');
+export var KCarouselTransition = createSimpleTransition('carousel-transition');
+export var KCarouselReverseTransition = createSimpleTransition('carousel-reverse-transition');
+export var KTabTransition = createSimpleTransition('tab-transition');
+export var KTabReverseTransition = createSimpleTransition('tab-reverse-transition');
+export var KMenuTransition = createSimpleTransition('menu-transition');
+export var KFabTransition = createSimpleTransition('fab-transition', 'center center', 'out-in');
+
+// Generic transitions
+export var KDialogTransition = createSimpleTransition('dialog-transition');
+export var KDialogBottomTransition = createSimpleTransition('dialog-bottom-transition');
+export var KFadeTransition = createSimpleTransition('fade-transition');
+export var KScaleTransition = createSimpleTransition('scale-transition');
+export var KSlideXTransition = createSimpleTransition('slide-x-transition');
+export var KSlideXReverseTransition = createSimpleTransition('slide-x-reverse-transition');
+export var KSlideYTransition = createSimpleTransition('slide-y-transition');
+export var KSlideYReverseTransition = createSimpleTransition('slide-y-reverse-transition');
+
+// JavaScript transitions
+export var KExpandTransition = createJavaScriptTransition('expand-transition', ExpandTransitionFunctions);
+export var KRowExpandTransition = createJavaScriptTransition('row-expand-transition', RowExpandTransitionFunctions);
+
+export default function install(Kdu) {
+  Kdu.component('k-bottom-sheet-transition', KBottomSheetTranstion);
+  Kdu.component('k-carousel-transition', KCarouselTransition);
+  Kdu.component('k-carousel-reverse-transition', KCarouselReverseTransition);
+  Kdu.component('k-dialog-transition', KDialogTransition);
+  Kdu.component('k-dialog-bottom-transition', KDialogBottomTransition);
+  Kdu.component('k-fab-transition', KFabTransition);
+  Kdu.component('k-fade-transition', KFadeTransition);
+  Kdu.component('k-menu-transition', KMenuTransition);
+  Kdu.component('k-scale-transition', KScaleTransition);
+  Kdu.component('k-slide-x-transition', KSlideXTransition);
+  Kdu.component('k-slide-x-reverse-transition', KSlideXReverseTransition);
+  Kdu.component('k-slide-y-transition', KSlideYTransition);
+  Kdu.component('k-slide-y-reverse-transition', KSlideYReverseTransition);
+  Kdu.component('k-tab-reverse-transition', KTabReverseTransition);
+  Kdu.component('k-tab-transition', KTabTransition);
+  Kdu.component('k-expand-transition', KExpandTransition);
+  Kdu.component('k-row-expand-transition', KRowExpandTransition);
+}

package/es5/components/transitions/row-expand-transition.js

@@ -0,0 +1,38 @@
+import { addOnceEventListener } from '../../util/helpers';
+
+export default {
+  enter: function enter(el, done) {
+    el.td = el.parentNode;
+
+    addOnceEventListener(el, 'transitionend', done);
+
+    // Get height that is to be scrolled
+    var height = el.dataset.height || el.clientHeight;
+    el.dataset.height = height;
+    el.style.overflow = 'hidden';
+    el.style.height = 0;
+    el.td.style['border-bottom'] = '1px solid rgba(0,0,0,0.12)';
+
+    setTimeout(function () {
+      el.dataset.height = el.style.height = el.scrollHeight + 'px';
+    }, 50);
+  },
+  afterEnter: function afterEnter(el) {
+    el.style.overflow = null;
+  },
+  leave: function leave(el, done) {
+    // Remove initial transition
+    addOnceEventListener(el, 'transitionend', done);
+
+    // Set height before we transition to 0
+    el.style.overflow = 'hidden';
+    el.style.height = el.dataset.height + 'px';
+
+    setTimeout(function () {
+      el.style.height = 0;
+    }, 50);
+  },
+  afterLeave: function afterLeave(el) {
+    el.td.style['border-bottom'] = null;
+  }
+};

package/es5/directives/click-outside.js

@@ -0,0 +1,100 @@
+function directive(e, el, binding, v) {
+  // The include element callbacks below can be expensive
+  // so we should avoid calling them when we're not active.
+  // Explicitly check for false to allow fallback compatibility
+  // with non-toggleable components
+  if (!e || v.context.isActive === false) return;
+
+  // Get value passed to directive
+  var val = binding.value || function () {
+    return true;
+  };
+  // Check if callback was passed in object or as the value
+  var cb = val.callback || val;
+  // Check if additional elements were passed to be included in check
+  // (click must be outside all included elements, if any)
+  var elements = (val.include || function () {
+    return [];
+  })();
+  // Add the root element for the component this directive was defined on
+  elements.push(el);
+
+  // Check if it's a click outside our elements, and then if our callback returns true.
+  // Non-toggleable components should take action in their callback and return falsy.
+  // Toggleable can return true if it wants to deactivate.
+  // Note that, because we're in the capture phase, this callback will occure before
+  // the bubbling click event on any outside elements.
+  if (!clickedInEls(e, elements) && cb(e)) {
+    // Delay setting toggleable inactive to avoid conflicting
+    // with an outside click on any activator toggling our state.
+    setTimeout(function () {
+      return v.context.isActive = false;
+    }, 0);
+  }
+}
+
+function clickedInEls(e, elements) {
+  // Get position of click
+  var x = e.clientX,
+      y = e.clientY;
+  // Loop over all included elements to see if click was in any of them
+
+  var _iteratorNormalCompletion = true;
+  var _didIteratorError = false;
+  var _iteratorError = undefined;
+
+  try {
+    for (var _iterator = elements[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var el = _step.value;
+
+      if (clickedInEl(el, x, y)) return true;
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+
+  return false;
+}
+
+function clickedInEl(el, x, y) {
+  // Get bounding rect for element
+  // (we're in capturing event and we want to check for multiple elements,
+  //  so can't use target.)
+  var b = el.getBoundingClientRect();
+  // Check if the click was in the element's bounding rect
+
+  return x >= b.left && x <= b.right && y >= b.top && y <= b.bottom;
+}
+
+export default {
+  name: 'click-outside',
+
+  bind: function bind(el, binding, v) {
+    v.context.$kdutify.load(function () {
+      var onClick = function onClick(e) {
+        return directive(e, el, binding, v);
+      };
+      // iOS does not recognize click events on document
+      // or body, this is the entire purpose of the k-app
+      // component and [data-app], stop removing this
+      var app = document.querySelector('[data-app]') || document.body; // This is only for unit tests
+      app.addEventListener('click', onClick, true);
+      el._clickOutside = onClick;
+    });
+  },
+  unbind: function unbind(el) {
+    var app = document.querySelector('[data-app]') || document.body; // This is only for unit tests
+    app && app.removeEventListener('click', el._clickOutside, true);
+  }
+};

package/es5/directives/index.js

@@ -0,0 +1,15 @@
+import ClickOutside from './click-outside';
+import Resize from './resize';
+import Ripple from './ripple';
+import Scroll from './scroll';
+import Touch from './touch';
+
+export { ClickOutside, Ripple, Resize, Scroll, Touch };
+
+export default function install(Kdu) {
+  Kdu.directive('click-outside', ClickOutside);
+  Kdu.directive('ripple', Ripple);
+  Kdu.directive('resize', Resize);
+  Kdu.directive('scroll', Scroll);
+  Kdu.directive('touch', Touch);
+}

package/es5/directives/resize.js

@@ -0,0 +1,30 @@
+function inserted(el, binding) {
+  var cb = binding.value;
+  var debounce = 200;
+
+  if (typeof binding.value !== 'function') {
+    cb = binding.value.value;
+    debounce = binding.value.debounce;
+  }
+
+  var debounceTimeout = setTimeout(cb, debounce);
+  var onResize = function onResize() {
+    clearTimeout(debounceTimeout);
+    debounceTimeout = setTimeout(cb, debounce);
+  };
+
+  window.addEventListener('resize', onResize, { passive: true });
+  el._onResize = onResize;
+
+  onResize();
+}
+
+function unbind(el, binding) {
+  window.removeEventListener('resize', el._onResize);
+}
+
+export default {
+  name: 'resize',
+  inserted: inserted,
+  unbind: unbind
+};

package/es5/directives/ripple.js

@@ -0,0 +1,144 @@
+function style(el, value) {
+  ['transform', 'webkitTransform'].forEach(function (i) {
+    el.style[i] = value;
+  });
+}
+
+var RippleDataAttribute = 'data-ripple';
+
+var ripple = {
+  show: function show(e, el, _ref) {
+    var _ref$value = _ref.value,
+        value = _ref$value === undefined ? {} : _ref$value;
+
+    if (el.getAttribute(RippleDataAttribute) !== 'true') {
+      return;
+    }
+
+    var container = document.createElement('span');
+    var animation = document.createElement('span');
+
+    container.appendChild(animation);
+    container.className = 'ripple__container';
+
+    if (value.class) {
+      container.className += ' ' + value.class;
+    }
+
+    var size = el.clientWidth > el.clientHeight ? el.clientWidth : el.clientHeight;
+    animation.className = 'ripple__animation';
+    animation.style.width = size * (value.center ? 1 : 2) + 'px';
+    animation.style.height = animation.style.width;
+
+    el.appendChild(container);
+    var computed = window.getComputedStyle(el);
+    if (computed.position !== 'absolute' && computed.position !== 'fixed') el.style.position = 'relative';
+
+    var offset = el.getBoundingClientRect();
+    var x = value.center ? '50%' : e.clientX - offset.left + 'px';
+    var y = value.center ? '50%' : e.clientY - offset.top + 'px';
+
+    animation.classList.add('ripple__animation--enter');
+    animation.classList.add('ripple__animation--visible');
+    style(animation, 'translate(-50%, -50%) translate(' + x + ', ' + y + ') scale3d(0.01,0.01,0.01)');
+    animation.dataset.activated = Date.now();
+
+    setTimeout(function () {
+      animation.classList.remove('ripple__animation--enter');
+      style(animation, 'translate(-50%, -50%) translate(' + x + ', ' + y + ')  scale3d(0.99,0.99,0.99)');
+    }, 0);
+  },
+
+  hide: function hide(el) {
+    if (el.getAttribute(RippleDataAttribute) !== 'true') {
+      return;
+    }
+
+    var ripples = el.getElementsByClassName('ripple__animation');
+
+    if (ripples.length === 0) return;
+    var animation = ripples[ripples.length - 1];
+    var diff = Date.now() - Number(animation.dataset.activated);
+    var delay = 400 - diff;
+
+    delay = delay < 0 ? 0 : delay;
+
+    setTimeout(function () {
+      animation.classList.remove('ripple__animation--visible');
+
+      setTimeout(function () {
+        // Need to figure out a new way to do this
+        try {
+          if (ripples.length < 1) el.style.position = null;
+          animation.parentNode && el.removeChild(animation.parentNode);
+        } catch (e) {}
+      }, 300);
+    }, delay);
+  }
+};
+
+function directive(el, binding) {
+  el.setAttribute(RippleDataAttribute, !!binding.value);
+
+  if ('ontouchstart' in window) {
+    el.addEventListener('touchend', function () {
+      return ripple.hide(el);
+    }, false);
+    el.addEventListener('touchcancel', function () {
+      return ripple.hide(el);
+    }, false);
+  }
+
+  el.addEventListener('mousedown', function (e) {
+    return ripple.show(e, el, binding);
+  }, false);
+  el.addEventListener('mouseup', function () {
+    return ripple.hide(el);
+  }, false);
+  el.addEventListener('mouseleave', function () {
+    return ripple.hide(el);
+  }, false);
+  // Anchor tags can be dragged, causes other hides to fail - #1537
+  el.addEventListener('dragstart', function () {
+    return ripple.hide(el);
+  }, false);
+}
+
+function unbind(el, binding) {
+  el.removeEventListener('touchstart', function (e) {
+    return ripple.show(e, el, binding);
+  }, false);
+  el.removeEventListener('mousedown', function (e) {
+    return ripple.show(e, el, binding);
+  }, false);
+  el.removeEventListener('touchend', function () {
+    return ripple.hide(el);
+  }, false);
+  el.removeEventListener('touchcancel', function () {
+    return ripple.hide(el);
+  }, false);
+  el.removeEventListener('mouseup', function () {
+    return ripple.hide(el);
+  }, false);
+  el.removeEventListener('mouseleave', function () {
+    return ripple.hide(el);
+  }, false);
+  el.removeEventListener('dragstart', function () {
+    return ripple.hide(el);
+  }, false);
+}
+
+function update(el, binding) {
+  if (binding.value === binding.oldValue) {
+    return;
+  }
+
+  el.setAttribute(RippleDataAttribute, !!binding.value);
+}
+
+export default {
+  name: 'ripple',
+  bind: directive,
+  unbind: unbind,
+  update: update
+};

package/es5/directives/scroll.js

@@ -0,0 +1,32 @@
+function inserted(el, binding) {
+  var callback = typeof binding.value === 'function' ? binding.value : binding.value.callback;
+  var options = binding.value.options || { passive: true };
+  var target = binding.value.target || window;
+  if (target === 'undefined') return;
+
+  if (target !== window) {
+    target = document.querySelector(target);
+  }
+
+  target.addEventListener('scroll', callback, options);
+
+  el._onScroll = {
+    target: target,
+    options: options
+  };
+}
+
+function unbind(el, binding) {
+  var _el$_onScroll = el._onScroll,
+      target = _el$_onScroll.target,
+      options = _el$_onScroll.options;
+
+
+  target.removeEventListener('scroll', binding.callback, options);
+}
+
+export default {
+  name: 'scroll',
+  inserted: inserted,
+  unbind: unbind
+};

package/es5/directives/touch.js

@@ -0,0 +1,102 @@
+var touchstart = function touchstart(event, wrapper) {
+  var touch = event.changedTouches[0];
+  wrapper.touchstartX = touch.clientX;
+  wrapper.touchstartY = touch.clientY;
+
+  wrapper.start && wrapper.start(Object.assign(event, wrapper));
+};
+
+var touchend = function touchend(event, wrapper) {
+  var touch = event.changedTouches[0];
+  wrapper.touchendX = touch.clientX;
+  wrapper.touchendY = touch.clientY;
+
+  wrapper.end && wrapper.end(Object.assign(event, wrapper));
+
+  handleGesture(wrapper);
+};
+
+var touchmove = function touchmove(event, wrapper) {
+  var touch = event.changedTouches[0];
+  wrapper.touchmoveX = touch.clientX;
+  wrapper.touchmoveY = touch.clientY;
+
+  wrapper.move && wrapper.move(Object.assign(event, wrapper));
+};
+
+var handleGesture = function handleGesture(wrapper) {
+  var touchstartX = wrapper.touchstartX,
+      touchendX = wrapper.touchendX,
+      touchstartY = wrapper.touchstartY,
+      touchendY = wrapper.touchendY;
+
+  var dirRatio = 0.5;
+  var minDistance = 16;
+  wrapper.offsetX = touchendX - touchstartX;
+  wrapper.offsetY = touchendY - touchstartY;
+
+  if (Math.abs(wrapper.offsetY) < dirRatio * Math.abs(wrapper.offsetX)) {
+    wrapper.left && touchendX < touchstartX - minDistance && wrapper.left(wrapper);
+    wrapper.right && touchendX > touchstartX + minDistance && wrapper.right(wrapper);
+  }
+
+  if (Math.abs(wrapper.offsetX) < dirRatio * Math.abs(wrapper.offsetY)) {
+    wrapper.up && touchendY < touchstartY - minDistance && wrapper.up(wrapper);
+    wrapper.down && touchendY > touchstartY + minDistance && wrapper.down(wrapper);
+  }
+};
+
+function inserted(el, _ref) {
+  var value = _ref.value;
+
+  var wrapper = {
+    touchstartX: 0,
+    touchstartY: 0,
+    touchendX: 0,
+    touchendY: 0,
+    touchmoveX: 0,
+    touchmoveY: 0,
+    offsetX: 0,
+    offsetY: 0,
+    left: value.left,
+    right: value.right,
+    up: value.up,
+    down: value.down,
+    start: value.start,
+    move: value.move,
+    end: value.end
+  };
+
+  var target = value.parent ? el.parentNode : el;
+  var options = value.options || { passive: true
+
+    // Needed to pass unit tests
+  };if (!target) return;
+  target.addEventListener('touchstart', function (e) {
+    return touchstart(e, wrapper);
+  }, options);
+  target.addEventListener('touchend', function (e) {
+    return touchend(e, wrapper);
+  }, options);
+  target.addEventListener('touchmove', function (e) {
+    return touchmove(e, wrapper);
+  }, options);
+}
+
+function unbind(el, _ref2) {
+  var value = _ref2.value;
+
+  var target = value.parent ? el.parentNode : el;
+
+  if (!target) return;
+
+  target.removeEventListener('touchstart', touchstart);
+  target.removeEventListener('touchend', touchend);
+  target.removeEventListener('touchmove', touchmove);
+}
+
+export default {
+  name: 'touch',
+  inserted: inserted,
+  unbind: unbind
+};

package/es5/index.js

@@ -0,0 +1,30 @@
+require('./stylus/app.styl');
+import Semver from 'semver';
+import { devDependencies, version } from '../package.json';
+import * as components from './components';
+import * as directives from './directives';
+
+function Kdutify(Kdu) {
+  var Kdutify = components.Kdutify;
+
+  Kdu.use(Kdutify, {
+    components: components,
+    directives: directives
+  });
+}
+
+Kdutify.version = version;
+
+function checkKduVersion() {
+  var kduDep = devDependencies.kdu;
+  if (!Semver.satisfies(window.Kdu.version, kduDep)) {
+    console.warn('Kdutify requires Kdu version ' + kduDep);
+  }
+}
+
+if (typeof window !== 'undefined' && window.Kdu) {
+  window.Kdu.version && checkKduVersion();
+  window.Kdu.use(Kdutify);
+}
+
+export default Kdutify;

package/es5/mixins/applicationable.js

@@ -0,0 +1,9 @@
+export default {
+  props: {
+    app: Boolean
+  },
+
+  created: function created() {
+    this.updateApplication();
+  }
+};