kdutify 0.16.9-rc.0

package/es5/mixins/positionable.js

@@ -0,0 +1,10 @@
+export default {
+  props: {
+    absolute: Boolean,
+    bottom: Boolean,
+    fixed: Boolean,
+    left: Boolean,
+    right: Boolean,
+    top: Boolean
+  }
+};

package/es5/mixins/rippleable.js

@@ -0,0 +1,21 @@
+import Ripple from '../directives/ripple';
+
+/** @mixin */
+export default {
+  directives: { Ripple: Ripple },
+
+  methods: {
+    genRipple: function genRipple() {
+      return this.$createElement('div', {
+        'class': this.rippleClasses || 'input-group--selection-controls__ripple',
+        on: Object.assign({}, {
+          click: this.toggle
+        }, this.$listeners),
+        directives: [{
+          name: 'ripple',
+          value: !this.disabled && { center: true }
+        }]
+      });
+    }
+  }
+};

package/es5/mixins/routable.js

@@ -0,0 +1,66 @@
+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; };
+
+import Ripple from '../directives/ripple';
+
+export default {
+  directives: {
+    Ripple: Ripple
+  },
+
+  props: {
+    activeClass: String,
+    append: Boolean,
+    disabled: Boolean,
+    exact: Boolean,
+    href: [String, Object],
+    to: [String, Object],
+    nuxt: Boolean,
+    replace: Boolean,
+    ripple: Boolean,
+    tag: String,
+    target: String
+  },
+
+  methods: {
+    click: function click() {},
+    generateRouteLink: function generateRouteLink() {
+      var exact = this.exact;
+      var tag = void 0;
+
+      var data = {
+        attrs: { disabled: this.disabled },
+        class: this.classes,
+        props: {},
+        directives: [{
+          name: 'ripple',
+          value: this.ripple || false
+        }],
+        on: _extends({}, this.$listeners || {}, {
+          click: this.click
+        })
+      };
+
+      if (typeof this.exact === 'undefined') {
+        exact = this.to === '/' || this.to === Object(this.to) && this.to.path === '/';
+      }
+
+      if (this.to) {
+        tag = this.nuxt ? 'nuxt-link' : 'router-link';
+        data.props.to = this.to;
+        data.props.exact = exact;
+        data.props.activeClass = this.activeClass;
+        data.props.append = this.append;
+        data.props.replace = this.replace;
+      } else {
+        tag = this.href && 'a' || this.tag || 'a';
+
+        if (tag === 'a') {
+          data.attrs.href = this.href || 'javascript:;';
+          if (this.target) data.attrs.target = this.target;
+        }
+      }
+
+      return { tag: tag, data: data };
+    }
+  }
+};

package/es5/mixins/selectable.js

@@ -0,0 +1,79 @@
+import Colorable from './colorable';
+import Input from './input';
+
+export default {
+  mixins: [Input, Colorable],
+
+  model: {
+    prop: 'inputValue',
+    event: 'change'
+  },
+
+  props: {
+    id: String,
+    inputValue: null,
+    falseValue: null,
+    trueValue: null
+  },
+
+  computed: {
+    isActive: function isActive() {
+      if (Array.isArray(this.inputValue)) {
+        return this.inputValue.indexOf(this.value) !== -1;
+      }
+
+      if (!this.trueValue || !this.falseValue) {
+        return this.value ? this.value === this.inputValue : Boolean(this.inputValue);
+      }
+
+      return this.inputValue === this.trueValue;
+    },
+    isDirty: function isDirty() {
+      return this.isActive;
+    }
+  },
+
+  watch: {
+    indeterminate: function indeterminate(val) {
+      this.inputIndeterminate = val;
+    }
+  },
+
+  methods: {
+    genLabel: function genLabel() {
+      return this.$createElement('label', {
+        on: { click: this.toggle },
+        attrs: {
+          for: this.id
+        }
+      }, this.$slots.label || this.label);
+    },
+    toggle: function toggle() {
+      if (this.disabled) {
+        return;
+      }
+
+      var input = this.inputValue;
+      if (Array.isArray(input)) {
+        input = input.slice();
+        var i = input.indexOf(this.value);
+
+        if (i === -1) {
+          input.push(this.value);
+        } else {
+          input.splice(i, 1);
+        }
+      } else if (this.trueValue || this.falseValue) {
+        input = input === this.trueValue ? this.falseValue : this.trueValue;
+      } else if (this.value) {
+        input = this.value === this.inputValue ? null : this.value;
+      } else {
+        input = !input;
+      }
+
+      this.validate(true, input);
+
+      this.$emit('change', input);
+    }
+  }
+};

package/es5/mixins/stackable.js

@@ -0,0 +1,70 @@
+function _toConsumableArray(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); } }
+
+import { getZIndex } from '../util/helpers';
+
+export default {
+  data: function data() {
+    return {
+      stackBase: null,
+      stackClass: 'unpecified',
+      stackElement: null,
+      stackExclude: null,
+      stackMinZIndex: 0
+    };
+  },
+
+  computed: {
+    activeZIndex: function activeZIndex() {
+      var content = this.stackElement || this.$refs.content;
+      // Return current zindex if not active
+      if (!this.isActive) return getZIndex(content);
+
+      // Return max current z-index (excluding self) + 2
+      // (2 to leave room for an overlay below, if needed)
+      return this.getMaxZIndex(this.stackExclude || [content]) + 2;
+    }
+  },
+  methods: {
+    getMaxZIndex: function getMaxZIndex() {
+      var exclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+      var base = this.stackBase || this.$el;
+      // Start with lowest allowed z-index or z-index of
+      // base component's element, whichever is greater
+      var zis = [this.stackMinZIndex, getZIndex(base)];
+      // Convert the NodeList to an array to
+      // prevent an Edge bug with Symbol.iterator
+      var activeElements = [].concat(_toConsumableArray(document.getElementsByClassName(this.stackClass)));
+
+      // Get z-index for all active dialogs
+      var _iteratorNormalCompletion = true;
+      var _didIteratorError = false;
+      var _iteratorError = undefined;
+
+      try {
+        for (var _iterator = activeElements[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var activeElement = _step.value;
+
+          if (!exclude.includes(activeElement)) {
+            zis.push(getZIndex(activeElement));
+          }
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+
+      return Math.max.apply(Math, zis);
+    }
+  }
+};

package/es5/mixins/tab-focusable.js

@@ -0,0 +1,7 @@
+export default {
+  data: function data() {
+    return {
+      tabFocused: false
+    };
+  }
+};

package/es5/mixins/themeable.js

@@ -0,0 +1,15 @@
+export default {
+  props: {
+    dark: Boolean,
+    light: Boolean
+  },
+
+  computed: {
+    themeClasses: function themeClasses() {
+      return {
+        'theme--light': this.light,
+        'theme--dark': this.dark
+      };
+    }
+  }
+};

package/es5/mixins/toggleable.js

@@ -0,0 +1,31 @@
+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; }
+
+export function factory() {
+  var _watch;
+
+  var prop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'value';
+  var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'input';
+
+  return {
+    model: { prop: prop, event: event },
+
+    props: _defineProperty({}, prop, { required: false }),
+
+    data: function data() {
+      return {
+        isActive: !!this[prop]
+      };
+    },
+
+
+    watch: (_watch = {}, _defineProperty(_watch, prop, function (val) {
+      this.isActive = !!val;
+    }), _defineProperty(_watch, 'isActive', function isActive(val) {
+      !!val !== this[prop] && this.$emit(event, val);
+    }), _watch)
+  };
+}
+
+var Toggleable = factory();
+
+export default Toggleable;

package/es5/mixins/transitionable.js

@@ -0,0 +1,7 @@
+export default {
+  props: {
+    mode: String,
+    origin: String,
+    transition: String
+  }
+};

package/es5/mixins/translatable.js

@@ -0,0 +1,62 @@
+export default {
+  data: function data() {
+    return {
+      parallax: null,
+      parallaxDist: null,
+      percentScrolled: null,
+      scrollTop: null,
+      windowHeight: null,
+      windowBottom: null
+    };
+  },
+
+
+  computed: {
+    normalizedHeight: function normalizedHeight() {
+      if (this.jumbotron) {
+        return isNaN(this.height) ? this.height : this.height + 'px';
+      }
+
+      return Number(this.height.toString().replace(/(^[0-9]*$)/, '$1'));
+    },
+    imgHeight: function imgHeight() {
+      return this.objHeight();
+    }
+  },
+
+  mounted: function mounted() {
+    this.$kdutify.load(this.init);
+  },
+  beforeDestroy: function beforeDestroy() {
+    window.removeEventListener('scroll', this.translate, false);
+    window.removeEventListener('resize', this.translate, false);
+  },
+
+
+  methods: {
+    listeners: function listeners() {
+      window.addEventListener('scroll', this.translate, false);
+      window.addEventListener('resize', this.translate, false);
+    },
+    translate: function translate() {
+      this.calcDimensions();
+
+      this.percentScrolled = (this.windowBottom - this.elOffsetTop) / (this.normalizedHeight + this.windowHeight);
+
+      this.parallax = Math.round(this.parallaxDist * this.percentScrolled);
+
+      if (this.translated) {
+        this.translated();
+      }
+    },
+    calcDimensions: function calcDimensions() {
+      var offset = this.$el.getBoundingClientRect();
+
+      this.scrollTop = window.pageYOffset;
+      this.parallaxDist = this.imgHeight - this.normalizedHeight;
+      this.elOffsetTop = offset.top + this.scrollTop;
+      this.windowHeight = window.innerHeight;
+      this.windowBottom = this.scrollTop + this.windowHeight;
+    }
+  }
+};

package/es5/mixins/validatable.js

@@ -0,0 +1,138 @@
+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; };
+
+export default {
+  data: function data() {
+    return {
+      errorBucket: [],
+      hasFocused: false,
+      hasInput: false,
+      shouldValidate: false,
+      valid: false
+    };
+  },
+
+
+  props: {
+    error: {
+      type: Boolean
+    },
+    errorMessages: {
+      type: [String, Array],
+      default: function _default() {
+        return [];
+      }
+    },
+    rules: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    validateOnBlur: Boolean
+  },
+
+  computed: {
+    validations: function validations() {
+      if (!Array.isArray(this.errorMessages)) {
+        return [this.errorMessages];
+      } else if (this.errorMessages.length > 0) {
+        return this.errorMessages;
+      } else if (this.shouldValidate) {
+        return this.errorBucket;
+      } else {
+        return [];
+      }
+    },
+    hasError: function hasError() {
+      return this.validations.length > 0 || this.errorMessages.length > 0 || this.error;
+    }
+  },
+
+  watch: {
+    rules: {
+      handler: function handler(newVal, oldVal) {
+        // TODO: This handler seems to trigger when input changes, even though
+        // rules array stays the same? Solved it like this for now
+        if (newVal.length === oldVal.length) return;
+
+        this.validate();
+      },
+
+      deep: true
+    },
+    inputValue: function inputValue(val) {
+      // If it's the first time we're setting input,
+      // mark it with hasInput
+      if (!!val && !this.hasInput) this.hasInput = true;
+
+      if (this.hasInput && !this.validateOnBlur) this.shouldValidate = true;
+    },
+    isFocused: function isFocused(val) {
+      // If we're not focused, and it's the first time
+      // we're defocusing, set shouldValidate to true
+      if (!val && !this.hasFocused) {
+        this.hasFocused = true;
+        this.shouldValidate = true;
+
+        this.$emit('update:error', this.errorBucket.length > 0);
+      }
+    },
+    hasError: function hasError(val) {
+      if (this.shouldValidate) {
+        this.$emit('update:error', val);
+      }
+    },
+    error: function error(val) {
+      this.shouldValidate = !!val;
+    }
+  },
+
+  mounted: function mounted() {
+    this.shouldValidate = !!this.error;
+    this.validate();
+  },
+
+
+  methods: {
+    reset: function reset() {
+      var _this = this;
+
+      // TODO: Do this another way!
+      // This is so that we can reset all types of inputs
+      this.$emit('input', this.isMultiple ? [] : null);
+      this.$emit('change', null);
+
+      this.$nextTick(function () {
+        _this.shouldValidate = false;
+        _this.hasFocused = false;
+        _this.validate();
+      });
+    },
+    validate: function validate() {
+      var _this2 = this;
+
+      var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.inputValue;
+
+      if (force) this.shouldValidate = true;
+
+      this.errorBucket = [];
+
+      this.rules.forEach(function (rule) {
+        var valid = typeof rule === 'function' ? rule(value) : rule;
+
+        if (valid !== true && !['string', 'boolean'].includes(typeof valid === 'undefined' ? 'undefined' : _typeof(valid))) {
+          throw new TypeError('Rules should return a string or boolean, received \'' + (typeof valid === 'undefined' ? 'undefined' : _typeof(valid)) + '\' instead');
+        }
+
+        if (valid !== true) {
+          _this2.errorBucket.push(valid);
+        }
+      });
+
+      this.valid = this.errorBucket.length === 0;
+
+      return this.valid;
+    }
+  }
+};

package/es5/util/breakpoint.js

@@ -0,0 +1,128 @@
+/**
+ * A Kdu mixin to get the current width/height and the associated breakpoint.
+ *
+ * Useful to e.g. adapt the user interface from inside a Kdu component
+ * as opposed to using CSS classes. The breakpoint pixel values and
+ * range names are taken from Kdutify (https://github.com/kdutifyjs).
+ *
+ * Use within a component:
+ *
+ *   import breakpoint from './breakpoint.js'
+ *
+ *   export default {
+ *     name: 'my-component',
+ *     mixins: [breakpoint],
+ *     ...
+ *
+ * Then inside a template:
+ *
+ *   <div k-if="$breakpoint.smAndDown">...</div>
+ */
+var breakpoint = {
+  data: function data() {
+    return {
+      clientWidth: clientDimensions.getWidth(),
+      clientHeight: clientDimensions.getHeight()
+    };
+  },
+
+
+  computed: {
+    breakpoint: function breakpoint() {
+      var xs = this.clientWidth < 600;
+      var sm = this.clientWidth < 960 && !xs;
+      var md = this.clientWidth < 1280 - 16 && !(sm || xs);
+      var lg = this.clientWidth < 1920 - 16 && !(md || sm || xs);
+      var xl = this.clientWidth >= 1920 - 16 && !(lg || md || sm || xs);
+
+      var xsOnly = xs;
+      var smOnly = sm;
+      var smAndDown = (xs || sm) && !(md || lg || xl);
+      var smAndUp = !xs && (sm || md || lg || xl);
+      var mdOnly = md;
+      var mdAndDown = (xs || sm || md) && !(lg || xl);
+      var mdAndUp = !(xs || sm) && (md || lg || xl);
+      var lgOnly = lg;
+      var lgAndDown = (xs || sm || md || lg) && !xl;
+      var lgAndUp = !(xs || sm || md) && (lg || xl);
+      var xlOnly = xl;
+
+      var name = void 0;
+      switch (true) {
+        case xs:
+          name = 'xs';
+          break;
+        case sm:
+          name = 'sm';
+          break;
+        case md:
+          name = 'md';
+          break;
+        case lg:
+          name = 'lg';
+          break;
+        default:
+          name = 'xl';
+          break;
+      }
+
+      var result = {
+        // Definite breakpoint.
+        xs: xs,
+        sm: sm,
+        md: md,
+        lg: lg,
+        xl: xl,
+
+        // Useful e.g. to construct CSS class names dynamically.
+        name: name,
+
+        // Breakpoint ranges.
+        xsOnly: xsOnly,
+        smOnly: smOnly,
+        smAndDown: smAndDown,
+        smAndUp: smAndUp,
+        mdOnly: mdOnly,
+        mdAndDown: mdAndDown,
+        mdAndUp: mdAndUp,
+        lgOnly: lgOnly,
+        lgAndDown: lgAndDown,
+        lgAndUp: lgAndUp,
+        xlOnly: xlOnly,
+
+        // For custom breakpoint logic.
+        width: this.clientWidth,
+        height: this.clientHeight
+      };
+
+      return result;
+    }
+  },
+
+  watch: {
+    breakpoint: function breakpoint(val) {
+      this.$kdutify.breakpoint = val;
+    }
+  },
+
+  methods: {
+    onResize: function onResize() {
+      this.clientWidth = clientDimensions.getWidth();
+      this.clientHeight = clientDimensions.getHeight();
+    }
+  }
+
+  // Cross-browser support as described in:
+  // https://stackoverflow.com/questions/1248081
+};var clientDimensions = {
+  getWidth: function getWidth() {
+    if (typeof document === 'undefined') return 0; // SSR
+    return Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+  },
+  getHeight: function getHeight() {
+    if (typeof document === 'undefined') return 0; // SSR
+    return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+  }
+};
+
+export default breakpoint;