kdutify 0.16.9-rc.0 → 2.6.1

package/es5/components/KParallax/KParallax.js

@@ -1,98 +1,104 @@
-require('../../../src/stylus/components/_parallax.styl');
+"use strict";
 
-import Translatable from '../../mixins/translatable';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-export default {
-  name: 'k-parallax',
+require("..\\..\\..\\src\\components\\KParallax\\KParallax.sass");
 
-  mixins: [Translatable],
+var _translatable = _interopRequireDefault(require("../../mixins/translatable"));
 
-  data: function data() {
-    return {
-      isBooted: false
-    };
-  },
+var _mixins = _interopRequireDefault(require("../../util/mixins"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// Style
+// Mixins
+var baseMixins = (0, _mixins.default)(_translatable.default);
+/* @kdujs/component */
+
+var _default = baseMixins.extend().extend({
+  name: 'k-parallax',
   props: {
-    alt: String,
+    alt: {
+      type: String,
+      default: ''
+    },
     height: {
       type: [String, Number],
       default: 500
     },
-    jumbotron: Boolean,
-    src: String
+    src: String,
+    srcset: String
+  },
+  data: function data() {
+    return {
+      isBooted: false
+    };
   },
-
   computed: {
     styles: function styles() {
       return {
         display: 'block',
         opacity: this.isBooted ? 1 : 0,
-        transform: 'translate3d(-50%, ' + (this.jumbotron ? 0 : this.parallax + 'px') + ', 0)'
+        transform: "translate(-50%, ".concat(this.parallax, "px)")
       };
     }
   },
-
-  watch: {
-    parallax: function parallax() {
-      this.isBooted = true;
-    }
+  mounted: function mounted() {
+    this.init();
   },
-
   methods: {
     init: function init() {
       var _this = this;
 
-      if (!this.$refs.img) return;
+      var img = this.$refs.img;
+      if (!img) return;
 
-      if (this.$refs.img.complete) {
+      if (img.complete) {
         this.translate();
         this.listeners();
       } else {
-        this.$refs.img.addEventListener('load', function () {
+        img.addEventListener('load', function () {
           _this.translate();
+
           _this.listeners();
         }, false);
       }
+
+      this.isBooted = true;
     },
     objHeight: function objHeight() {
       return this.$refs.img.naturalHeight;
-    },
-    elOffsetTop: function elOffsetTop() {
-      return this.$el.offsetTop;
     }
   },
-
   render: function render(h) {
     var imgData = {
-      staticClass: 'parallax__image',
-      'class': {
-        'parallax__image--jumbotron': this.jumbotron
-      },
+      staticClass: 'k-parallax__image',
       style: this.styles,
       attrs: {
-        src: this.src
+        src: this.src,
+        srcset: this.srcset,
+        alt: this.alt
       },
       ref: 'img'
     };
-
-    if (this.alt) imgData.attrs.alt = this.alt;
-
     var container = h('div', {
-      staticClass: 'parallax__image-container'
+      staticClass: 'k-parallax__image-container'
     }, [h('img', imgData)]);
-
     var content = h('div', {
-      staticClass: 'parallax__content'
+      staticClass: 'k-parallax__content'
     }, this.$slots.default);
-
     return h('div', {
-      staticClass: 'parallax',
+      staticClass: 'k-parallax',
       style: {
-        height: this.jumbotron ? this.normalizedHeight : this.normalizedHeight + 'px'
+        height: "".concat(this.height, "px")
       },
       on: this.$listeners
     }, [container, content]);
   }
-};
+});
+
+exports.default = _default;
+//# sourceMappingURL=KParallax.js.map

package/es5/components/KParallax/KParallax.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KParallax/KParallax.ts"],"names":[],"mappings":";;;;;;;AACA;;AAGA;;AAIA;;;;AARA;AAGA;AAOA,IAAM,UAAU,GAAG,qBACjB,qBADiB,CAAnB;AASA;;eACe,UAAU,CAAC,MAAX,GAA6B,MAA7B,CAAoC;AACjD,EAAA,IAAI,EAAE,YAD2C;AAGjD,EAAA,KAAK,EAAE;AACL,IAAA,GAAG,EAAE;AACH,MAAA,IAAI,EAAE,MADH;AAEH,MAAA,OAAO,EAAE;AAFN,KADA;AAKL,IAAA,MAAM,EAAE;AACN,MAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,CADA;AAEN,MAAA,OAAO,EAAE;AAFH,KALH;AASL,IAAA,GAAG,EAAE,MATA;AAUL,IAAA,MAAM,EAAE;AAVH,GAH0C;AAgBjD,EAAA,IAAI,EAAE;AAAA,WAAO;AACX,MAAA,QAAQ,EAAE;AADC,KAAP;AAAA,GAhB2C;AAoBjD,EAAA,QAAQ,EAAE;AACR,IAAA,MADQ,oBACF;AACJ,aAAO;AACL,QAAA,OAAO,EAAE,OADJ;AAEL,QAAA,OAAO,EAAE,KAAK,QAAL,GAAgB,CAAhB,GAAoB,CAFxB;AAGL,QAAA,SAAS,4BAAqB,KAAK,QAA1B;AAHJ,OAAP;AAKD;AAPO,GApBuC;AA8BjD,EAAA,OA9BiD,qBA8B1C;AACL,SAAK,IAAL;AACD,GAhCgD;AAkCjD,EAAA,OAAO,EAAE;AACP,IAAA,IADO,kBACH;AAAA;;AACF,UAAM,GAAG,GAAG,KAAK,KAAL,CAAW,GAAvB;AAEA,UAAI,CAAC,GAAL,EAAU;;AAEV,UAAI,GAAG,CAAC,QAAR,EAAkB;AAChB,aAAK,SAAL;AACA,aAAK,SAAL;AACD,OAHD,MAGO;AACL,QAAA,GAAG,CAAC,gBAAJ,CAAqB,MAArB,EAA6B,YAAK;AAChC,UAAA,KAAI,CAAC,SAAL;;AACA,UAAA,KAAI,CAAC,SAAL;AACD,SAHD,EAGG,KAHH;AAID;;AAED,WAAK,QAAL,GAAgB,IAAhB;AACD,KAjBM;AAkBP,IAAA,SAlBO,uBAkBE;AACP,aAAO,KAAK,KAAL,CAAW,GAAX,CAAe,aAAtB;AACD;AApBM,GAlCwC;AAyDjD,EAAA,MAzDiD,kBAyDzC,CAzDyC,EAyDxC;AACP,QAAM,OAAO,GAAc;AACzB,MAAA,WAAW,EAAE,mBADY;AAEzB,MAAA,KAAK,EAAE,KAAK,MAFa;AAGzB,MAAA,KAAK,EAAE;AACL,QAAA,GAAG,EAAE,KAAK,GADL;AAEL,QAAA,MAAM,EAAE,KAAK,MAFR;AAGL,QAAA,GAAG,EAAE,KAAK;AAHL,OAHkB;AAQzB,MAAA,GAAG,EAAE;AARoB,KAA3B;AAWA,QAAM,SAAS,GAAG,CAAC,CAAC,KAAD,EAAQ;AACzB,MAAA,WAAW,EAAE;AADY,KAAR,EAEhB,CACD,CAAC,CAAC,KAAD,EAAQ,OAAR,CADA,CAFgB,CAAnB;AAMA,QAAM,OAAO,GAAG,CAAC,CAAC,KAAD,EAAQ;AACvB,MAAA,WAAW,EAAE;AADU,KAAR,EAEd,KAAK,MAAL,CAAY,OAFE,CAAjB;AAIA,WAAO,CAAC,CAAC,KAAD,EAAQ;AACd,MAAA,WAAW,EAAE,YADC;AAEd,MAAA,KAAK,EAAE;AACL,QAAA,MAAM,YAAK,KAAK,MAAV;AADD,OAFO;AAKd,MAAA,EAAE,EAAE,KAAK;AALK,KAAR,EAML,CAAC,SAAD,EAAY,OAAZ,CANK,CAAR;AAOD;AAtFgD,CAApC,C","sourcesContent":["// Style\nimport './KParallax.sass'\n\n// Mixins\nimport Translatable from '../../mixins/translatable'\n\n// Types\nimport { KNode, KNodeData } from 'kdu/types/knode'\nimport mixins from '../../util/mixins'\n\nconst baseMixins = mixins(\n  Translatable\n)\ninterface options extends InstanceType<typeof baseMixins> {\n  $refs: {\n    img: HTMLImageElement\n  }\n}\n\n/* @kdujs/component */\nexport default baseMixins.extend<options>().extend({\n  name: 'k-parallax',\n\n  props: {\n    alt: {\n      type: String,\n      default: '',\n    },\n    height: {\n      type: [String, Number],\n      default: 500,\n    },\n    src: String,\n    srcset: String,\n  },\n\n  data: () => ({\n    isBooted: false,\n  }),\n\n  computed: {\n    styles (): object {\n      return {\n        display: 'block',\n        opacity: this.isBooted ? 1 : 0,\n        transform: `translate(-50%, ${this.parallax}px)`,\n      }\n    },\n  },\n\n  mounted () {\n    this.init()\n  },\n\n  methods: {\n    init () {\n      const img = this.$refs.img\n\n      if (!img) return\n\n      if (img.complete) {\n        this.translate()\n        this.listeners()\n      } else {\n        img.addEventListener('load', () => {\n          this.translate()\n          this.listeners()\n        }, false)\n      }\n\n      this.isBooted = true\n    },\n    objHeight () {\n      return this.$refs.img.naturalHeight\n    },\n  },\n\n  render (h): KNode {\n    const imgData: KNodeData = {\n      staticClass: 'k-parallax__image',\n      style: this.styles,\n      attrs: {\n        src: this.src,\n        srcset: this.srcset,\n        alt: this.alt,\n      },\n      ref: 'img',\n    }\n\n    const container = h('div', {\n      staticClass: 'k-parallax__image-container',\n    }, [\n      h('img', imgData),\n    ])\n\n    const content = h('div', {\n      staticClass: 'k-parallax__content',\n    }, this.$slots.default)\n\n    return h('div', {\n      staticClass: 'k-parallax',\n      style: {\n        height: `${this.height}px`,\n      },\n      on: this.$listeners,\n    }, [container, content])\n  },\n})\n"],"sourceRoot":"","file":"KParallax.js"}

package/es5/components/KParallax/index.js

@@ -1,7 +1,20 @@
-import KParallax from './KParallax';
+"use strict";
 
-KParallax.install = function install(Kdu) {
-  Kdu.component(KParallax.name, KParallax);
-};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "KParallax", {
+  enumerable: true,
+  get: function get() {
+    return _KParallax.default;
+  }
+});
+exports.default = void 0;
 
-export default KParallax;
+var _KParallax = _interopRequireDefault(require("./KParallax"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _KParallax.default;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/es5/components/KParallax/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KParallax/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;;;;eAGe,kB","sourcesContent":["import KParallax from './KParallax'\n\nexport { KParallax }\nexport default KParallax\n"],"sourceRoot":"","file":"index.js"}

package/es5/components/KPicker/KPicker.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("..\\..\\..\\src\\components\\KPicker\\KPicker.sass");
+
+require("..\\..\\..\\src\\components\\KCard\\KCard.sass");
+
+var _colorable = _interopRequireDefault(require("../../mixins/colorable"));
+
+var _elevatable = _interopRequireDefault(require("../../mixins/elevatable"));
+
+var _themeable = _interopRequireDefault(require("../../mixins/themeable"));
+
+var _helpers = require("../../util/helpers");
+
+var _mixins = _interopRequireDefault(require("../../util/mixins"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
+/* @kdujs/component */
+var _default = (0, _mixins.default)(_colorable.default, _elevatable.default, _themeable.default).extend({
+  name: 'k-picker',
+  props: {
+    flat: Boolean,
+    fullWidth: Boolean,
+    landscape: Boolean,
+    noTitle: Boolean,
+    transition: {
+      type: String,
+      default: 'fade-transition'
+    },
+    width: {
+      type: [Number, String],
+      default: 290
+    }
+  },
+  computed: {
+    computedTitleColor: function computedTitleColor() {
+      var defaultTitleColor = this.isDark ? false : this.color || 'primary';
+      return this.color || defaultTitleColor;
+    }
+  },
+  methods: {
+    genTitle: function genTitle() {
+      return this.$createElement('div', this.setBackgroundColor(this.computedTitleColor, {
+        staticClass: 'k-picker__title',
+        class: {
+          'k-picker__title--landscape': this.landscape
+        }
+      }), this.$slots.title);
+    },
+    genBodyTransition: function genBodyTransition() {
+      return this.$createElement('transition', {
+        props: {
+          name: this.transition
+        }
+      }, this.$slots.default);
+    },
+    genBody: function genBody() {
+      return this.$createElement('div', {
+        staticClass: 'k-picker__body',
+        class: _objectSpread({
+          'k-picker__body--no-title': this.noTitle
+        }, this.themeClasses),
+        style: this.fullWidth ? undefined : {
+          width: (0, _helpers.convertToUnit)(this.width)
+        }
+      }, [this.genBodyTransition()]);
+    },
+    genActions: function genActions() {
+      return this.$createElement('div', {
+        staticClass: 'k-picker__actions k-card__actions',
+        class: {
+          'k-picker__actions--no-title': this.noTitle
+        }
+      }, this.$slots.actions);
+    }
+  },
+  render: function render(h) {
+    return h('div', {
+      staticClass: 'k-picker k-card',
+      class: _objectSpread(_objectSpread({
+        'k-picker--flat': this.flat,
+        'k-picker--landscape': this.landscape,
+        'k-picker--full-width': this.fullWidth
+      }, this.themeClasses), this.elevationClasses)
+    }, [this.$slots.title ? this.genTitle() : null, this.genBody(), this.$slots.actions ? this.genActions() : null]);
+  }
+});
+
+exports.default = _default;
+//# sourceMappingURL=KPicker.js.map

package/es5/components/KPicker/KPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KPicker/KPicker.ts"],"names":[],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;AACA;;AACA;;AAGA;;AAIA;;;;;;;;;;AAEA;eACe,qBACb,kBADa,EAEb,mBAFa,EAGb,kBAHa,EAIb,MAJa,CAIN;AACP,EAAA,IAAI,EAAE,UADC;AAGP,EAAA,KAAK,EAAE;AACL,IAAA,IAAI,EAAE,OADD;AAEL,IAAA,SAAS,EAAE,OAFN;AAGL,IAAA,SAAS,EAAE,OAHN;AAIL,IAAA,OAAO,EAAE,OAJJ;AAKL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,OAAO,EAAE;AAFC,KALP;AASL,IAAA,KAAK,EAAE;AACL,MAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,CADD;AAEL,MAAA,OAAO,EAAE;AAFJ;AATF,GAHA;AAkBP,EAAA,QAAQ,EAAE;AACR,IAAA,kBADQ,gCACU;AAChB,UAAM,iBAAiB,GAAG,KAAK,MAAL,GAAc,KAAd,GAAuB,KAAK,KAAL,IAAc,SAA/D;AACA,aAAO,KAAK,KAAL,IAAc,iBAArB;AACD;AAJO,GAlBH;AAyBP,EAAA,OAAO,EAAE;AACP,IAAA,QADO,sBACC;AACN,aAAO,KAAK,cAAL,CAAoB,KAApB,EAA2B,KAAK,kBAAL,CAAwB,KAAK,kBAA7B,EAAiD;AACjF,QAAA,WAAW,EAAE,iBADoE;AAEjF,QAAA,KAAK,EAAE;AACL,wCAA8B,KAAK;AAD9B;AAF0E,OAAjD,CAA3B,EAKH,KAAK,MAAL,CAAY,KALT,CAAP;AAMD,KARM;AASP,IAAA,iBATO,+BASU;AACf,aAAO,KAAK,cAAL,CAAoB,YAApB,EAAkC;AACvC,QAAA,KAAK,EAAE;AACL,UAAA,IAAI,EAAE,KAAK;AADN;AADgC,OAAlC,EAIJ,KAAK,MAAL,CAAY,OAJR,CAAP;AAKD,KAfM;AAgBP,IAAA,OAhBO,qBAgBA;AACL,aAAO,KAAK,cAAL,CAAoB,KAApB,EAA2B;AAChC,QAAA,WAAW,EAAE,gBADmB;AAEhC,QAAA,KAAK;AACH,sCAA4B,KAAK;AAD9B,WAEA,KAAK,YAFL,CAF2B;AAMhC,QAAA,KAAK,EAAE,KAAK,SAAL,GAAiB,SAAjB,GAA6B;AAClC,UAAA,KAAK,EAAE,4BAAc,KAAK,KAAnB;AAD2B;AANJ,OAA3B,EASJ,CACD,KAAK,iBAAL,EADC,CATI,CAAP;AAYD,KA7BM;AA8BP,IAAA,UA9BO,wBA8BG;AACR,aAAO,KAAK,cAAL,CAAoB,KAApB,EAA2B;AAChC,QAAA,WAAW,EAAE,mCADmB;AAEhC,QAAA,KAAK,EAAE;AACL,yCAA+B,KAAK;AAD/B;AAFyB,OAA3B,EAKJ,KAAK,MAAL,CAAY,OALR,CAAP;AAMD;AArCM,GAzBF;AAiEP,EAAA,MAjEO,kBAiEC,CAjED,EAiEE;AACP,WAAO,CAAC,CAAC,KAAD,EAAQ;AACd,MAAA,WAAW,EAAE,iBADC;AAEd,MAAA,KAAK;AACH,0BAAkB,KAAK,IADpB;AAEH,+BAAuB,KAAK,SAFzB;AAGH,gCAAwB,KAAK;AAH1B,SAIA,KAAK,YAJL,GAKA,KAAK,gBALL;AAFS,KAAR,EASL,CACD,KAAK,MAAL,CAAY,KAAZ,GAAoB,KAAK,QAAL,EAApB,GAAsC,IADrC,EAED,KAAK,OAAL,EAFC,EAGD,KAAK,MAAL,CAAY,OAAZ,GAAsB,KAAK,UAAL,EAAtB,GAA0C,IAHzC,CATK,CAAR;AAcD;AAhFM,CAJM,C","sourcesContent":["import './KPicker.sass'\nimport '../KCard/KCard.sass'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport Elevatable from '../../mixins/elevatable'\nimport Themeable from '../../mixins/themeable'\n\n// Helpers\nimport { convertToUnit } from '../../util/helpers'\n\n// Types\nimport { KNode } from 'kdu/types'\nimport mixins from '../../util/mixins'\n\n/* @kdujs/component */\nexport default mixins(\n  Colorable,\n  Elevatable,\n  Themeable\n).extend({\n  name: 'k-picker',\n\n  props: {\n    flat: Boolean,\n    fullWidth: Boolean,\n    landscape: Boolean,\n    noTitle: Boolean,\n    transition: {\n      type: String,\n      default: 'fade-transition',\n    },\n    width: {\n      type: [Number, String],\n      default: 290,\n    },\n  },\n\n  computed: {\n    computedTitleColor (): string | false {\n      const defaultTitleColor = this.isDark ? false : (this.color || 'primary')\n      return this.color || defaultTitleColor\n    },\n  },\n\n  methods: {\n    genTitle () {\n      return this.$createElement('div', this.setBackgroundColor(this.computedTitleColor, {\n        staticClass: 'k-picker__title',\n        class: {\n          'k-picker__title--landscape': this.landscape,\n        },\n      }), this.$slots.title)\n    },\n    genBodyTransition () {\n      return this.$createElement('transition', {\n        props: {\n          name: this.transition,\n        },\n      }, this.$slots.default)\n    },\n    genBody () {\n      return this.$createElement('div', {\n        staticClass: 'k-picker__body',\n        class: {\n          'k-picker__body--no-title': this.noTitle,\n          ...this.themeClasses,\n        },\n        style: this.fullWidth ? undefined : {\n          width: convertToUnit(this.width),\n        },\n      }, [\n        this.genBodyTransition(),\n      ])\n    },\n    genActions () {\n      return this.$createElement('div', {\n        staticClass: 'k-picker__actions k-card__actions',\n        class: {\n          'k-picker__actions--no-title': this.noTitle,\n        },\n      }, this.$slots.actions)\n    },\n  },\n\n  render (h): KNode {\n    return h('div', {\n      staticClass: 'k-picker k-card',\n      class: {\n        'k-picker--flat': this.flat,\n        'k-picker--landscape': this.landscape,\n        'k-picker--full-width': this.fullWidth,\n        ...this.themeClasses,\n        ...this.elevationClasses,\n      },\n    }, [\n      this.$slots.title ? this.genTitle() : null,\n      this.genBody(),\n      this.$slots.actions ? this.genActions() : null,\n    ])\n  },\n})\n"],"sourceRoot":"","file":"KPicker.js"}

package/es5/components/KPicker/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "KPicker", {
+  enumerable: true,
+  get: function get() {
+    return _KPicker.default;
+  }
+});
+exports.default = void 0;
+
+var _KPicker = _interopRequireDefault(require("./KPicker"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _KPicker.default;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/es5/components/KPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KPicker/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;;;;eAGe,gB","sourcesContent":["import KPicker from './KPicker'\n\nexport { KPicker }\nexport default KPicker\n"],"sourceRoot":"","file":"index.js"}

package/es5/components/KProgressCircular/KProgressCircular.js

@@ -1,67 +1,70 @@
-require('../../../src/stylus/components/_progress-circular.styl');
+"use strict";
 
-import Colorable from '../../mixins/colorable';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-export default {
-  name: 'k-progress-circular',
+require("..\\..\\..\\src\\components\\KProgressCircular\\KProgressCircular.sass");
 
-  mixins: [Colorable],
+var _intersect = _interopRequireDefault(require("../../directives/intersect"));
 
-  props: {
-    button: Boolean,
+var _colorable = _interopRequireDefault(require("../../mixins/colorable"));
 
-    fill: {
-      type: String,
-      default: function _default() {
-        return this.indeterminate ? 'none' : 'transparent';
-      }
-    },
+var _helpers = require("../../util/helpers");
 
-    indeterminate: Boolean,
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Styles
+// Directives
+// Mixins
+// Utils
 
+/* @kdujs/component */
+var _default = _colorable.default.extend({
+  name: 'k-progress-circular',
+  directives: {
+    intersect: _intersect.default
+  },
+  props: {
+    button: Boolean,
+    indeterminate: Boolean,
     rotate: {
-      type: Number,
+      type: [Number, String],
       default: 0
     },
-
     size: {
       type: [Number, String],
       default: 32
     },
-
     width: {
-      type: Number,
+      type: [Number, String],
       default: 4
     },
-
     value: {
-      type: Number,
+      type: [Number, String],
       default: 0
     }
   },
-
+  data: function data() {
+    return {
+      radius: 20,
+      isVisible: true
+    };
+  },
   computed: {
     calculatedSize: function calculatedSize() {
-      var size = Number(this.size);
-
-      if (this.button) {
-        size += 8;
-      }
-
-      return size;
+      return Number(this.size) + (this.button ? 8 : 0);
     },
     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;
+      return {
+        'k-progress-circular--visible': this.isVisible,
+        'k-progress-circular--indeterminate': this.indeterminate,
+        'k-progress-circular--button': this.button
+      };
     },
     normalizedValue: function normalizedValue() {
       if (this.value < 0) {
@@ -72,10 +75,7 @@ export default {
         return 100;
       }
 
-      return this.value;
-    },
-    radius: function radius() {
-      return this.indeterminate && !this.button ? 20 : (this.calculatedSize - this.width) / 2;
+      return parseFloat(this.value);
     },
     strokeDashArray: function strokeDashArray() {
       return Math.round(this.circumference * 1000) / 1000;
@@ -83,63 +83,77 @@ export default {
     strokeDashOffset: function strokeDashOffset() {
       return (100 - this.normalizedValue) / 100 * this.circumference + 'px';
     },
+    strokeWidth: function strokeWidth() {
+      return Number(this.width) / +this.size * this.viewBoxSize * 2;
+    },
     styles: function styles() {
       return {
-        height: this.calculatedSize + 'px',
-        width: this.calculatedSize + 'px'
+        height: (0, _helpers.convertToUnit)(this.calculatedSize),
+        width: (0, _helpers.convertToUnit)(this.calculatedSize)
       };
     },
-    svgSize: function svgSize() {
-      return this.indeterminate ? false : this.calculatedSize;
-    },
     svgStyles: function svgStyles() {
       return {
-        transform: 'rotate(' + this.rotate + 'deg)'
+        transform: "rotate(".concat(Number(this.rotate), "deg)")
       };
     },
-    viewBox: function viewBox() {
-      return this.indeterminate ? '25 25 50 50' : false;
+    viewBoxSize: function viewBoxSize() {
+      return this.radius / (1 - Number(this.width) / +this.size);
     }
   },
-
   methods: {
-    genCircle: function genCircle(h, name, offset) {
-      return h('circle', {
-        class: 'progress-circular__' + name,
+    genCircle: function genCircle(name, offset) {
+      return this.$createElement('circle', {
+        class: "k-progress-circular__".concat(name),
         attrs: {
           fill: 'transparent',
-          cx: this.cxy,
-          cy: this.cxy,
+          cx: 2 * this.viewBoxSize,
+          cy: 2 * this.viewBoxSize,
           r: this.radius,
-          'stroke-width': this.width,
+          'stroke-width': this.strokeWidth,
           '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', {
+    genSvg: function genSvg() {
+      var children = [this.indeterminate || this.genCircle('underlay', 0), this.genCircle('overlay', this.strokeDashOffset)];
+      return this.$createElement('svg', {
         style: this.svgStyles,
         attrs: {
           xmlns: 'http://www.w3.org/2000/svg',
-          height: this.svgSize,
-          width: this.svgSize,
-          viewBox: this.viewBox
+          viewBox: "".concat(this.viewBoxSize, " ").concat(this.viewBoxSize, " ").concat(2 * this.viewBoxSize, " ").concat(2 * this.viewBoxSize)
         }
       }, children);
+    },
+    genInfo: function genInfo() {
+      return this.$createElement('div', {
+        staticClass: 'k-progress-circular__info'
+      }, this.$slots.default);
+    },
+    onObserve: function onObserve(entries, observer, isIntersecting) {
+      this.isVisible = isIntersecting;
     }
   },
-
   render: function render(h) {
-    var info = h('div', { class: 'progress-circular__info' }, [this.$slots.default]);
-    var svg = this.genSvg(h);
-
-    return h('div', {
+    return h('div', this.setTextColor(this.color, {
+      staticClass: 'k-progress-circular',
+      attrs: {
+        role: 'progressbar',
+        'aria-valuemin': 0,
+        'aria-valuemax': 100,
+        'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue
+      },
       class: this.classes,
+      directives: [{
+        name: 'intersect',
+        value: this.onObserve
+      }],
       style: this.styles,
       on: this.$listeners
-    }, [svg, info]);
+    }), [this.genSvg(), this.genInfo()]);
   }
-};
+});
+
+exports.default = _default;
+//# sourceMappingURL=KProgressCircular.js.map

package/es5/components/KProgressCircular/KProgressCircular.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KProgressCircular/KProgressCircular.ts"],"names":[],"mappings":"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","sourcesContent":["// Styles\nimport './KProgressCircular.sass'\n\n// Directives\nimport intersect from '../../directives/intersect'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\n\n// Utils\nimport { convertToUnit } from '../../util/helpers'\n\n// Types\nimport { KNode, KNodeChildren } from 'kdu'\n\n/* @kdujs/component */\nexport default Colorable.extend({\n  name: 'k-progress-circular',\n\n  directives: { intersect },\n\n  props: {\n    button: Boolean,\n    indeterminate: Boolean,\n    rotate: {\n      type: [Number, String],\n      default: 0,\n    },\n    size: {\n      type: [Number, String],\n      default: 32,\n    },\n    width: {\n      type: [Number, String],\n      default: 4,\n    },\n    value: {\n      type: [Number, String],\n      default: 0,\n    },\n  },\n\n  data: () => ({\n    radius: 20,\n    isVisible: true,\n  }),\n\n  computed: {\n    calculatedSize (): number {\n      return Number(this.size) + (this.button ? 8 : 0)\n    },\n\n    circumference (): number {\n      return 2 * Math.PI * this.radius\n    },\n\n    classes (): object {\n      return {\n        'k-progress-circular--visible': this.isVisible,\n        'k-progress-circular--indeterminate': this.indeterminate,\n        'k-progress-circular--button': this.button,\n      }\n    },\n\n    normalizedValue (): number {\n      if (this.value < 0) {\n        return 0\n      }\n\n      if (this.value > 100) {\n        return 100\n      }\n\n      return parseFloat(this.value)\n    },\n\n    strokeDashArray (): number {\n      return Math.round(this.circumference * 1000) / 1000\n    },\n\n    strokeDashOffset (): string {\n      return ((100 - this.normalizedValue) / 100) * this.circumference + 'px'\n    },\n\n    strokeWidth (): number {\n      return Number(this.width) / +this.size * this.viewBoxSize * 2\n    },\n\n    styles (): object {\n      return {\n        height: convertToUnit(this.calculatedSize),\n        width: convertToUnit(this.calculatedSize),\n      }\n    },\n\n    svgStyles (): object {\n      return {\n        transform: `rotate(${Number(this.rotate)}deg)`,\n      }\n    },\n\n    viewBoxSize (): number {\n      return this.radius / (1 - Number(this.width) / +this.size)\n    },\n  },\n\n  methods: {\n    genCircle (name: string, offset: string | number): KNode {\n      return this.$createElement('circle', {\n        class: `k-progress-circular__${name}`,\n        attrs: {\n          fill: 'transparent',\n          cx: 2 * this.viewBoxSize,\n          cy: 2 * this.viewBoxSize,\n          r: this.radius,\n          'stroke-width': this.strokeWidth,\n          'stroke-dasharray': this.strokeDashArray,\n          'stroke-dashoffset': offset,\n        },\n      })\n    },\n    genSvg (): KNode {\n      const children = [\n        this.indeterminate || this.genCircle('underlay', 0),\n        this.genCircle('overlay', this.strokeDashOffset),\n      ] as KNodeChildren\n\n      return this.$createElement('svg', {\n        style: this.svgStyles,\n        attrs: {\n          xmlns: 'http://www.w3.org/2000/svg',\n          viewBox: `${this.viewBoxSize} ${this.viewBoxSize} ${2 * this.viewBoxSize} ${2 * this.viewBoxSize}`,\n        },\n      }, children)\n    },\n    genInfo (): KNode {\n      return this.$createElement('div', {\n        staticClass: 'k-progress-circular__info',\n      }, this.$slots.default)\n    },\n    onObserve (entries: IntersectionObserverEntry[], observer: IntersectionObserver, isIntersecting: boolean) {\n      this.isVisible = isIntersecting\n    },\n  },\n\n  render (h): KNode {\n    return h('div', this.setTextColor(this.color, {\n      staticClass: 'k-progress-circular',\n      attrs: {\n        role: 'progressbar',\n        'aria-valuemin': 0,\n        'aria-valuemax': 100,\n        'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue,\n      },\n      class: this.classes,\n      directives: [{\n        name: 'intersect',\n        value: this.onObserve,\n      }],\n      style: this.styles,\n      on: this.$listeners,\n    }), [\n      this.genSvg(),\n      this.genInfo(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"KProgressCircular.js"}

package/es5/components/KProgressCircular/index.js

@@ -1,7 +1,20 @@
-import KProgressCircular from './KProgressCircular';
+"use strict";
 
-KProgressCircular.install = function install(Kdu) {
-  Kdu.component(KProgressCircular.name, KProgressCircular);
-};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "KProgressCircular", {
+  enumerable: true,
+  get: function get() {
+    return _KProgressCircular.default;
+  }
+});
+exports.default = void 0;
 
-export default KProgressCircular;
+var _KProgressCircular = _interopRequireDefault(require("./KProgressCircular"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _KProgressCircular.default;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/es5/components/KProgressCircular/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KProgressCircular/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;;;;eAGe,0B","sourcesContent":["import KProgressCircular from './KProgressCircular'\n\nexport { KProgressCircular }\nexport default KProgressCircular\n"],"sourceRoot":"","file":"index.js"}