kdutify 0.16.9-rc.0

package/es5/components/KProgressCircular/KProgressCircular.js

@@ -0,0 +1,145 @@
+require('../../../src/stylus/components/_progress-circular.styl');
+
+import Colorable from '../../mixins/colorable';
+
+export default {
+  name: 'k-progress-circular',
+
+  mixins: [Colorable],
+
+  props: {
+    button: Boolean,
+
+    fill: {
+      type: String,
+      default: function _default() {
+        return this.indeterminate ? 'none' : 'transparent';
+      }
+    },
+
+    indeterminate: Boolean,
+
+    rotate: {
+      type: Number,
+      default: 0
+    },
+
+    size: {
+      type: [Number, String],
+      default: 32
+    },
+
+    width: {
+      type: Number,
+      default: 4
+    },
+
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  computed: {
+    calculatedSize: function calculatedSize() {
+      var size = Number(this.size);
+
+      if (this.button) {
+        size += 8;
+      }
+
+      return size;
+    },
+    circumference: function circumference() {
+      return 2 * Math.PI * this.radius;
+    },
+    classes: function classes() {
+      return this.addTextColorClassChecks({
+        'progress-circular': true,
+        'progress-circular--indeterminate': this.indeterminate,
+        'progress-circular--button': this.button
+      });
+    },
+    cxy: function cxy() {
+      return this.indeterminate && !this.button ? 50 : this.calculatedSize / 2;
+    },
+    normalizedValue: function normalizedValue() {
+      if (this.value < 0) {
+        return 0;
+      }
+
+      if (this.value > 100) {
+        return 100;
+      }
+
+      return this.value;
+    },
+    radius: function radius() {
+      return this.indeterminate && !this.button ? 20 : (this.calculatedSize - this.width) / 2;
+    },
+    strokeDashArray: function strokeDashArray() {
+      return Math.round(this.circumference * 1000) / 1000;
+    },
+    strokeDashOffset: function strokeDashOffset() {
+      return (100 - this.normalizedValue) / 100 * this.circumference + 'px';
+    },
+    styles: function styles() {
+      return {
+        height: this.calculatedSize + 'px',
+        width: this.calculatedSize + 'px'
+      };
+    },
+    svgSize: function svgSize() {
+      return this.indeterminate ? false : this.calculatedSize;
+    },
+    svgStyles: function svgStyles() {
+      return {
+        transform: 'rotate(' + this.rotate + 'deg)'
+      };
+    },
+    viewBox: function viewBox() {
+      return this.indeterminate ? '25 25 50 50' : false;
+    }
+  },
+
+  methods: {
+    genCircle: function genCircle(h, name, offset) {
+      return h('circle', {
+        class: 'progress-circular__' + name,
+        attrs: {
+          fill: 'transparent',
+          cx: this.cxy,
+          cy: this.cxy,
+          r: this.radius,
+          'stroke-width': this.width,
+          'stroke-dasharray': this.strokeDashArray,
+          'stroke-dashoffset': offset
+        }
+      });
+    },
+    genSvg: function genSvg(h) {
+      var children = [!this.indeterminate && this.genCircle(h, 'underlay', 0), this.genCircle(h, 'overlay', this.strokeDashOffset)];
+
+      return h('svg', {
+        style: this.svgStyles,
+        attrs: {
+          xmlns: 'http://www.w3.org/2000/svg',
+          height: this.svgSize,
+          width: this.svgSize,
+          viewBox: this.viewBox
+        }
+      }, children);
+    }
+  },
+
+  render: function render(h) {
+    var info = h('div', { class: 'progress-circular__info' }, [this.$slots.default]);
+    var svg = this.genSvg(h);
+
+    return h('div', {
+      class: this.classes,
+      style: this.styles,
+      on: this.$listeners
+    }, [svg, info]);
+  }
+};

package/es5/components/KProgressCircular/index.js

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

package/es5/components/KProgressLinear/KProgressLinear.js

@@ -0,0 +1,146 @@
+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/_progress-linear.styl');
+
+import Colorable from '../../mixins/colorable';
+
+import { KFadeTransition, KSlideXTransition } from '../transitions';
+
+export default {
+  name: 'k-progress-linear',
+
+  components: {
+    KFadeTransition: KFadeTransition,
+    KSlideXTransition: KSlideXTransition
+  },
+
+  mixins: [Colorable],
+
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    backgroundColor: {
+      type: String,
+      default: null
+    },
+    backgroundOpacity: {
+      type: [Number, String],
+      default: null
+    },
+    bufferValue: {
+      type: [Number, String],
+      default: 100
+    },
+    color: {
+      type: String,
+      default: 'primary'
+    },
+    height: {
+      type: [Number, String],
+      default: 7
+    },
+    indeterminate: Boolean,
+    query: Boolean,
+    value: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+
+  computed: {
+    styles: function styles() {
+      var styles = {};
+
+      if (!this.active) {
+        styles.height = 0;
+      }
+
+      if (!this.indeterminate && parseInt(this.bufferValue, 10) !== 100) {
+        styles.width = this.bufferValue + '%';
+      }
+
+      return styles;
+    },
+    effectiveWidth: function effectiveWidth() {
+      if (!this.bufferValue) {
+        return 0;
+      }
+
+      return this.value * 100 / this.bufferValue;
+    },
+    bufferStyles: function bufferStyles() {
+      var styles = {};
+
+      if (!this.active) {
+        styles.height = 0;
+      }
+
+      return styles;
+    },
+    backgroundStyle: function backgroundStyle() {
+      var backgroundOpacity = this.backgroundOpacity == null ? this.backgroundColor ? 1 : 0.3 : parseFloat(this.backgroundOpacity);
+
+      return {
+        height: this.active ? 'auto' : 0,
+        opacity: backgroundOpacity,
+        width: this.bufferValue + '%'
+      };
+    }
+  },
+
+  methods: {
+    genDeterminate: function genDeterminate(h) {
+      return h('div', {
+        ref: 'front',
+        staticClass: 'progress-linear__bar__determinate',
+        class: this.addBackgroundColorClassChecks({}),
+        style: {
+          width: this.effectiveWidth + '%'
+        }
+      });
+    },
+    genBar: function genBar(h, name) {
+      return h('div', {
+        staticClass: 'progress-linear__bar__indeterminate',
+        class: this.addBackgroundColorClassChecks(_defineProperty({}, name, true))
+      });
+    },
+    genIndeterminate: function genIndeterminate(h) {
+      return h('div', {
+        ref: 'front',
+        staticClass: 'progress-linear__bar__indeterminate',
+        class: {
+          'progress-linear__bar__indeterminate--active': this.active
+        }
+      }, [this.genBar(h, 'long'), this.genBar(h, 'short')]);
+    }
+  },
+
+  render: function render(h) {
+    var fade = h('k-fade-transition', [this.indeterminate && this.genIndeterminate(h)]);
+    var slide = h('k-slide-x-transition', [!this.indeterminate && this.genDeterminate(h)]);
+
+    var bar = h('div', {
+      staticClass: 'progress-linear__bar',
+      style: this.styles
+    }, [fade, slide]);
+    var background = h('div', {
+      staticClass: 'progress-linear__background',
+      class: [this.backgroundColor || this.color],
+      style: this.backgroundStyle
+    });
+
+    return h('div', {
+      staticClass: 'progress-linear',
+      class: {
+        'progress-linear--query': this.query
+      },
+      style: {
+        height: this.height + 'px'
+      },
+      on: this.$listeners
+    }, [background, bar]);
+  }
+};

package/es5/components/KProgressLinear/index.js

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

package/es5/components/KRadioGroup/KRadio.js

@@ -0,0 +1,148 @@
+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; };
+
+import { KFadeTransition } from '../transitions';
+import KIcon from '../KIcon';
+
+import Colorable from '../../mixins/colorable';
+import Rippleable from '../../mixins/rippleable';
+import TabFocusable from '../../mixins/tab-focusable';
+import Themeable from '../../mixins/themeable';
+
+export default {
+  name: 'k-radio',
+
+  inheritAttrs: false,
+
+  inject: ['isMandatory', 'name', 'registerChild', 'unregisterChild'],
+
+  components: {
+    KFadeTransition: KFadeTransition,
+    KIcon: KIcon
+  },
+
+  mixins: [Colorable, Rippleable, TabFocusable, Themeable],
+
+  props: {
+    disabled: Boolean,
+    value: null,
+    label: String
+  },
+
+  data: function data() {
+    return {
+      isActive: false
+    };
+  },
+
+
+  computed: {
+    classes: function classes() {
+      return this.addTextColorClassChecks({
+        'input-group': true,
+        'input-group--active': this.isActive,
+        'input-group--disabled': this.disabled,
+        'input-group--selection-controls': true,
+        'input-group--tab-focused': this.tabFocused,
+        'radio': true,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      });
+    },
+    icon: function icon() {
+      return this.isActive ? 'radio_button_checked' : 'radio_button_unchecked';
+    }
+  },
+
+  methods: {
+    genInput: function genInput(radio) {
+      var value = ['string', 'number'].includes(_typeof(this.value)) ? this.value : JSON.stringify(this.value);
+      var input = this.$createElement('input', {
+        ref: 'input',
+        style: {
+          display: 'none'
+        },
+        attrs: Object.assign({
+          name: this.name && this.name(),
+          id: this.id,
+          type: 'radio',
+          value: value
+        }, this.$attrs)
+      }, [value]);
+
+      radio.push(input);
+
+      return this.$createElement('div', {
+        class: 'input-group__input'
+      }, radio);
+    },
+    genWrapper: function genWrapper(radio) {
+      var _this = this;
+
+      var children = [];
+
+      children.push(this.genLabel());
+      children.push(this.genInput(radio));
+
+      return this.$createElement('div', {
+        class: this.classes,
+        attrs: {
+          role: 'radio',
+          'aria-checked': this.isActive && 'true' || 'false',
+          'aria-label': this.label
+        },
+        on: {
+          keydown: function keydown(e) {
+            if ([13, 32].includes(e.keyCode)) {
+              e.preventDefault();
+              _this.toggle();
+            }
+          },
+          blur: function blur(e) {
+            _this.$emit('blur', e);
+            _this.tabFocused = false;
+          }
+        }
+      }, children);
+    },
+    genLabel: function genLabel() {
+      return this.$createElement('label', {
+        on: {
+          click: this.toggle
+        }
+      }, this.$slots.label || this.label);
+    },
+    toggle: function toggle() {
+      var mandatory = this.isMandatory && this.isMandatory() || false;
+
+      if (!this.disabled && (!this.isActive || !mandatory)) {
+        this.$refs.input.checked = true;
+        this.isActive = true;
+        this.$emit('change', this.value);
+      }
+    }
+  },
+
+  created: function created() {
+    // Semantic check to help people identify the reason for the inject error above it.
+    if (!this.$parent || !this.$parent.$knode || !this.$parent.$knode.tag || !this.$parent.$knode.tag.endsWith('k-radio-group')) {
+      console.warn('[Kdutify] Warn: The k-radio component must have an immediate parent of k-radio-group.');
+    }
+  },
+  mounted: function mounted() {
+    this.registerChild(this);
+  },
+  beforeDestroy: function beforeDestroy() {
+    this.unregisterChild(this);
+  },
+  render: function render(h) {
+    var transition = h('k-fade-transition', {}, [h('k-icon', {
+      staticClass: 'icon--selection-control',
+      'class': {
+        'icon--radio': this.isActive
+      },
+      key: this.icon
+    }, this.icon)]);
+
+    return this.genWrapper([transition, this.genRipple()]);
+  }
+};

package/es5/components/KRadioGroup/KRadioGroup.js

@@ -0,0 +1,139 @@
+require('../../../src/stylus/components/_input-groups.styl');
+require('../../../src/stylus/components/_selection-controls.styl');
+require('../../../src/stylus/components/_radio-group.styl');
+
+import Input from '../../mixins/input';
+
+export default {
+  name: 'k-radio-group',
+
+  mixins: [Input],
+
+  model: {
+    prop: 'inputValue',
+    event: 'change'
+  },
+
+  provide: function provide() {
+    var _this = this;
+
+    return {
+      isMandatory: function isMandatory() {
+        return _this.mandatory;
+      },
+      name: function name() {
+        return _this.name;
+      },
+      registerChild: this.registerChild,
+      unregisterChild: this.unregisterChild
+    };
+  },
+
+
+  props: {
+    column: {
+      type: Boolean,
+      default: true
+    },
+    inputValue: null,
+    mandatory: {
+      type: Boolean,
+      default: true
+    },
+    name: String,
+    row: Boolean
+  },
+
+  data: function data() {
+    return {
+      internalTabIndex: -1
+    };
+  },
+
+
+  watch: {
+    inputValue: function inputValue(val) {
+      this.getRadios().forEach(function (radio) {
+        radio.isActive = val === radio.value;
+      });
+    }
+  },
+
+  computed: {
+    classes: function classes() {
+      return {
+        'radio-group': true,
+        'radio-group--column': this.column && !this.row,
+        'radio-group--row': this.row
+      };
+    }
+  },
+
+  methods: {
+    getRadios: function getRadios() {
+      return this.$children.filter(function (child) {
+        return child.$el.classList.contains('radio');
+      });
+    },
+    toggleRadio: function toggleRadio(value) {
+      var _this2 = this;
+
+      if (this.disabled) {
+        return;
+      }
+
+      this.shouldValidate = true;
+      this.$emit('change', value);
+      this.$nextTick(function () {
+        return _this2.validate();
+      });
+
+      this.getRadios().filter(function (r) {
+        return r.value !== value;
+      }).forEach(function (r) {
+        return r.isActive = false;
+      });
+    },
+    radioBlur: function radioBlur(e) {
+      if (!e.relatedTarget || !e.relatedTarget.classList.contains('radio')) {
+        this.shouldValidate = true;
+        this.$emit('blur', this.inputValue);
+      }
+    },
+    registerChild: function registerChild(radio) {
+      radio.isActive = this.inputValue === radio.value;
+      radio.$el.tabIndex = radio.$el.tabIndex > 0 ? radio.$el.tabIndex : 0;
+      radio.$on('change', this.toggleRadio);
+      radio.$on('blur', this.radioBlur);
+      radio.$on('focus', this.radioFocus);
+    },
+    unregisterChild: function unregisterChild(radio) {
+      radio.$off('change', this.toggleRadio);
+      radio.$off('blur', this.radioBlur);
+      radio.$off('focus', this.radioFocus);
+    }
+  },
+
+  mounted: function mounted() {
+    var _this3 = this;
+
+    this.getRadios().forEach(function (radio) {
+      return _this3.registerChild(radio);
+    });
+  },
+  beforeDestroy: function beforeDestroy() {
+    var _this4 = this;
+
+    this.getRadios().forEach(function (radio) {
+      return _this4.unregisterChild(radio);
+    });
+  },
+  render: function render(h) {
+    var data = {
+      attrs: {
+        role: 'radiogroup'
+      }
+    };
+    return this.genInputGroup(this.$slots.default, data);
+  }
+};

package/es5/components/KRadioGroup/index.js

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