@king-design/vue 2.0.0-beta.0

package/components/split/index.spec.js

@@ -0,0 +1,332 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/split/demos/basic';
+import VerticalDemo from '~/components/split/demos/vertical';
+import RangeDemo from '~/components/split/demos/range';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import { createVNode as h, Component } from 'intact-vue-next';
+import { Split } from './';
+
+var test = function test(sizes, split) {
+  // @ts-ignore
+  var _split$size = split.size,
+      firstSize = _split$size.firstSize,
+      lastSize = _split$size.lastSize;
+  expect(firstSize.value).to.eq(sizes[0]);
+  expect(lastSize.value).to.eq(sizes[1]);
+};
+
+describe('Split', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('should fix leftSize and rightSize', function () {
+    var Demo = /*#__PURE__*/function (_Component) {
+      _inheritsLoose(Demo, _Component);
+
+      function Demo() {
+        return _Component.apply(this, arguments) || this;
+      }
+
+      return Demo;
+    }(Component);
+
+    Demo.template = function () {
+      return h(Split, {
+        lastSize: '10px',
+        firstSize: '10px'
+      });
+    };
+
+    var _mount = mount(Demo),
+        instance = _mount[0],
+        element = _mount[1];
+
+    expect(element.outerHTML).to.matchSnapshot();
+  });
+  it('should drag to resize horizontal panel', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount2, instance, element, _instance$$lastInput$, split1, split2, _element$querySelecto, demo1, demo2, dragLine;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount2 = mount(BasicDemo), instance = _mount2[0], element = _mount2[1];
+            _instance$$lastInput$ = instance.$lastInput.children, split1 = _instance$$lastInput$[1].children, split2 = _instance$$lastInput$[2].children;
+            _element$querySelecto = element.querySelectorAll('.k-split'), demo1 = _element$querySelecto[1], demo2 = _element$querySelecto[2];
+            dragLine = demo1.querySelector('.k-split-line-wrapper'); // right click does not work
+
+            dispatchEvent(dragLine, 'mousedown', {
+              which: 2
+            });
+            _context.next = 7;
+            return wait();
+
+          case 7:
+            // @ts-ignore
+            expect(split1.drag.dragging.value).to.be.false;
+            expect(demo1.outerHTML).to.matchSnapshot(); // moveStart
+
+            dispatchEvent(dragLine, 'mousedown', {
+              which: 1,
+              clientX: 80,
+              clientY: 0
+            }); // move 
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 100,
+              clientY: 0
+            });
+            _context.next = 13;
+            return wait();
+
+          case 13:
+            expect(demo1.outerHTML).to.matchSnapshot();
+            test(['100px', 'auto'], split1); // move to max
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 1000,
+              clientY: 0
+            });
+            _context.next = 18;
+            return wait();
+
+          case 18:
+            expect(demo1.outerHTML).to.matchSnapshot();
+            test(['794px', 'auto'], split1); // move to min
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: -1,
+              clientY: 0
+            });
+            _context.next = 23;
+            return wait();
+
+          case 23:
+            expect(demo1.outerHTML).to.matchSnapshot();
+            test(['0px', 'auto'], split1); // moveEnd
+
+            dispatchEvent(document, 'mouseup');
+            dragLine = demo2.querySelector('.k-split-line-wrapper'); // moveStart
+
+            dispatchEvent(dragLine, 'mousedown', {
+              which: 1,
+              clientX: 714,
+              clientY: 0
+            }); // move 
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 600,
+              clientY: 0
+            });
+            _context.next = 31;
+            return wait();
+
+          case 31:
+            expect(demo2.outerHTML).to.matchSnapshot();
+            test(['auto', 800 - 600 - 6 + "px"], split2); // move to max
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: -1,
+              clientY: 0
+            });
+            _context.next = 36;
+            return wait();
+
+          case 36:
+            expect(demo2.outerHTML).to.matchSnapshot();
+            test(['auto', 800 - 6 + "px"], split2); // move to min
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 1000,
+              clientY: 0
+            });
+            expect(demo2.outerHTML).to.matchSnapshot();
+            test(['auto', "0px"], split2); // moveEnd
+
+            dispatchEvent(document, 'mouseup');
+
+          case 42:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should drag to resize vertical panel for lastSize', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount3, instance, element, split, dragLine;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount3 = mount(VerticalDemo), instance = _mount3[0], element = _mount3[1];
+            split = instance.$lastInput.children;
+            dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
+
+            dispatchEvent(dragLine, 'mousedown', {
+              which: 1,
+              clientX: 0,
+              clientY: 994
+            }); // move 
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 0,
+              clientY: 800
+            });
+            expect(element.outerHTML).to.matchSnapshot();
+            test(['auto', 1080 - 800 - 6 + "px"], split); // move to max
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 0,
+              clientY: -1
+            });
+            expect(element.outerHTML).to.matchSnapshot();
+            test(['auto', 1080 - 6 + "px"], split); // move to min
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 0,
+              clientY: 1100
+            });
+            expect(element.outerHTML).to.matchSnapshot();
+            test(['auto', "0px"], split); // moveEnd
+
+            dispatchEvent(document, 'mouseup');
+
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should drag to resize vertical panel for firstSize', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount4, instance, element, split, dragLine;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component2) {
+              _inheritsLoose(Demo, _Component2);
+
+              function Demo() {
+                var _context3;
+
+                var _this;
+
+                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                  args[_key] = arguments[_key];
+                }
+
+                _this = _Component2.call.apply(_Component2, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
+                _this.Split = Split;
+                return _this;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Split} = this;\n                <Split mode=\"vertical\" firstSize=\"80px\">\n                    <b:first><div class=\"panel\">top</div></b:first>\n                    <b:last><div class=\"panel\">bottom</div></b:last>\n                </Split>\n            ";
+            _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
+            split = instance.$lastInput.children;
+            dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
+
+            dispatchEvent(dragLine, 'mousedown', {
+              which: 1,
+              clientX: 0,
+              clientY: 80
+            }); // move 
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 0,
+              clientY: 800
+            });
+            _context4.next = 9;
+            return wait();
+
+          case 9:
+            expect(element.outerHTML).to.matchSnapshot();
+            test(['800px', 'auto'], split); // move to max
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 0,
+              clientY: 1100
+            });
+            _context4.next = 14;
+            return wait();
+
+          case 14:
+            expect(element.outerHTML).to.matchSnapshot();
+            test([1080 - 6 + "px", 'auto'], split); // move to min
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 0,
+              clientY: -1
+            });
+            _context4.next = 19;
+            return wait();
+
+          case 19:
+            expect(element.outerHTML).to.matchSnapshot();
+            test(["0px", 'auto'], split); // moveEnd
+
+            dispatchEvent(document, 'mouseup');
+
+          case 22:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should not drag out of the min/max range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount5, instance, element, split, dragLine;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount5 = mount(RangeDemo), instance = _mount5[0], element = _mount5[1];
+            split = instance.$lastInput.children;
+            dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
+
+            dispatchEvent(dragLine, 'mousedown', {
+              which: 1,
+              clientX: 80
+            }); // move to max
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 800
+            });
+            _context5.next = 7;
+            return wait();
+
+          case 7:
+            expect(element.outerHTML).to.matchSnapshot();
+            test(['410px', 'auto'], split); // move to min
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 0
+            });
+            _context5.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.outerHTML).to.matchSnapshot();
+            test(['40px', 'auto'], split); // moveEnd
+
+            dispatchEvent(document, 'mouseup');
+
+          case 15:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee4);
+  })));
+});
+
+export {normalize} from 'intact-vue-next';

package/components/split/index.vdt.js

@@ -0,0 +1,69 @@
+import { createElementVNode as _$ce, noop as _$no, className as _$cn } from 'intact-vue-next';
+import { makeStyles } from './style';
+import { kls } from './style';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj, _style, _style2;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      mode = _this$get.mode;
+
+  var _this$size = this.size,
+      firstSize = _this$size.firstSize,
+      lastSize = _this$size.lastSize;
+  var _this$drag = this.drag,
+      firstRef = _this$drag.firstRef,
+      lastRef = _this$drag.lastRef,
+      elementRef = _this$drag.elementRef,
+      start = _this$drag.start,
+      dragging = _this$drag.dragging;
+  var classNameObj = (_classNameObj = {
+    'k-split': true
+  }, _classNameObj["k-" + mode] = true, _classNameObj[makeStyles()] = true, _classNameObj['k-first-auto'] = firstSize.value === 'auto', _classNameObj['k-last-auto'] = lastSize.value === 'auto', _classNameObj['k-resizing'] = dragging.value, _classNameObj);
+  var stylePropName = mode === 'horizontal' ? 'width' : 'height';
+  return _$ce(2, 'div', [_$ce(2, 'div', (_$blocks['first'] = function ($super) {
+    return null;
+  }, __$blocks['first'] = function ($super, data) {
+    var block = $blocks['first'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['first'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['first'](_$no)), 0, _$cn(kls('first')), {
+    'style': (_style = {}, _style[stylePropName] = firstSize.value, _style)
+  }, null, firstRef), _$ce(2, 'div', (_$blocks['drag'] = function ($super) {
+    return _$ce(2, 'div', _$ce(2, 'div', null, 1, _$cn(kls('drag-lines'))), 2, _$cn(kls('line')));
+  }, __$blocks['drag'] = function ($super, data) {
+    var block = $blocks['drag'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['drag'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['drag'](_$no)), 0, _$cn(kls('line-wrapper')), {
+    'ev-mousedown': start
+  }), _$ce(2, 'div', (_$blocks['last'] = function ($super) {
+    return null;
+  }, __$blocks['last'] = function ($super, data) {
+    var block = $blocks['last'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['last'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['last'](_$no)), 0, _$cn(kls('last')), {
+    'style': (_style2 = {}, _style2[stylePropName] = lastSize.value, _style2)
+  }, null, lastRef)], 4, _$cn(classNameObj), null, null, elementRef);
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/split/style.d.ts

@@ -0,0 +1,7 @@
+import '../../styles/global';
+export declare type Mode = 'horizontal' | 'vertical';
+export declare const kls: (className: string) => string;
+export declare function makeStyles(): string;
+
+
+export {normalize} from 'intact-vue-next';

package/components/split/style.js

@@ -0,0 +1,57 @@
+import { theme, setDefault } from '../../styles/theme';
+import { css } from '@emotion/css';
+import '../../styles/global';
+import { deepDefaults } from '../../styles/utils';
+export var kls = function kls(className) {
+  return "k-split-" + className;
+};
+var defaults = {
+  splitLineSize: '6px',
+  dragLinesSize: '1px',
+  dragLinesCount: 5,
+  dragLiensGutter: 5,
+
+  get bgColor() {
+    return theme.color.bg;
+  },
+
+  get baseBorder() {
+    return "1px solid " + theme.color.border;
+  },
+
+  get transition() {
+    return theme.transition;
+  },
+
+  get boderColor() {
+    return theme.color.border;
+  },
+
+  get dragLineMargin() {
+    return "-" + split.dragLinesCount * (split.dragLiensGutter + 1) / 2 + "px";
+  },
+
+  boxShadow: function boxShadow(direction) {
+    var i = 1;
+    var tmp = [];
+
+    while (i <= split.dragLinesCount) {
+      var shadowVal = direction === 'horizontal' ? "0 " + i * split.dragLiensGutter + "px 0 0" : i * split.dragLiensGutter + "px 0 0 0";
+      tmp.push(shadowVal + " " + split.boderColor);
+      i++;
+    }
+
+    return "" + tmp.join(',');
+  }
+};
+var split;
+setDefault(function () {
+  split = deepDefaults(theme, {
+    split: defaults
+  }).split;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("display:flex;height:100%;&>.", kls('first'), ",&>.", kls('last'), "{overflow:auto;position:relative;}&>.", kls('first'), "{flex:0 0 auto;}&>.", kls('last'), "{flex:auto;}&.k-first-auto{&>.", kls('first'), "{flex:auto;}&>.", kls('last'), "{flex:0 0 auto;}}&:not(.k-resizing){&>.", kls('first'), ",&>.", kls('last'), "{transition:all ", split.transition, ";}}&>.", kls('line-wrapper'), "{flex:0 0 auto;text-align:center;overflow:hidden;.", kls('line'), "{height:100%;background:", split.bgColor, ";position:relative;}.", kls('drag-lines'), "{background:", split.boderColor, ";position:absolute;}}&.k-horizontal{&>.", kls('line-wrapper'), "{cursor:col-resize;width:", split.splitLineSize, ";.", kls('line'), "{border-left:", split.baseBorder, ";border-right:", split.baseBorder, ";}.", kls('drag-lines'), "{height:", split.dragLinesSize, ";width:100%;top:50%;margin-top:", split.dragLineMargin, ";box-shadow:", split.boxShadow('horizontal'), ";}}}&.k-vertical{flex-direction:column;&>.", kls('line-wrapper'), "{cursor:row-resize;height:", split.splitLineSize, ";.", kls('line'), "{border-top:", split.baseBorder, ";border-bottom:", split.baseBorder, ";}.", kls('drag-lines'), "{width:", split.dragLinesSize, ";height:100%;left:50%;margin-left:", split.dragLineMargin, ";box-shadow:", split.boxShadow('vertical'), ";}}}");
+}
+
+export {normalize} from 'intact-vue-next';

package/components/split/useDraggable.d.ts

@@ -0,0 +1,11 @@
+import { State } from '../../hooks/useState';
+export declare function useDraggable(firstSize: State<string>, lastSize: State<string>): {
+    start: (e: MouseEvent) => void;
+    dragging: State<boolean>;
+    elementRef: import('intact-vue-next').RefObject<HTMLDivElement>;
+    firstRef: import("intact").RefObject<HTMLDivElement>;
+    lastRef: import("intact").RefObject<HTMLDivElement>;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/split/useDraggable.js

@@ -0,0 +1,151 @@
+import { useInstance, createRef } from 'intact-vue-next';
+import { useDraggable as useBaseDraggable } from '../../hooks/useDraggable';
+var VALUE_REG = /(?:(\d+(?:\.\d+)?)%)?([\+\-])?(\d+(?:\.\d+)?)?/;
+var cache = {};
+export function useDraggable(firstSize, lastSize) {
+  var instance = useInstance();
+  var elementRef = createRef();
+  var firstRef = createRef();
+  var lastRef = createRef();
+  var min = 0;
+  var max = 0;
+  var targetRef;
+  var targetSize;
+  var baseX = 0;
+  var baseY = 0;
+  var originalWidth = 0;
+  var originalHeight = 0;
+
+  var _useBaseDraggable = useBaseDraggable({
+    onStart: onStart,
+    onMove: onMove,
+    onEnd: onEnd
+  }),
+      start = _useBaseDraggable.start,
+      dragging = _useBaseDraggable.dragging;
+
+  function onStart(e) {
+    // set mouse style
+    setMouseStyle(true);
+    calcMinMaxValue();
+
+    if (lastSize.value === 'auto') {
+      targetRef = firstRef;
+      targetSize = firstSize;
+    } else {
+      targetRef = lastRef;
+      targetSize = lastSize;
+    }
+
+    var targetEl = targetRef.value;
+    originalWidth = restrainValue(targetEl.offsetWidth);
+    originalHeight = restrainValue(targetEl.offsetHeight);
+    baseX = e.clientX;
+    baseY = e.clientY;
+    instance.trigger('moveStart', e);
+  }
+
+  function onMove(e) {
+    var changed;
+    var originalSize;
+
+    if (instance.get('mode') === 'horizontal') {
+      originalSize = originalWidth;
+      changed = e.clientX - baseX;
+    } else {
+      originalSize = originalHeight;
+      changed = e.clientY - baseY;
+    }
+
+    if (targetRef === lastRef) {
+      changed = -changed;
+    }
+
+    targetSize.set(restrainValue(originalSize + changed) + "px");
+    instance.trigger('moving', e);
+  }
+
+  function onEnd(e) {
+    // reset mouse style
+    setMouseStyle();
+    instance.trigger('moveEnd', e);
+  }
+
+  function calcMinMaxValue() {
+    var _instance$get = instance.get(),
+        _min = _instance$get.min,
+        _max = _instance$get.max,
+        mode = _instance$get.mode;
+
+    var parsedMin = parseValue(_min);
+    var parsedMax = parseValue(_max);
+
+    if (parsedMin.percent || parsedMax.percent) {
+      var totalSize = mode === 'horizontal' ? elementRef.value.offsetWidth : elementRef.value.offsetHeight;
+      min = generateValue(parsedMin, totalSize);
+      max = generateValue(parsedMax, totalSize);
+    } else {
+      min = _min;
+      max = _max;
+    }
+  }
+
+  function setMouseStyle(set) {
+    if (set === void 0) {
+      set = false;
+    }
+
+    document.body.style.cursor = set ? instance.get('mode') === 'vertical' ? 'row-resize' : 'col-resize' : '';
+  }
+
+  function restrainValue(value) {
+    return Math.min(Math.max(value, min), max);
+  }
+
+  return {
+    start: start,
+    dragging: dragging,
+    elementRef: elementRef,
+    firstRef: firstRef,
+    lastRef: lastRef
+  };
+}
+
+function parseValue(v) {
+  if (typeof v === 'undefined') return cache;
+  if (typeof v === 'number') return {
+    px: v
+  };
+
+  if (!cache[v]) {
+    var matches = v.match(VALUE_REG) || [];
+    cache[v] = {
+      percent: matches[1],
+      op: matches[2],
+      px: matches[3]
+    };
+  }
+
+  return cache[v];
+}
+
+function generateValue(_ref, totalSize) {
+  var percent = _ref.percent,
+      op = _ref.op,
+      px = _ref.px;
+
+  if (percent) {
+    var value = totalSize * Number(percent) / 100;
+
+    if (px) {
+      px = Number(px);
+      value = op === '-' ? value - px : value + px;
+    }
+
+    return value;
+  }
+
+  return Number(px);
+}
+
+export {normalize} from 'intact-vue-next';

package/components/split/useSize.d.ts

@@ -0,0 +1,7 @@
+export declare function useSize(): {
+    firstSize: import("../../hooks/useState").State<string>;
+    lastSize: import("../../hooks/useState").State<string>;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/split/useSize.js

@@ -0,0 +1,35 @@
+import { useInstance } from 'intact-vue-next';
+import { useState } from '../../hooks/useState';
+import { useReceive } from '../../hooks/useReceive';
+export function useSize() {
+  var instance = useInstance();
+  var firstSize = useState('auto');
+  var lastSize = useState('auto');
+  fixSize();
+  useReceive(['firstSize', 'lastSize'], fixSize, true);
+
+  function fixSize() {
+    var _instance$get = instance.get(),
+        first = _instance$get.firstSize,
+        last = _instance$get.lastSize;
+
+    if (first === 'auto' && last === 'auto') {
+      firstSize.set('50%');
+      lastSize.set(last);
+    } else if (first !== 'auto' && last !== 'auto') {
+      firstSize.set(first);
+      lastSize.set('auto');
+    } else {
+      firstSize.set(first);
+      lastSize.set(last);
+    }
+  }
+
+  ;
+  return {
+    firstSize: firstSize,
+    lastSize: lastSize
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/steps/context.d.ts

@@ -0,0 +1,7 @@
+export declare const context: {
+    Provider: import("misstime").ComponentConstructor<import('intact-vue-next').Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
+    Consumer: import("misstime").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/steps/context.js

@@ -0,0 +1,4 @@
+import { createContext } from '../context';
+export var context = createContext();
+
+export {normalize} from 'intact-vue-next';