kdutify 2.6.0 → 2.7.2

package/lib/components/KChip/KChip.js

@@ -1,20 +1,20 @@
 // Styles
 import "..\\..\\..\\src\\components\\KChip\\KChip.sass";
-import mixins from '../../util/mixins'; // Components
-
+import mixins from '../../util/mixins';
+// Components
 import { KExpandXTransition } from '../transitions';
-import KIcon from '../KIcon'; // Mixins
-
+import KIcon from '../KIcon';
+// Mixins
 import Colorable from '../../mixins/colorable';
 import { factory as GroupableFactory } from '../../mixins/groupable';
 import Themeable from '../../mixins/themeable';
 import { factory as ToggleableFactory } from '../../mixins/toggleable';
 import Routable from '../../mixins/routable';
-import Sizeable from '../../mixins/sizeable'; // Utilities
-
+import Sizeable from '../../mixins/sizeable';
+// Utilities
 import { breaking } from '../../util/console';
+import { getSlot } from '../../util/helpers';
 /* @kdujs/component */
-
 export default mixins(Colorable, Sizeable, Routable, Themeable, GroupableFactory('chipGroup'), ToggleableFactory('inputValue')).extend({
   name: 'k-chip',
   props: {
@@ -24,12 +24,10 @@ export default mixins(Colorable, Sizeable, Routable, Themeable, GroupableFactory
     },
     activeClass: {
       type: String,
-
       default() {
         if (!this.chipGroup) return '';
         return this.chipGroup.activeClass;
       }
-
     },
     close: Boolean,
     closeIcon: {
@@ -80,35 +78,27 @@ export default mixins(Colorable, Sizeable, Routable, Themeable, GroupableFactory
         ...this.groupClasses
       };
     },
-
     hasClose() {
       return Boolean(this.close);
     },
-
     isClickable() {
       return Boolean(Routable.options.computed.isClickable.call(this) || this.chipGroup);
     }
-
   },
-
   created() {
     const breakingProps = [['outline', 'outlined'], ['selected', 'input-value'], ['value', 'active'], ['@input', '@active.sync']];
     /* istanbul ignore next */
-
     breakingProps.forEach(([original, replacement]) => {
       if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this);
     });
   },
-
   methods: {
     click(e) {
       this.$emit('click', e);
       this.chipGroup && this.toggle();
     },
-
     genFilter() {
       const children = [];
-
       if (this.isActive) {
         children.push(this.$createElement(KIcon, {
           staticClass: 'k-chip__filter',
@@ -117,10 +107,8 @@ export default mixins(Colorable, Sizeable, Routable, Themeable, GroupableFactory
           }
         }, this.filterIcon));
       }
-
       return this.$createElement(KExpandXTransition, children);
     },
-
     genClose() {
       return this.$createElement(KIcon, {
         staticClass: 'k-chip__close',
@@ -141,22 +129,20 @@ export default mixins(Colorable, Sizeable, Routable, Themeable, GroupableFactory
         }
       }, this.closeIcon);
     },
-
     genContent() {
       return this.$createElement('span', {
         staticClass: 'k-chip__content'
-      }, [this.filter && this.genFilter(), this.$slots.default, this.hasClose && this.genClose()]);
+      }, [this.filter && this.genFilter(), getSlot(this), this.hasClose && this.genClose()]);
     }
-
   },
-
   render(h) {
     const children = [this.genContent()];
     let {
       tag,
       data
     } = this.generateRouteLink();
-    data.attrs = { ...data.attrs,
+    data.attrs = {
+      ...data.attrs,
       draggable: this.draggable ? 'true' : undefined,
       tabindex: this.chipGroup && !this.disabled ? 0 : data.attrs.tabindex
     };
@@ -168,6 +154,5 @@ export default mixins(Colorable, Sizeable, Routable, Themeable, GroupableFactory
     const color = this.textColor || this.outlined && this.color;
     return h(tag, this.setTextColor(color, data), children);
   }
-
 });
 //# sourceMappingURL=KChip.js.map

package/lib/components/KChip/KChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/KChip/KChip.ts"],"names":[],"mappings":"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","sourcesContent":["// Styles\nimport './KChip.sass'\n\n// Types\nimport { KNode } from 'kdu'\nimport mixins from '../../util/mixins'\n\n// Components\nimport { KExpandXTransition } from '../transitions'\nimport KIcon from '../KIcon'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport { factory as GroupableFactory } from '../../mixins/groupable'\nimport Themeable from '../../mixins/themeable'\nimport { factory as ToggleableFactory } from '../../mixins/toggleable'\nimport Routable from '../../mixins/routable'\nimport Sizeable from '../../mixins/sizeable'\n\n// Utilities\nimport { breaking } from '../../util/console'\n\n// Types\nimport { PropValidator, PropType } from 'kdu/types/options'\n\n/* @kdujs/component */\nexport default mixins(\n  Colorable,\n  Sizeable,\n  Routable,\n  Themeable,\n  GroupableFactory('chipGroup'),\n  ToggleableFactory('inputValue')\n).extend({\n  name: 'k-chip',\n\n  props: {\n    active: {\n      type: Boolean,\n      default: true,\n    },\n    activeClass: {\n      type: String,\n      default (): string | undefined {\n        if (!this.chipGroup) return ''\n\n        return this.chipGroup.activeClass\n      },\n    } as any as PropValidator<string>,\n    close: Boolean,\n    closeIcon: {\n      type: String,\n      default: '$delete',\n    },\n    closeLabel: {\n      type: String,\n      default: '$kdutify.close',\n    },\n    disabled: Boolean,\n    draggable: Boolean,\n    filter: Boolean,\n    filterIcon: {\n      type: String,\n      default: '$complete',\n    },\n    label: Boolean,\n    link: Boolean,\n    outlined: Boolean,\n    pill: Boolean,\n    tag: {\n      type: String,\n      default: 'span',\n    },\n    textColor: String,\n    value: null as any as PropType<any>,\n  },\n\n  data: () => ({\n    proxyClass: 'k-chip--active',\n  }),\n\n  computed: {\n    classes (): object {\n      return {\n        'k-chip': true,\n        ...Routable.options.computed.classes.call(this),\n        'k-chip--clickable': this.isClickable,\n        'k-chip--disabled': this.disabled,\n        'k-chip--draggable': this.draggable,\n        'k-chip--label': this.label,\n        'k-chip--link': this.isLink,\n        'k-chip--no-color': !this.color,\n        'k-chip--outlined': this.outlined,\n        'k-chip--pill': this.pill,\n        'k-chip--removable': this.hasClose,\n        ...this.themeClasses,\n        ...this.sizeableClasses,\n        ...this.groupClasses,\n      }\n    },\n    hasClose (): boolean {\n      return Boolean(this.close)\n    },\n    isClickable (): boolean {\n      return Boolean(\n        Routable.options.computed.isClickable.call(this) ||\n        this.chipGroup\n      )\n    },\n  },\n\n  created () {\n    const breakingProps = [\n      ['outline', 'outlined'],\n      ['selected', 'input-value'],\n      ['value', 'active'],\n      ['@input', '@active.sync'],\n    ]\n\n    /* istanbul ignore next */\n    breakingProps.forEach(([original, replacement]) => {\n      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)\n    })\n  },\n\n  methods: {\n    click (e: MouseEvent): void {\n      this.$emit('click', e)\n\n      this.chipGroup && this.toggle()\n    },\n    genFilter (): KNode {\n      const children = []\n\n      if (this.isActive) {\n        children.push(\n          this.$createElement(KIcon, {\n            staticClass: 'k-chip__filter',\n            props: { left: true },\n          }, this.filterIcon)\n        )\n      }\n\n      return this.$createElement(KExpandXTransition, children)\n    },\n    genClose (): KNode {\n      return this.$createElement(KIcon, {\n        staticClass: 'k-chip__close',\n        props: {\n          right: true,\n          size: 18,\n        },\n        attrs: {\n          'aria-label': this.$kdutify.lang.t(this.closeLabel),\n        },\n        on: {\n          click: (e: Event) => {\n            e.stopPropagation()\n            e.preventDefault()\n\n            this.$emit('click:close')\n            this.$emit('update:active', false)\n          },\n        },\n      }, this.closeIcon)\n    },\n    genContent (): KNode {\n      return this.$createElement('span', {\n        staticClass: 'k-chip__content',\n      }, [\n        this.filter && this.genFilter(),\n        this.$slots.default,\n        this.hasClose && this.genClose(),\n      ])\n    },\n  },\n\n  render (h): KNode {\n    const children = [this.genContent()]\n    let { tag, data } = this.generateRouteLink()\n\n    data.attrs = {\n      ...data.attrs,\n      draggable: this.draggable ? 'true' : undefined,\n      tabindex: this.chipGroup && !this.disabled ? 0 : data.attrs!.tabindex,\n    }\n    data.directives!.push({\n      name: 'show',\n      value: this.active,\n    })\n    data = this.setBackgroundColor(this.color, data)\n\n    const color = this.textColor || (this.outlined && this.color)\n\n    return h(tag, this.setTextColor(color, data), children)\n  },\n})\n"],"sourceRoot":"","file":"KChip.js"}
+{"version":3,"sources":["../../../src/components/KChip/KChip.ts"],"names":[],"mappings":"AAAA;AACA,OAAO,gDAAc;AAIrB,OAAO,MAAM,MAAM,mBAAmB;AAEtC;AACA,SAAS,kBAAkB,QAAQ,gBAAgB;AACnD,OAAO,KAAK,MAAM,UAAU;AAE5B;AACA,OAAO,SAAS,MAAM,wBAAwB;AAC9C,SAAS,OAAO,IAAI,gBAAgB,QAAQ,wBAAwB;AACpE,OAAO,SAAS,MAAM,wBAAwB;AAC9C,SAAS,OAAO,IAAI,iBAAiB,QAAQ,yBAAyB;AACtE,OAAO,QAAQ,MAAM,uBAAuB;AAC5C,OAAO,QAAQ,MAAM,uBAAuB;AAE5C;AACA,SAAS,QAAQ,QAAQ,oBAAoB;AAC7C,SAAS,OAAO,QAAQ,oBAAoB;AAK5C;AACA,eAAe,MAAM,CACnB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,gBAAgB,CAAC,WAAW,CAAC,EAC7B,iBAAiB,CAAC,YAAY,CAAC,CAChC,CAAC,MAAM,CAAC;EACP,IAAI,EAAE,QAAQ;EAEd,KAAK,EAAE;IACL,MAAM,EAAE;MACN,IAAI,EAAE,OAAO;MACb,OAAO,EAAE;KACV;IACD,WAAW,EAAE;MACX,IAAI,EAAE,MAAM;MACZ,OAAO,CAAA,EAAA;QACL,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE;QAE9B,OAAO,IAAI,CAAC,SAAS,CAAC,WAAW;MACnC;KAC+B;IACjC,KAAK,EAAE,OAAO;IACd,SAAS,EAAE;MACT,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE;KACV;IACD,UAAU,EAAE;MACV,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE;KACV;IACD,QAAQ,EAAE,OAAO;IACjB,SAAS,EAAE,OAAO;IAClB,MAAM,EAAE,OAAO;IACf,UAAU,EAAE;MACV,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE;KACV;IACD,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,OAAO;IACjB,IAAI,EAAE,OAAO;IACb,GAAG,EAAE;MACH,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE;KACV;IACD,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE;GACR;EAED,IAAI,EAAE,CAAA,MAAO;IACX,UAAU,EAAE;GACb,CAAC;EAEF,QAAQ,EAAE;IACR,OAAO,CAAA,EAAA;MACL,OAAO;QACL,QAAQ,EAAE,IAAI;QACd,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;QAC/C,mBAAmB,EAAE,IAAI,CAAC,WAAW;QACrC,kBAAkB,EAAE,IAAI,CAAC,QAAQ;QACjC,mBAAmB,EAAE,IAAI,CAAC,SAAS;QACnC,eAAe,EAAE,IAAI,CAAC,KAAK;QAC3B,cAAc,EAAE,IAAI,CAAC,MAAM;QAC3B,kBAAkB,EAAE,CAAC,IAAI,CAAC,KAAK;QAC/B,kBAAkB,EAAE,IAAI,CAAC,QAAQ;QACjC,cAAc,EAAE,IAAI,CAAC,IAAI;QACzB,mBAAmB,EAAE,IAAI,CAAC,QAAQ;QAClC,GAAG,IAAI,CAAC,YAAY;QACpB,GAAG,IAAI,CAAC,eAAe;QACvB,GAAG,IAAI,CAAC;OACT;IACH,CAAC;IACD,QAAQ,CAAA,EAAA;MACN,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;IAC5B,CAAC;IACD,WAAW,CAAA,EAAA;MACT,OAAO,OAAO,CACZ,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAChD,IAAI,CAAC,SAAS,CACf;IACH;GACD;EAED,OAAO,CAAA,EAAA;IACL,MAAM,aAAa,GAAG,CACpB,CAAC,SAAS,EAAE,UAAU,CAAC,EACvB,CAAC,UAAU,EAAE,aAAa,CAAC,EAC3B,CAAC,OAAO,EAAE,QAAQ,CAAC,EACnB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAC3B;IAED;IACA,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,WAAW,CAAC,KAAI;MAChD,IAAI,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC;IACjF,CAAC,CAAC;EACJ,CAAC;EAED,OAAO,EAAE;IACP,KAAK,CAAE,CAAa,EAAA;MAClB,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;MAEtB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,CAAA,CAAE;IACjC,CAAC;IACD,SAAS,CAAA,EAAA;MACP,MAAM,QAAQ,GAAG,EAAE;MAEnB,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,QAAQ,CAAC,IAAI,CACX,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;UACzB,WAAW,EAAE,gBAAgB;UAC7B,KAAK,EAAE;YAAE,IAAI,EAAE;UAAI;SACpB,EAAE,IAAI,CAAC,UAAU,CAAC,CACpB;MACF;MAED,OAAO,IAAI,CAAC,cAAc,CAAC,kBAAkB,EAAE,QAAQ,CAAC;IAC1D,CAAC;IACD,QAAQ,CAAA,EAAA;MACN,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;QAChC,WAAW,EAAE,eAAe;QAC5B,KAAK,EAAE;UACL,KAAK,EAAE,IAAI;UACX,IAAI,EAAE;SACP;QACD,KAAK,EAAE;UACL,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;SACnD;QACD,EAAE,EAAE;UACF,KAAK,EAAG,CAAQ,IAAI;YAClB,CAAC,CAAC,eAAe,CAAA,CAAE;YACnB,CAAC,CAAC,cAAc,CAAA,CAAE;YAElB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;YACzB,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,CAAC;UACpC;QACD;OACF,EAAE,IAAI,CAAC,SAAS,CAAC;IACpB,CAAC;IACD,UAAU,CAAA,EAAA;MACR,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;QACjC,WAAW,EAAE;OACd,EAAE,CACD,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAA,CAAE,EAC/B,OAAO,CAAC,IAAI,CAAC,EACb,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAA,CAAE,CACjC,CAAC;IACJ;GACD;EAED,MAAM,CAAE,CAAC,EAAA;IACP,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,UAAU,CAAA,CAAE,CAAC;IACpC,IAAI;MAAE,GAAG;MAAE;IAAI,CAAE,GAAG,IAAI,CAAC,iBAAiB,CAAA,CAAE;IAE5C,IAAI,CAAC,KAAK,GAAG;MACX,GAAG,IAAI,CAAC,KAAK;MACb,SAAS,EAAE,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,SAAS;MAC9C,QAAQ,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,KAAM,CAAC;KAC9D;IACD,IAAI,CAAC,UAAW,CAAC,IAAI,CAAC;MACpB,IAAI,EAAE,MAAM;MACZ,KAAK,EAAE,IAAI,CAAC;KACb,CAAC;IACF,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC;IAEhD,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,IAAK,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAM;IAE7D,OAAO,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;EACzD;CACD,CAAC","sourcesContent":["// Styles\nimport './KChip.sass'\n\n// Types\nimport { KNode } from 'kdu'\nimport mixins from '../../util/mixins'\n\n// Components\nimport { KExpandXTransition } from '../transitions'\nimport KIcon from '../KIcon'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport { factory as GroupableFactory } from '../../mixins/groupable'\nimport Themeable from '../../mixins/themeable'\nimport { factory as ToggleableFactory } from '../../mixins/toggleable'\nimport Routable from '../../mixins/routable'\nimport Sizeable from '../../mixins/sizeable'\n\n// Utilities\nimport { breaking } from '../../util/console'\nimport { getSlot } from '../../util/helpers'\n\n// Types\nimport { PropValidator, PropType } from 'kdu/types/options'\n\n/* @kdujs/component */\nexport default mixins(\n  Colorable,\n  Sizeable,\n  Routable,\n  Themeable,\n  GroupableFactory('chipGroup'),\n  ToggleableFactory('inputValue')\n).extend({\n  name: 'k-chip',\n\n  props: {\n    active: {\n      type: Boolean,\n      default: true,\n    },\n    activeClass: {\n      type: String,\n      default (): string | undefined {\n        if (!this.chipGroup) return ''\n\n        return this.chipGroup.activeClass\n      },\n    } as any as PropValidator<string>,\n    close: Boolean,\n    closeIcon: {\n      type: String,\n      default: '$delete',\n    },\n    closeLabel: {\n      type: String,\n      default: '$kdutify.close',\n    },\n    disabled: Boolean,\n    draggable: Boolean,\n    filter: Boolean,\n    filterIcon: {\n      type: String,\n      default: '$complete',\n    },\n    label: Boolean,\n    link: Boolean,\n    outlined: Boolean,\n    pill: Boolean,\n    tag: {\n      type: String,\n      default: 'span',\n    },\n    textColor: String,\n    value: null as any as PropType<any>,\n  },\n\n  data: () => ({\n    proxyClass: 'k-chip--active',\n  }),\n\n  computed: {\n    classes (): object {\n      return {\n        'k-chip': true,\n        ...Routable.options.computed.classes.call(this),\n        'k-chip--clickable': this.isClickable,\n        'k-chip--disabled': this.disabled,\n        'k-chip--draggable': this.draggable,\n        'k-chip--label': this.label,\n        'k-chip--link': this.isLink,\n        'k-chip--no-color': !this.color,\n        'k-chip--outlined': this.outlined,\n        'k-chip--pill': this.pill,\n        'k-chip--removable': this.hasClose,\n        ...this.themeClasses,\n        ...this.sizeableClasses,\n        ...this.groupClasses,\n      }\n    },\n    hasClose (): boolean {\n      return Boolean(this.close)\n    },\n    isClickable (): boolean {\n      return Boolean(\n        Routable.options.computed.isClickable.call(this) ||\n        this.chipGroup\n      )\n    },\n  },\n\n  created () {\n    const breakingProps = [\n      ['outline', 'outlined'],\n      ['selected', 'input-value'],\n      ['value', 'active'],\n      ['@input', '@active.sync'],\n    ]\n\n    /* istanbul ignore next */\n    breakingProps.forEach(([original, replacement]) => {\n      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)\n    })\n  },\n\n  methods: {\n    click (e: MouseEvent): void {\n      this.$emit('click', e)\n\n      this.chipGroup && this.toggle()\n    },\n    genFilter (): KNode {\n      const children = []\n\n      if (this.isActive) {\n        children.push(\n          this.$createElement(KIcon, {\n            staticClass: 'k-chip__filter',\n            props: { left: true },\n          }, this.filterIcon)\n        )\n      }\n\n      return this.$createElement(KExpandXTransition, children)\n    },\n    genClose (): KNode {\n      return this.$createElement(KIcon, {\n        staticClass: 'k-chip__close',\n        props: {\n          right: true,\n          size: 18,\n        },\n        attrs: {\n          'aria-label': this.$kdutify.lang.t(this.closeLabel),\n        },\n        on: {\n          click: (e: Event) => {\n            e.stopPropagation()\n            e.preventDefault()\n\n            this.$emit('click:close')\n            this.$emit('update:active', false)\n          },\n        },\n      }, this.closeIcon)\n    },\n    genContent (): KNode {\n      return this.$createElement('span', {\n        staticClass: 'k-chip__content',\n      }, [\n        this.filter && this.genFilter(),\n        getSlot(this),\n        this.hasClose && this.genClose(),\n      ])\n    },\n  },\n\n  render (h): KNode {\n    const children = [this.genContent()]\n    let { tag, data } = this.generateRouteLink()\n\n    data.attrs = {\n      ...data.attrs,\n      draggable: this.draggable ? 'true' : undefined,\n      tabindex: this.chipGroup && !this.disabled ? 0 : data.attrs!.tabindex,\n    }\n    data.directives!.push({\n      name: 'show',\n      value: this.active,\n    })\n    data = this.setBackgroundColor(this.color, data)\n\n    const color = this.textColor || (this.outlined && this.color)\n\n    return h(tag, this.setTextColor(color, data), children)\n  },\n})\n"],"sourceRoot":"","file":"KChip.js"}

package/lib/components/KChip/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/KChip/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAP,MAAkB,SAAlB;AAEA,SAAS,KAAT;AACA,eAAe,KAAf","sourcesContent":["import KChip from './KChip'\n\nexport { KChip }\nexport default KChip\n"],"sourceRoot":"","file":"index.js"}
+{"version":3,"sources":["../../../src/components/KChip/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,SAAS;AAE3B,SAAS,KAAK;AACd,eAAe,KAAK","sourcesContent":["import KChip from './KChip'\n\nexport { KChip }\nexport default KChip\n"],"sourceRoot":"","file":"index.js"}

package/lib/components/KChipGroup/KChipGroup.js

@@ -1,47 +1,43 @@
 // Styles
-import "..\\..\\..\\src\\components\\KChipGroup\\KChipGroup.sass"; // Extensions
-
-import { BaseSlideGroup } from '../KSlideGroup/KSlideGroup'; // Mixins
-
-import Colorable from '../../mixins/colorable'; // Utilities
-
+import "..\\..\\..\\src\\components\\KChipGroup\\KChipGroup.sass";
+// Extensions
+import { BaseSlideGroup } from '../KSlideGroup/KSlideGroup';
+// Mixins
+import Colorable from '../../mixins/colorable';
+// Utilities
 import mixins from '../../util/mixins';
 /* @kdujs/component */
-
 export default mixins(BaseSlideGroup, Colorable).extend({
   name: 'k-chip-group',
-
   provide() {
     return {
       chipGroup: this
     };
   },
-
   props: {
     column: Boolean
   },
   computed: {
     classes() {
-      return { ...BaseSlideGroup.options.computed.classes.call(this),
+      return {
+        ...BaseSlideGroup.options.computed.classes.call(this),
         'k-chip-group': true,
         'k-chip-group--column': this.column
       };
     }
-
   },
   watch: {
     column(val) {
       if (val) this.scrollOffset = 0;
       this.$nextTick(this.onResize);
     }
-
   },
   methods: {
     genData() {
-      return this.setTextColor(this.color, { ...BaseSlideGroup.options.methods.genData.call(this)
+      return this.setTextColor(this.color, {
+        ...BaseSlideGroup.options.methods.genData.call(this)
       });
     }
-
   }
 });
 //# sourceMappingURL=KChipGroup.js.map

package/lib/components/KChipGroup/KChipGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/KChipGroup/KChipGroup.ts"],"names":[],"mappings":"AAAA;AACA,OAAO,0DAAP,C,CAEA;;AACA,SAAS,cAAT,QAA+B,4BAA/B,C,CAEA;;AACA,OAAO,SAAP,MAAsB,wBAAtB,C,CAEA;;AACA,OAAO,MAAP,MAAmB,mBAAnB;AAEA;;AACA,eAAe,MAAM,CACnB,cADmB,EAEnB,SAFmB,CAAN,CAGb,MAHa,CAGN;AACP,EAAA,IAAI,EAAE,cADC;;AAGP,EAAA,OAAO,GAAA;AACL,WAAO;AACL,MAAA,SAAS,EAAE;AADN,KAAP;AAGD,GAPM;;AASP,EAAA,KAAK,EAAE;AACL,IAAA,MAAM,EAAE;AADH,GATA;AAaP,EAAA,QAAQ,EAAE;AACR,IAAA,OAAO,GAAA;AACL,aAAO,EACL,GAAG,cAAc,CAAC,OAAf,CAAuB,QAAvB,CAAgC,OAAhC,CAAwC,IAAxC,CAA6C,IAA7C,CADE;AAEL,wBAAgB,IAFX;AAGL,gCAAwB,KAAK;AAHxB,OAAP;AAKD;;AAPO,GAbH;AAuBP,EAAA,KAAK,EAAE;AACL,IAAA,MAAM,CAAE,GAAF,EAAK;AACT,UAAI,GAAJ,EAAS,KAAK,YAAL,GAAoB,CAApB;AAET,WAAK,SAAL,CAAe,KAAK,QAApB;AACD;;AALI,GAvBA;AA+BP,EAAA,OAAO,EAAE;AACP,IAAA,OAAO,GAAA;AACL,aAAO,KAAK,YAAL,CAAkB,KAAK,KAAvB,EAA8B,EACnC,GAAG,cAAc,CAAC,OAAf,CAAuB,OAAvB,CAA+B,OAA/B,CAAuC,IAAvC,CAA4C,IAA5C;AADgC,OAA9B,CAAP;AAGD;;AALM;AA/BF,CAHM,CAAf","sourcesContent":["// Styles\nimport './KChipGroup.sass'\n\n// Extensions\nimport { BaseSlideGroup } from '../KSlideGroup/KSlideGroup'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\n\n// Utilities\nimport mixins from '../../util/mixins'\n\n/* @kdujs/component */\nexport default mixins(\n  BaseSlideGroup,\n  Colorable\n).extend({\n  name: 'k-chip-group',\n\n  provide () {\n    return {\n      chipGroup: this,\n    }\n  },\n\n  props: {\n    column: Boolean,\n  },\n\n  computed: {\n    classes () {\n      return {\n        ...BaseSlideGroup.options.computed.classes.call(this),\n        'k-chip-group': true,\n        'k-chip-group--column': this.column,\n      }\n    },\n  },\n\n  watch: {\n    column (val) {\n      if (val) this.scrollOffset = 0\n\n      this.$nextTick(this.onResize)\n    },\n  },\n\n  methods: {\n    genData () {\n      return this.setTextColor(this.color, {\n        ...BaseSlideGroup.options.methods.genData.call(this),\n      })\n    },\n  },\n})\n"],"sourceRoot":"","file":"KChipGroup.js"}
+{"version":3,"sources":["../../../src/components/KChipGroup/KChipGroup.ts"],"names":[],"mappings":"AAAA;AACA,OAAO,0DAAmB;AAE1B;AACA,SAAS,cAAc,QAAQ,4BAA4B;AAE3D;AACA,OAAO,SAAS,MAAM,wBAAwB;AAE9C;AACA,OAAO,MAAM,MAAM,mBAAmB;AAEtC;AACA,eAAe,MAAM,CACnB,cAAc,EACd,SAAS,CACV,CAAC,MAAM,CAAC;EACP,IAAI,EAAE,cAAc;EAEpB,OAAO,CAAA,EAAA;IACL,OAAO;MACL,SAAS,EAAE;KACZ;EACH,CAAC;EAED,KAAK,EAAE;IACL,MAAM,EAAE;GACT;EAED,QAAQ,EAAE;IACR,OAAO,CAAA,EAAA;MACL,OAAO;QACL,GAAG,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;QACrD,cAAc,EAAE,IAAI;QACpB,sBAAsB,EAAE,IAAI,CAAC;OAC9B;IACH;GACD;EAED,KAAK,EAAE;IACL,MAAM,CAAE,GAAG,EAAA;MACT,IAAI,GAAG,EAAE,IAAI,CAAC,YAAY,GAAG,CAAC;MAE9B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B;GACD;EAED,OAAO,EAAE;IACP,OAAO,CAAA,EAAA;MACL,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE;QACnC,GAAG,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;OACpD,CAAC;IACJ;EACD;CACF,CAAC","sourcesContent":["// Styles\nimport './KChipGroup.sass'\n\n// Extensions\nimport { BaseSlideGroup } from '../KSlideGroup/KSlideGroup'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\n\n// Utilities\nimport mixins from '../../util/mixins'\n\n/* @kdujs/component */\nexport default mixins(\n  BaseSlideGroup,\n  Colorable\n).extend({\n  name: 'k-chip-group',\n\n  provide () {\n    return {\n      chipGroup: this,\n    }\n  },\n\n  props: {\n    column: Boolean,\n  },\n\n  computed: {\n    classes () {\n      return {\n        ...BaseSlideGroup.options.computed.classes.call(this),\n        'k-chip-group': true,\n        'k-chip-group--column': this.column,\n      }\n    },\n  },\n\n  watch: {\n    column (val) {\n      if (val) this.scrollOffset = 0\n\n      this.$nextTick(this.onResize)\n    },\n  },\n\n  methods: {\n    genData () {\n      return this.setTextColor(this.color, {\n        ...BaseSlideGroup.options.methods.genData.call(this),\n      })\n    },\n  },\n})\n"],"sourceRoot":"","file":"KChipGroup.js"}

package/lib/components/KChipGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/KChipGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAP,MAAuB,cAAvB;AAEA,SAAS,UAAT;AACA,eAAe,UAAf","sourcesContent":["import KChipGroup from './KChipGroup'\n\nexport { KChipGroup }\nexport default KChipGroup\n"],"sourceRoot":"","file":"index.js"}
+{"version":3,"sources":["../../../src/components/KChipGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc;AAErC,SAAS,UAAU;AACnB,eAAe,UAAU","sourcesContent":["import KChipGroup from './KChipGroup'\n\nexport { KChipGroup }\nexport default KChipGroup\n"],"sourceRoot":"","file":"index.js"}

package/lib/components/KColorPicker/KColorPicker.js

@@ -1,16 +1,16 @@
 // Styles
-import "..\\..\\..\\src\\components\\KColorPicker\\KColorPicker.sass"; // Components
-
+import "..\\..\\..\\src\\components\\KColorPicker\\KColorPicker.sass";
+// Components
 import KSheet from '../KSheet/KSheet';
 import KColorPickerPreview from './KColorPickerPreview';
 import KColorPickerCanvas from './KColorPickerCanvas';
 import KColorPickerEdit, { modes } from './KColorPickerEdit';
-import KColorPickerSwatches from './KColorPickerSwatches'; // Helpers
-
+import KColorPickerSwatches from './KColorPickerSwatches';
+// Helpers
 import { parseColor, fromRGBA, extractColor, hasAlpha } from './util';
 import mixins from '../../util/mixins';
-import { deepEqual } from '../../util/helpers'; // Mixins
-
+import { deepEqual } from '../../util/helpers';
+// Mixins
 import Elevatable from '../../mixins/elevatable';
 import Themeable from '../../mixins/themeable';
 export default mixins(Elevatable, Themeable).extend({
@@ -62,14 +62,12 @@ export default mixins(Elevatable, Themeable).extend({
       if (!this.value) return false;
       return !hasAlpha(this.value);
     }
-
   },
   watch: {
     value: {
       handler(color) {
         this.updateColor(parseColor(color, this.internalValue));
       },
-
       immediate: true
     }
   },
@@ -77,13 +75,11 @@ export default mixins(Elevatable, Themeable).extend({
     updateColor(color) {
       this.internalValue = color;
       const value = extractColor(this.internalValue, this.value);
-
       if (!deepEqual(value, this.value)) {
         this.$emit('input', value);
         this.$emit('update:color', this.internalValue);
       }
     },
-
     genCanvas() {
       return this.$createElement(KColorPickerCanvas, {
         props: {
@@ -98,13 +94,11 @@ export default mixins(Elevatable, Themeable).extend({
         }
       });
     },
-
     genControls() {
       return this.$createElement('div', {
         staticClass: 'k-color-picker__controls'
       }, [!this.hideSliders && this.genPreview(), !this.hideInputs && this.genEdit()]);
     },
-
     genEdit() {
       return this.$createElement(KColorPickerEdit, {
         props: {
@@ -120,7 +114,6 @@ export default mixins(Elevatable, Themeable).extend({
         }
       });
     },
-
     genPreview() {
       return this.$createElement(KColorPickerPreview, {
         props: {
@@ -133,7 +126,6 @@ export default mixins(Elevatable, Themeable).extend({
         }
       });
     },
-
     genSwatches() {
       return this.$createElement(KColorPickerSwatches, {
         props: {
@@ -149,9 +141,7 @@ export default mixins(Elevatable, Themeable).extend({
         }
       });
     }
-
   },
-
   render(h) {
     return h(KSheet, {
       staticClass: 'k-color-picker',
@@ -165,6 +155,5 @@ export default mixins(Elevatable, Themeable).extend({
       }
     }, [!this.hideCanvas && this.genCanvas(), (!this.hideSliders || !this.hideInputs) && this.genControls(), this.showSwatches && this.genSwatches()]);
   }
-
 });
 //# sourceMappingURL=KColorPicker.js.map

package/lib/components/KColorPicker/KColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/KColorPicker/KColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["// Styles\nimport './KColorPicker.sass'\n\n// Components\nimport KSheet from '../KSheet/KSheet'\nimport KColorPickerPreview from './KColorPickerPreview'\nimport KColorPickerCanvas from './KColorPickerCanvas'\nimport KColorPickerEdit, { Mode, modes } from './KColorPickerEdit'\nimport KColorPickerSwatches from './KColorPickerSwatches'\n\n// Helpers\nimport { KColorPickerColor, parseColor, fromRGBA, extractColor, hasAlpha } from './util'\nimport mixins from '../../util/mixins'\nimport { deepEqual } from '../../util/helpers'\n\n// Mixins\nimport Elevatable from '../../mixins/elevatable'\nimport Themeable from '../../mixins/themeable'\n\n// Types\nimport { KNode, PropType } from 'kdu'\n\nexport default mixins(Elevatable, Themeable).extend({\n  name: 'k-color-picker',\n\n  props: {\n    canvasHeight: {\n      type: [String, Number],\n      default: 150,\n    },\n    disabled: Boolean,\n    dotSize: {\n      type: [Number, String],\n      default: 10,\n    },\n    flat: Boolean,\n    hideCanvas: Boolean,\n    hideSliders: Boolean,\n    hideInputs: Boolean,\n    hideModeSwitch: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n    showSwatches: Boolean,\n    swatches: Array as PropType<string[][]>,\n    swatchesMaxHeight: {\n      type: [Number, String],\n      default: 150,\n    },\n    value: {\n      type: [Object, String],\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n  },\n\n  data: () => ({\n    internalValue: fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),\n  }),\n\n  computed: {\n    hideAlpha (): boolean {\n      if (!this.value) return false\n\n      return !hasAlpha(this.value)\n    },\n  },\n\n  watch: {\n    value: {\n      handler (color: any) {\n        this.updateColor(parseColor(color, this.internalValue))\n      },\n      immediate: true,\n    },\n  },\n\n  methods: {\n    updateColor (color: KColorPickerColor) {\n      this.internalValue = color\n      const value = extractColor(this.internalValue, this.value)\n\n      if (!deepEqual(value, this.value)) {\n        this.$emit('input', value)\n        this.$emit('update:color', this.internalValue)\n      }\n    },\n    genCanvas (): KNode {\n      return this.$createElement(KColorPickerCanvas, {\n        props: {\n          color: this.internalValue,\n          disabled: this.disabled,\n          dotSize: this.dotSize,\n          width: this.width,\n          height: this.canvasHeight,\n        },\n        on: {\n          'update:color': this.updateColor,\n        },\n      })\n    },\n    genControls (): KNode {\n      return this.$createElement('div', {\n        staticClass: 'k-color-picker__controls',\n      }, [\n        !this.hideSliders && this.genPreview(),\n        !this.hideInputs && this.genEdit(),\n      ])\n    },\n    genEdit (): KNode {\n      return this.$createElement(KColorPickerEdit, {\n        props: {\n          color: this.internalValue,\n          disabled: this.disabled,\n          hideAlpha: this.hideAlpha,\n          hideModeSwitch: this.hideModeSwitch,\n          mode: this.mode,\n        },\n        on: {\n          'update:color': this.updateColor,\n          'update:mode': (v: Mode) => this.$emit('update:mode', v),\n        },\n      })\n    },\n    genPreview (): KNode {\n      return this.$createElement(KColorPickerPreview, {\n        props: {\n          color: this.internalValue,\n          disabled: this.disabled,\n          hideAlpha: this.hideAlpha,\n        },\n        on: {\n          'update:color': this.updateColor,\n        },\n      })\n    },\n    genSwatches (): KNode {\n      return this.$createElement(KColorPickerSwatches, {\n        props: {\n          dark: this.dark,\n          light: this.light,\n          disabled: this.disabled,\n          swatches: this.swatches,\n          color: this.internalValue,\n          maxHeight: this.swatchesMaxHeight,\n        },\n        on: {\n          'update:color': this.updateColor,\n        },\n      })\n    },\n  },\n\n  render (h): KNode {\n    return h(KSheet, {\n      staticClass: 'k-color-picker',\n      class: {\n        'k-color-picker--flat': this.flat,\n        ...this.themeClasses,\n        ...this.elevationClasses,\n      },\n      props: {\n        maxWidth: this.width,\n      },\n    }, [\n      !this.hideCanvas && this.genCanvas(),\n      (!this.hideSliders || !this.hideInputs) && this.genControls(),\n      this.showSwatches && this.genSwatches(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"KColorPicker.js"}
+{"version":3,"sources":["../../../src/components/KColorPicker/KColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["// Styles\nimport './KColorPicker.sass'\n\n// Components\nimport KSheet from '../KSheet/KSheet'\nimport KColorPickerPreview from './KColorPickerPreview'\nimport KColorPickerCanvas from './KColorPickerCanvas'\nimport KColorPickerEdit, { Mode, modes } from './KColorPickerEdit'\nimport KColorPickerSwatches from './KColorPickerSwatches'\n\n// Helpers\nimport { KColorPickerColor, parseColor, fromRGBA, extractColor, hasAlpha } from './util'\nimport mixins from '../../util/mixins'\nimport { deepEqual } from '../../util/helpers'\n\n// Mixins\nimport Elevatable from '../../mixins/elevatable'\nimport Themeable from '../../mixins/themeable'\n\n// Types\nimport { KNode, PropType } from 'kdu'\n\nexport default mixins(Elevatable, Themeable).extend({\n  name: 'k-color-picker',\n\n  props: {\n    canvasHeight: {\n      type: [String, Number],\n      default: 150,\n    },\n    disabled: Boolean,\n    dotSize: {\n      type: [Number, String],\n      default: 10,\n    },\n    flat: Boolean,\n    hideCanvas: Boolean,\n    hideSliders: Boolean,\n    hideInputs: Boolean,\n    hideModeSwitch: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n    showSwatches: Boolean,\n    swatches: Array as PropType<string[][]>,\n    swatchesMaxHeight: {\n      type: [Number, String],\n      default: 150,\n    },\n    value: {\n      type: [Object, String],\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n  },\n\n  data: () => ({\n    internalValue: fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),\n  }),\n\n  computed: {\n    hideAlpha (): boolean {\n      if (!this.value) return false\n\n      return !hasAlpha(this.value)\n    },\n  },\n\n  watch: {\n    value: {\n      handler (color: any) {\n        this.updateColor(parseColor(color, this.internalValue))\n      },\n      immediate: true,\n    },\n  },\n\n  methods: {\n    updateColor (color: KColorPickerColor) {\n      this.internalValue = color\n      const value = extractColor(this.internalValue, this.value)\n\n      if (!deepEqual(value, this.value)) {\n        this.$emit('input', value)\n        this.$emit('update:color', this.internalValue)\n      }\n    },\n    genCanvas (): KNode {\n      return this.$createElement(KColorPickerCanvas, {\n        props: {\n          color: this.internalValue,\n          disabled: this.disabled,\n          dotSize: this.dotSize,\n          width: this.width,\n          height: this.canvasHeight,\n        },\n        on: {\n          'update:color': this.updateColor,\n        },\n      })\n    },\n    genControls (): KNode {\n      return this.$createElement('div', {\n        staticClass: 'k-color-picker__controls',\n      }, [\n        !this.hideSliders && this.genPreview(),\n        !this.hideInputs && this.genEdit(),\n      ])\n    },\n    genEdit (): KNode {\n      return this.$createElement(KColorPickerEdit, {\n        props: {\n          color: this.internalValue,\n          disabled: this.disabled,\n          hideAlpha: this.hideAlpha,\n          hideModeSwitch: this.hideModeSwitch,\n          mode: this.mode,\n        },\n        on: {\n          'update:color': this.updateColor,\n          'update:mode': (v: Mode) => this.$emit('update:mode', v),\n        },\n      })\n    },\n    genPreview (): KNode {\n      return this.$createElement(KColorPickerPreview, {\n        props: {\n          color: this.internalValue,\n          disabled: this.disabled,\n          hideAlpha: this.hideAlpha,\n        },\n        on: {\n          'update:color': this.updateColor,\n        },\n      })\n    },\n    genSwatches (): KNode {\n      return this.$createElement(KColorPickerSwatches, {\n        props: {\n          dark: this.dark,\n          light: this.light,\n          disabled: this.disabled,\n          swatches: this.swatches,\n          color: this.internalValue,\n          maxHeight: this.swatchesMaxHeight,\n        },\n        on: {\n          'update:color': this.updateColor,\n        },\n      })\n    },\n  },\n\n  render (h): KNode {\n    return h(KSheet, {\n      staticClass: 'k-color-picker',\n      class: {\n        'k-color-picker--flat': this.flat,\n        ...this.themeClasses,\n        ...this.elevationClasses,\n      },\n      props: {\n        maxWidth: this.width,\n      },\n    }, [\n      !this.hideCanvas && this.genCanvas(),\n      (!this.hideSliders || !this.hideInputs) && this.genControls(),\n      this.showSwatches && this.genSwatches(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"KColorPicker.js"}

package/lib/components/KColorPicker/KColorPickerCanvas.js

@@ -1,9 +1,9 @@
 // Styles
-import "..\\..\\..\\src\\components\\KColorPicker\\KColorPickerCanvas.sass"; // Helpers
-
+import "..\\..\\..\\src\\components\\KColorPicker\\KColorPickerCanvas.sass";
+// Helpers
 import { clamp, convertToUnit } from '../../util/helpers';
-import { fromHSVA, fromRGBA } from './util'; // Types
-
+import { fromHSVA, fromRGBA } from './util';
+// Types
 import Kdu from 'kdu';
 export default Kdu.extend({
   name: 'k-color-picker-canvas',
@@ -31,7 +31,6 @@ export default Kdu.extend({
       default: 300
     }
   },
-
   data() {
     return {
       boundingRect: {
@@ -42,7 +41,6 @@ export default Kdu.extend({
       }
     };
   },
-
   computed: {
     dot() {
       if (!this.color) return {
@@ -54,16 +52,13 @@ export default Kdu.extend({
         y: (1 - this.color.hsva.v) * parseInt(this.height, 10)
       };
     }
-
   },
   watch: {
     'color.hue': 'updateCanvas'
   },
-
   mounted() {
     this.updateCanvas();
   },
-
   methods: {
     emitColor(x, y) {
       const {
@@ -79,7 +74,6 @@ export default Kdu.extend({
         a: this.color.alpha
       }));
     },
-
     updateCanvas() {
       if (!this.color) return;
       const canvas = this.$refs.canvas;
@@ -87,25 +81,20 @@ export default Kdu.extend({
       if (!ctx) return;
       const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
       saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)'); // white
-
       saturationGradient.addColorStop(1, `hsla(${this.color.hue}, 100%, 50%, 1)`);
       ctx.fillStyle = saturationGradient;
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
       valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)'); // transparent
-
       valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)'); // black
-
       ctx.fillStyle = valueGradient;
       ctx.fillRect(0, 0, canvas.width, canvas.height);
     },
-
     handleClick(e) {
       if (this.disabled) return;
       this.boundingRect = this.$el.getBoundingClientRect();
       this.emitColor(e.clientX, e.clientY);
     },
-
     handleMouseDown(e) {
       // To prevent selection while moving cursor
       e.preventDefault();
@@ -114,17 +103,14 @@ export default Kdu.extend({
       window.addEventListener('mousemove', this.handleMouseMove);
       window.addEventListener('mouseup', this.handleMouseUp);
     },
-
     handleMouseMove(e) {
       if (this.disabled) return;
       this.emitColor(e.clientX, e.clientY);
     },
-
     handleMouseUp() {
       window.removeEventListener('mousemove', this.handleMouseMove);
       window.removeEventListener('mouseup', this.handleMouseUp);
     },
-
     genCanvas() {
       return this.$createElement('canvas', {
         ref: 'canvas',
@@ -134,7 +120,6 @@ export default Kdu.extend({
         }
       });
     },
-
     genDot() {
       const radius = parseInt(this.dotSize, 10) / 2;
       const x = convertToUnit(this.dot.x - radius);
@@ -151,9 +136,7 @@ export default Kdu.extend({
         }
       });
     }
-
   },
-
   render(h) {
     return h('div', {
       staticClass: 'k-color-picker__canvas',
@@ -167,6 +150,5 @@ export default Kdu.extend({
       }
     }, [this.genCanvas(), this.genDot()]);
   }
-
 });
 //# sourceMappingURL=KColorPickerCanvas.js.map

package/lib/components/KColorPicker/KColorPickerCanvas.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/KColorPicker/KColorPickerCanvas.ts"],"names":[],"mappings":"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","sourcesContent":["// Styles\nimport './KColorPickerCanvas.sass'\n\n// Helpers\nimport { clamp, convertToUnit } from '../../util/helpers'\nimport { fromHSVA, KColorPickerColor, fromRGBA } from './util'\n\n// Types\nimport Kdu, { KNode, PropType } from 'kdu'\n\nexport default Kdu.extend({\n  name: 'k-color-picker-canvas',\n\n  props: {\n    color: {\n      type: Object as PropType<KColorPickerColor>,\n      default: () => fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),\n    },\n    disabled: Boolean,\n    dotSize: {\n      type: [Number, String],\n      default: 10,\n    },\n    height: {\n      type: [Number, String],\n      default: 150,\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n  },\n\n  data () {\n    return {\n      boundingRect: {\n        width: 0,\n        height: 0,\n        left: 0,\n        top: 0,\n      } as ClientRect,\n    }\n  },\n\n  computed: {\n    dot (): { x: number, y: number} {\n      if (!this.color) return { x: 0, y: 0 }\n\n      return {\n        x: this.color.hsva.s * parseInt(this.width, 10),\n        y: (1 - this.color.hsva.v) * parseInt(this.height, 10),\n      }\n    },\n  },\n\n  watch: {\n    'color.hue': 'updateCanvas',\n  },\n\n  mounted () {\n    this.updateCanvas()\n  },\n\n  methods: {\n    emitColor (x: number, y: number) {\n      const { left, top, width, height } = this.boundingRect\n\n      this.$emit('update:color', fromHSVA({\n        h: this.color.hue,\n        s: clamp(x - left, 0, width) / width,\n        v: 1 - clamp(y - top, 0, height) / height,\n        a: this.color.alpha,\n      }))\n    },\n    updateCanvas () {\n      if (!this.color) return\n\n      const canvas = this.$refs.canvas as HTMLCanvasElement\n      const ctx = canvas.getContext('2d')\n\n      if (!ctx) return\n\n      const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)\n      saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)') // white\n      saturationGradient.addColorStop(1, `hsla(${this.color.hue}, 100%, 50%, 1)`)\n      ctx.fillStyle = saturationGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n\n      const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)\n      valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)') // transparent\n      valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)') // black\n      ctx.fillStyle = valueGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n    },\n    handleClick (e: MouseEvent) {\n      if (this.disabled) return\n\n      this.boundingRect = this.$el.getBoundingClientRect()\n      this.emitColor(e.clientX, e.clientY)\n    },\n    handleMouseDown (e: MouseEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (this.disabled) return\n\n      this.boundingRect = this.$el.getBoundingClientRect()\n\n      window.addEventListener('mousemove', this.handleMouseMove)\n      window.addEventListener('mouseup', this.handleMouseUp)\n    },\n    handleMouseMove (e: MouseEvent) {\n      if (this.disabled) return\n\n      this.emitColor(e.clientX, e.clientY)\n    },\n    handleMouseUp () {\n      window.removeEventListener('mousemove', this.handleMouseMove)\n      window.removeEventListener('mouseup', this.handleMouseUp)\n    },\n    genCanvas (): KNode {\n      return this.$createElement('canvas', {\n        ref: 'canvas',\n        attrs: {\n          width: this.width,\n          height: this.height,\n        },\n      })\n    },\n    genDot (): KNode {\n      const radius = parseInt(this.dotSize, 10) / 2\n      const x = convertToUnit(this.dot.x - radius)\n      const y = convertToUnit(this.dot.y - radius)\n\n      return this.$createElement('div', {\n        staticClass: 'k-color-picker__canvas-dot',\n        class: {\n          'k-color-picker__canvas-dot--disabled': this.disabled,\n        },\n        style: {\n          width: convertToUnit(this.dotSize),\n          height: convertToUnit(this.dotSize),\n          transform: `translate(${x}, ${y})`,\n        },\n      })\n    },\n  },\n\n  render (h): KNode {\n    return h('div', {\n      staticClass: 'k-color-picker__canvas',\n      style: {\n        width: convertToUnit(this.width),\n        height: convertToUnit(this.height),\n      },\n      on: {\n        click: this.handleClick,\n        mousedown: this.handleMouseDown,\n      },\n    }, [\n      this.genCanvas(),\n      this.genDot(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"KColorPickerCanvas.js"}
+{"version":3,"sources":["../../../src/components/KColorPicker/KColorPickerCanvas.ts"],"names":[],"mappings":"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","sourcesContent":["// Styles\nimport './KColorPickerCanvas.sass'\n\n// Helpers\nimport { clamp, convertToUnit } from '../../util/helpers'\nimport { fromHSVA, KColorPickerColor, fromRGBA } from './util'\n\n// Types\nimport Kdu, { KNode, PropType } from 'kdu'\n\nexport default Kdu.extend({\n  name: 'k-color-picker-canvas',\n\n  props: {\n    color: {\n      type: Object as PropType<KColorPickerColor>,\n      default: () => fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),\n    },\n    disabled: Boolean,\n    dotSize: {\n      type: [Number, String],\n      default: 10,\n    },\n    height: {\n      type: [Number, String],\n      default: 150,\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n  },\n\n  data () {\n    return {\n      boundingRect: {\n        width: 0,\n        height: 0,\n        left: 0,\n        top: 0,\n      } as ClientRect,\n    }\n  },\n\n  computed: {\n    dot (): { x: number, y: number} {\n      if (!this.color) return { x: 0, y: 0 }\n\n      return {\n        x: this.color.hsva.s * parseInt(this.width, 10),\n        y: (1 - this.color.hsva.v) * parseInt(this.height, 10),\n      }\n    },\n  },\n\n  watch: {\n    'color.hue': 'updateCanvas',\n  },\n\n  mounted () {\n    this.updateCanvas()\n  },\n\n  methods: {\n    emitColor (x: number, y: number) {\n      const { left, top, width, height } = this.boundingRect\n\n      this.$emit('update:color', fromHSVA({\n        h: this.color.hue,\n        s: clamp(x - left, 0, width) / width,\n        v: 1 - clamp(y - top, 0, height) / height,\n        a: this.color.alpha,\n      }))\n    },\n    updateCanvas () {\n      if (!this.color) return\n\n      const canvas = this.$refs.canvas as HTMLCanvasElement\n      const ctx = canvas.getContext('2d')\n\n      if (!ctx) return\n\n      const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)\n      saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)') // white\n      saturationGradient.addColorStop(1, `hsla(${this.color.hue}, 100%, 50%, 1)`)\n      ctx.fillStyle = saturationGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n\n      const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)\n      valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)') // transparent\n      valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)') // black\n      ctx.fillStyle = valueGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n    },\n    handleClick (e: MouseEvent) {\n      if (this.disabled) return\n\n      this.boundingRect = this.$el.getBoundingClientRect()\n      this.emitColor(e.clientX, e.clientY)\n    },\n    handleMouseDown (e: MouseEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (this.disabled) return\n\n      this.boundingRect = this.$el.getBoundingClientRect()\n\n      window.addEventListener('mousemove', this.handleMouseMove)\n      window.addEventListener('mouseup', this.handleMouseUp)\n    },\n    handleMouseMove (e: MouseEvent) {\n      if (this.disabled) return\n\n      this.emitColor(e.clientX, e.clientY)\n    },\n    handleMouseUp () {\n      window.removeEventListener('mousemove', this.handleMouseMove)\n      window.removeEventListener('mouseup', this.handleMouseUp)\n    },\n    genCanvas (): KNode {\n      return this.$createElement('canvas', {\n        ref: 'canvas',\n        attrs: {\n          width: this.width,\n          height: this.height,\n        },\n      })\n    },\n    genDot (): KNode {\n      const radius = parseInt(this.dotSize, 10) / 2\n      const x = convertToUnit(this.dot.x - radius)\n      const y = convertToUnit(this.dot.y - radius)\n\n      return this.$createElement('div', {\n        staticClass: 'k-color-picker__canvas-dot',\n        class: {\n          'k-color-picker__canvas-dot--disabled': this.disabled,\n        },\n        style: {\n          width: convertToUnit(this.dotSize),\n          height: convertToUnit(this.dotSize),\n          transform: `translate(${x}, ${y})`,\n        },\n      })\n    },\n  },\n\n  render (h): KNode {\n    return h('div', {\n      staticClass: 'k-color-picker__canvas',\n      style: {\n        width: convertToUnit(this.width),\n        height: convertToUnit(this.height),\n      },\n      on: {\n        click: this.handleClick,\n        mousedown: this.handleMouseDown,\n      },\n    }, [\n      this.genCanvas(),\n      this.genDot(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"KColorPickerCanvas.js"}