@king-design/vue 2.0.0-beta.0

package/components/colorpicker/index.spec.js

@@ -0,0 +1,312 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/colorpicker/demos/basic';
+import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import tinycolor from 'tinycolor2';
+describe('Colorpicker', function () {
+  var instance;
+  var element;
+  var picker;
+  beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var data, trigger;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            data = mount(BasicDemo);
+            instance = data[0];
+            element = data[1];
+            trigger = element.querySelector('.k-colorpicker-color');
+            trigger.click();
+            _context.next = 7;
+            return wait();
+
+          case 7:
+            picker = getElement('.k-colorpicker-content');
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            unmount();
+            _context2.next = 3;
+            return wait(400);
+
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should select color by saturation', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var saturation, _saturation$getBoundi, left, top;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            expect(picker.innerHTML).to.matchSnapshot();
+            saturation = picker.querySelector('.k-colorpicker-saturation');
+            _saturation$getBoundi = saturation.getBoundingClientRect(), left = _saturation$getBoundi.left, top = _saturation$getBoundi.top;
+            dispatchEvent(saturation, 'mousedown', {
+              pageX: left + window.pageXOffset,
+              pageY: top + window.pageYOffset,
+              which: 1
+            });
+            _context3.next = 6;
+            return wait();
+
+          case 6:
+            expect(picker.innerHTML).to.matchSnapshot();
+            expect(instance.get('color')).to.eql('#ffffff');
+            dispatchEvent(saturation, 'mousemove', {
+              pageX: left + window.pageXOffset + 1,
+              pageY: top + window.pageYOffset + 1
+            });
+            _context3.next = 11;
+            return wait();
+
+          case 11:
+            expect(instance.get('color')).to.eql('#fdfcfc');
+            dispatchEvent(saturation, 'mouseup');
+            _context3.next = 15;
+            return wait();
+
+          case 15:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should change color by hue', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var hue, _hue$getBoundingClien, width, left;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            hue = picker.querySelector('.k-colorpicker-hue .k-slider-track-wrapper');
+            _hue$getBoundingClien = hue.getBoundingClientRect(), width = _hue$getBoundingClien.width, left = _hue$getBoundingClien.left;
+            dispatchEvent(hue, 'click', {
+              clientX: 100 / 360 * width + left
+            }); // changing hue is throttled 50ms
+
+            _context4.next = 5;
+            return wait(100);
+
+          case 5:
+            expect(instance.get('color')).to.eql('#68d923');
+
+          case 6:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('should change color by alpha', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var alpha, _alpha$getBoundingCli, width, left;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            alpha = picker.querySelector('.k-colorpicker-alpha .k-slider-track-wrapper');
+            _alpha$getBoundingCli = alpha.getBoundingClientRect(), width = _alpha$getBoundingCli.width, left = _alpha$getBoundingCli.left;
+            dispatchEvent(alpha, 'click', {
+              clientX: 0.5 * width + left
+            }); // changing alpha is throttled 50ms
+
+            _context5.next = 5;
+            return wait(100);
+
+          case 5:
+            expect(instance.get('color')).to.eql('rgba(217, 145, 35, 0.5)');
+
+          case 6:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('should change color by input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _picker$querySelector, hex, r, g, b, alpha, alphaText;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            _picker$querySelector = picker.querySelectorAll('input'), hex = _picker$querySelector[0], r = _picker$querySelector[1], g = _picker$querySelector[2], b = _picker$querySelector[3], alpha = _picker$querySelector[4]; // should ignore invalid value
+
+            hex.value = 'test';
+            dispatchEvent(hex, 'input');
+            _context6.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.get('color')).to.eql('#d99123');
+            hex.value = '333';
+            dispatchEvent(hex, 'input');
+            _context6.next = 10;
+            return wait();
+
+          case 10:
+            expect(instance.get('color')).to.eql('#333333'); // drag to change alpha
+
+            alphaText = picker.querySelectorAll('.k-colorpicker-drag')[3];
+            dispatchEvent(alphaText, 'mousedown', {
+              clientX: 0,
+              which: 1
+            });
+            dispatchEvent(alphaText, 'mousemove', {
+              clientX: -1
+            });
+            _context6.next = 16;
+            return wait();
+
+          case 16:
+            expect(instance.get('color')).to.eql('rgba(51, 51, 51, 0.99)');
+            dispatchEvent(alphaText, 'mousemove', {
+              clientX: 1
+            });
+            _context6.next = 20;
+            return wait();
+
+          case 20:
+            expect(instance.get('color')).to.eql('#333333');
+            expect(picker.innerHTML).to.matchSnapshot();
+            dispatchEvent(alphaText, 'mouseup');
+            _context6.next = 25;
+            return wait();
+
+          case 25:
+            r.value = '1000';
+            dispatchEvent(r, 'input');
+            _context6.next = 29;
+            return wait();
+
+          case 29:
+            expect(instance.get('color')).to.eql('#ff3333');
+            alpha.value = '-1';
+            dispatchEvent(alpha, 'input');
+            _context6.next = 34;
+            return wait();
+
+          case 34:
+            expect(instance.get('color')).to.eql('rgba(255, 51, 51, 0)');
+
+          case 35:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  it('should change to hsv mode', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _picker$querySelector2, first, second, color, hsl, _picker$querySelector3, hex, h, s;
+
+    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            _picker$querySelector2 = picker.querySelectorAll('.k-colorpicker-drag'), first = _picker$querySelector2[0], second = _picker$querySelector2[1];
+            color = tinycolor(instance.get('color'));
+            hsl = color.toHsl();
+            console.log(hsl);
+            dispatchEvent(first, 'mousedown', {
+              which: 1
+            });
+            dispatchEvent(first, 'mouseup');
+            _context7.next = 8;
+            return wait();
+
+          case 8:
+            expect(picker.innerHTML).to.matchSnapshot();
+            dispatchEvent(first, 'mousedown', {
+              clientX: 0,
+              which: 1
+            });
+            dispatchEvent(first, 'mousemove', {
+              clientX: -1
+            });
+            _context7.next = 13;
+            return wait();
+
+          case 13:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(35, 72%, 49%)');
+            dispatchEvent(first, 'mousemove', {
+              clientX: 1
+            });
+            _context7.next = 17;
+            return wait();
+
+          case 17:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 72%, 49%)');
+            dispatchEvent(first, 'mouseup');
+            _context7.next = 21;
+            return wait();
+
+          case 21:
+            dispatchEvent(second, 'mousedown', {
+              clientX: 0,
+              which: 1
+            });
+            dispatchEvent(second, 'mousemove', {
+              clientX: -1
+            });
+            _context7.next = 25;
+            return wait();
+
+          case 25:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 71%, 49%)');
+            dispatchEvent(second, 'mousemove', {
+              clientX: 1
+            });
+            _context7.next = 29;
+            return wait();
+
+          case 29:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 73%, 49%)');
+            dispatchEvent(first, 'mouseup');
+            _context7.next = 33;
+            return wait();
+
+          case 33:
+            // input
+            _picker$querySelector3 = picker.querySelectorAll('input'), hex = _picker$querySelector3[0], h = _picker$querySelector3[1], s = _picker$querySelector3[2];
+            h.value = '1000';
+            dispatchEvent(h, 'input');
+            _context7.next = 38;
+            return wait();
+
+          case 38:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(359, 73%, 49%)');
+            s.value = '10';
+            dispatchEvent(s, 'input');
+            _context7.next = 43;
+            return wait();
+
+          case 43:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(358, 10%, 49%)');
+
+          case 44:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  })));
+});
+
+export {normalize} from 'intact-vue-next';

package/components/colorpicker/index.vdt.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc, createElementVNode as _$ce } from 'intact-vue-next';
+import { Tooltip } from '../tooltip';
+import { getRestProps } from '../utils';
+import { makeStyles } from './styles';
+import { ColorpickerPanel } from './panel';
+import { Dropdown, DropdownMenu } from '../dropdown';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      transition = _this$get.transition,
+      presets = _this$get.presets,
+      value = _this$get.value,
+      size = _this$get.size,
+      disabled = _this$get.disabled;
+
+  var classNameObj = (_classNameObj = {
+    'k-colorpicker': true
+  }, _classNameObj[className] = className, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-disabled'] = disabled, _classNameObj[makeStyles()] = true, _classNameObj);
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), _$cc(Dropdown, {
+    'position': {
+      my: 'left top+8',
+      at: 'left bottom',
+      collision: 'flip'
+    },
+    'trigger': 'click',
+    'disabled': disabled,
+    'children': [_$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-inner', {
+      'style': {
+        backgroundColor: value
+      }
+    }), 2, 'k-colorpicker-color'), _$cc(DropdownMenu, {
+      'className': 'k-colorpicker-content',
+      'children': _$cc(ColorpickerPanel, {
+        'presets': presets,
+        'ev-$model:value': function ev$modelValue($v) {
+          $this.set('value', $v);
+        },
+        'value': $this.get('value')
+      })
+    })]
+  }));
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/colorpicker/panel.d.ts

@@ -0,0 +1,14 @@
+import { Component } from 'intact-vue-next';
+export interface ColorpickerPanelProps {
+    value: string;
+    presets?: string[];
+}
+export declare class ColorpickerPanel extends Component<ColorpickerPanelProps> {
+    static template: string | import("intact").Template<any>;
+    private value;
+    private pointer;
+    private input;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/colorpicker/panel.js

@@ -0,0 +1,31 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-vue-next';
+import template from './panel.vdt';
+import { useValue } from './useValue';
+import { usePointer } from './usePointer';
+import { useInput } from './useInput';
+export var ColorpickerPanel = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(ColorpickerPanel, _Component);
+
+  function ColorpickerPanel() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.value = useValue();
+    _this.pointer = usePointer(_this.value.hsv, _this.value.format);
+    _this.input = useInput(_this.value.hsv, _this.value.rgb, _this.value.hsl);
+    return _this;
+  }
+
+  return ColorpickerPanel;
+}(Component);
+ColorpickerPanel.template = template;
+
+export {normalize} from 'intact-vue-next';

package/components/colorpicker/panel.vdt.js

@@ -0,0 +1,166 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, className as _$cn, createTextVNode as _$ct, map as _$ma } from 'intact-vue-next';
+import { Row, Col } from '../grid';
+import { Slider } from '../slider';
+import { Input } from '../input';
+import { makePanelStyles, makeAlphaBgColor } from './styles';
+import { linkEvent } from 'intact';
+import { Mode } from './useInput';
+import { ColorpickerDrag as Drag } from './drag';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj,
+      _$cn2,
+      _this = this;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      value = _this$get.value,
+      presets = _this$get.presets;
+
+  var classNameObj = (_classNameObj = {
+    'k-colorpicker-panel': true
+  }, _classNameObj[makePanelStyles()] = true, _classNameObj);
+  var _this$value = this.value,
+      hex = _this$value.hex.value,
+      hsv = _this$value.hsv.value,
+      rgb = _this$value.rgb.value,
+      hsl = _this$value.hsl.value,
+      changeHue = _this$value.changeHue,
+      changeAlpha = _this$value.changeAlpha,
+      setValue = _this$value.setValue;
+  var _this$pointer = this.pointer,
+      start = _this$pointer.start,
+      areaRef = _this$pointer.areaRef;
+  var _this$input = this.input,
+      onInputHex = _this$input.onInputHex,
+      mode = _this$input.mode,
+      changeMode = _this$input.changeMode,
+      changeColor = _this$input.changeColor,
+      onStart = _this$input.onStart,
+      onEnd = _this$input.onEnd,
+      dragging = _this$input.dragging,
+      setInputValue = _this$input.setInputValue;
+  var alpha = Math.round(rgb.a * 100);
+  return _$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', null, 1, 'k-colorpicker-white'), _$ce(2, 'div', null, 1, 'k-colorpicker-black'), _$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-circle'), 2, 'k-colorpicker-pointer', {
+    'style': {
+      left: hsv.s * 100 + "%",
+      top: -hsv.v * 100 + 100 + "%"
+    }
+  })], 4, 'k-colorpicker-saturation', {
+    'style': {
+      backgroundColor: "hsl(" + hsv.h + ", 100%, 50%)"
+    },
+    'ev-mousedown': start
+  }, null, areaRef), _$ce(2, 'div', [_$ce(2, 'div', [_$cc(Slider, {
+    'className': 'k-colorpicker-hue',
+    'showInput': false,
+    'showEnd': false,
+    'step': 0,
+    'max': 360,
+    'value': hsv.h,
+    'ev-$change:value': changeHue,
+    'animate': !dragging.value
+  }), _$cc(Slider, {
+    'className': _$cn((_$cn2 = {
+      "k-colorpicker-alpha k-colorpicker-alpha-bg": true
+    }, _$cn2[makeAlphaBgColor(rgb)] = true, _$cn2)),
+    'showInput': false,
+    'showEnd': false,
+    'step': 0,
+    'max': 1,
+    'value': rgb.a,
+    'ev-$change:value': changeAlpha,
+    'animate': !dragging.value
+  })], 4, 'k-colorpicker-sliders'), _$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-color', {
+    'style': {
+      backgroundColor: value
+    }
+  }), 2, 'k-colorpicker-color-wrapper k-colorpicker-alpha-bg')], 4, 'k-colorpicker-controls'), _$cc(Row, {
+    'gutter': '6',
+    'children': [_$cc(Col, {
+      'span': '8',
+      'children': [_$cc(Input, {
+        'fluid': true,
+        'size': 'small',
+        'frozenOnInput': true,
+        'className': 'k-colorpicker-input',
+        'value': hex,
+        'ev-input': onInputHex
+      }), _$ce(2, 'div', 'Hex', 16, 'k-colorpicker-text')]
+    }), function () {
+      var params;
+      var color;
+      var method;
+      var max;
+
+      if (mode.value === Mode.RGB) {
+        params = ['r', 'g', 'b'];
+        color = rgb;
+        method = _this._changeRgb;
+        max = 255;
+      } else {
+        params = ['h', 's', 'l'];
+        color = {
+          h: hsl.h,
+          s: hsl.s * 100,
+          l: hsl.l * 100
+        };
+        method = _this._changeHsv;
+        max = 100;
+      }
+
+      return _mapInstanceProperty(params).call(params, function (value) {
+        var v = Math.round(color[value]);
+        var realMax = value === 'h' ? 359 : max;
+        return _$cc(Col, {
+          'span': '4',
+          'children': [_$cc(Input, {
+            'fluid': true,
+            'size': 'small',
+            'value': v,
+            'className': 'k-colorpicker-input',
+            'ev-input': setInputValue.bind(null, value, realMax)
+          }), _$cc(Drag, {
+            'value': v,
+            'max': realMax,
+            'ev-$change:value': changeColor.bind(null, value),
+            'ev-click': changeMode,
+            'onStart': onStart,
+            'onEnd': onEnd,
+            'children': [value.toUpperCase(), _$ct('\n                            '), value === 's' || value === 'l' ? '%' : null]
+          })]
+        });
+      });
+    }(), _$cc(Col, {
+      'span': '4',
+      'children': [_$cc(Input, {
+        'fluid': true,
+        'size': 'small',
+        'value': alpha,
+        'className': 'k-colorpicker-input',
+        'ev-input': setInputValue.bind(null, 'a', 100)
+      }), _$cc(Drag, {
+        'value': alpha,
+        'max': 100,
+        'ev-$change:value': changeColor.bind(null, 'a'),
+        'onStart': onStart,
+        'onEnd': onEnd,
+        'children': 'A'
+      })]
+    })]
+  }), presets && presets.length ? _$ce(2, 'div', _$ma(presets, function ($value, $key) {
+    return _$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-preset-color', {
+      'style': {
+        backgroundColor: $value
+      }
+    }), 2, 'k-colorpicker-preset-color-wrapper k-colorpicker-alpha-bg', {
+      'ev-click': linkEvent($value, setValue)
+    });
+  }, $this), 4, 'k-colorpicker-presets') : undefined], 0, _$cn(classNameObj));
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/colorpicker/styles.d.ts

@@ -0,0 +1,8 @@
+import '../../styles/global';
+import { ColorFormats } from 'tinycolor2';
+export declare function makeStyles(): string;
+export declare function makePanelStyles(): string;
+export declare function makeAlphaBgColor({ r, g, b }: ColorFormats.RGBA): string;
+
+
+export {normalize} from 'intact-vue-next';