@king-design/vue 2.0.0-beta.0

package/components/switch/index.spec.js

@@ -0,0 +1,267 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/switch/demos/basic';
+import ValueDemo from '~/components/switch/demos/value';
+import WidthHeightDemo from '~/components/switch/demos/widthHeight';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+describe('Switch', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('change value by clicking', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, _element$querySelecto, el, disabledEl, handle;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            _element$querySelecto = element.querySelectorAll('.k-switch'), el = _element$querySelecto[0], disabledEl = _element$querySelecto[1];
+            el.click();
+            _context.next = 5;
+            return wait();
+
+          case 5:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.be.true;
+            el.click();
+            _context.next = 10;
+            return wait();
+
+          case 10:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.be.false;
+            handle = element.querySelector('.k-switch-handle');
+            handle.click();
+            _context.next = 16;
+            return wait();
+
+          case 16:
+            expect(instance.get('value')).to.be.false;
+            disabledEl.click();
+            _context.next = 20;
+            return wait();
+
+          case 20:
+            expect(element.outerHTML).to.matchSnapshot();
+
+          case 21:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('change value by draging', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, _element$querySelecto2, el, disabledEl;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(BasicDemo), instance = _mount2[0], element = _mount2[1];
+            _element$querySelecto2 = element.querySelectorAll('.k-switch-handle'), el = _element$querySelecto2[0], disabledEl = _element$querySelecto2[1];
+            dispatchEvent(el, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: 1
+            });
+            _context2.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.outerHTML).to.matchSnapshot(); // cancel this operation if the distance less than half of width
+
+            dispatchEvent(document, 'mouseup', {
+              clientX: 1
+            });
+            _context2.next = 10;
+            return wait();
+
+          case 10:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.be.false;
+            dispatchEvent(el, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: 30
+            });
+            dispatchEvent(document, 'mouseup', {
+              clientX: 30
+            });
+            _context2.next = 17;
+            return wait();
+
+          case 17:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.be.true;
+            dispatchEvent(el, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: -30
+            });
+            dispatchEvent(document, 'mouseup', {
+              clientX: -30
+            });
+            _context2.next = 24;
+            return wait();
+
+          case 24:
+            expect(instance.get('value')).to.be.false; // treat mousedown -> mouseup as click
+
+            dispatchEvent(el, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mouseup', {
+              clientX: 0
+            });
+            _context2.next = 29;
+            return wait();
+
+          case 29:
+            expect(instance.get('value')).to.be.true; // disabled
+
+            dispatchEvent(disabledEl, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: 30
+            });
+            dispatchEvent(document, 'mouseup', {
+              clientX: 30
+            });
+            _context2.next = 35;
+            return wait();
+
+          case 35:
+            expect(element.outerHTML).to.matchSnapshot();
+
+          case 36:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('drag switch which has custom width and height', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount3, instance, element, _element$querySelecto3, el;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount3 = mount(WidthHeightDemo), instance = _mount3[0], element = _mount3[1];
+            _element$querySelecto3 = element.querySelectorAll('.k-switch-handle'), el = _element$querySelecto3[2];
+            dispatchEvent(el, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: 50
+            });
+            dispatchEvent(document, 'mouseup', {
+              clientX: 50
+            });
+            _context3.next = 7;
+            return wait();
+
+          case 7:
+            expect(element.outerHTML).to.matchSnapshot();
+            dispatchEvent(el, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: -50
+            });
+            dispatchEvent(document, 'mouseup', {
+              clientX: -50
+            });
+            _context3.next = 13;
+            return wait();
+
+          case 13:
+            expect(element.outerHTML).to.matchSnapshot();
+
+          case 14:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('change value by keypress', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount4, instance, element, el;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount4 = mount(BasicDemo), instance = _mount4[0], element = _mount4[1];
+            el = element.querySelector('.k-switch');
+            dispatchEvent(el, 'keypress', {
+              keyCode: 13
+            });
+            _context4.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.get('value')).to.be.true;
+            dispatchEvent(el, 'keypress', {
+              keyCode: 13
+            });
+            _context4.next = 9;
+            return wait();
+
+          case 9:
+            expect(instance.get('value')).to.be.false;
+
+          case 10:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('custom the value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount5, instance, element, _element$querySelecto4, el1, el2;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount5 = mount(ValueDemo), instance = _mount5[0], element = _mount5[1];
+            _element$querySelecto4 = element.querySelectorAll('.k-switch'), el1 = _element$querySelecto4[0], el2 = _element$querySelecto4[1];
+            el1.click();
+            el2.click();
+            _context5.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.outerHTML).to.matchSnapshot();
+            el1.click();
+            el2.click();
+            _context5.next = 11;
+            return wait();
+
+          case 11:
+            expect(element.outerHTML).to.matchSnapshot();
+
+          case 12:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+});
+
+export {normalize} from 'intact-vue-next';

package/components/switch/index.vdt.js

@@ -0,0 +1,135 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _Object$assign from "@babel/runtime-corejs3/core-js/object/assign";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, isChecked as _$isc, linkEvent as _$le, setCheckboxModel as _$scm, noop as _$no } from 'intact-vue-next';
+import { makeStyles } from './styles';
+import { addStyle, getRestProps } from '../utils';
+var _$tmp0 = {
+  'src': 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      style = _this$get.style,
+      name = _this$get.name,
+      on = _this$get.on,
+      off = _this$get.off,
+      value = _this$get.value,
+      trueValue = _this$get.trueValue,
+      falseValue = _this$get.falseValue,
+      width = _this$get.width,
+      height = _this$get.height,
+      size = _this$get.size,
+      disabled = _this$get.disabled;
+
+  var _this$draggable = this.draggable,
+      start = _this$draggable.start,
+      dragging = _this$draggable.dragging,
+      barRef = _this$draggable.barRef,
+      barWidth = _this$draggable.barWidth;
+  var classNameObj = (_classNameObj = {
+    'k-switch': true
+  }, _classNameObj[className] = className, _classNameObj['k-checked'] = value === trueValue, _classNameObj["k-" + size] = true, _classNameObj['k-disabled'] = disabled, _classNameObj['k-dragging'] = dragging.value, _classNameObj[makeStyles()] = true, _classNameObj);
+  var onStyle;
+  var offStyle;
+  var barStyle;
+
+  if (width || height) {
+    var _style = {};
+    onStyle = {};
+    offStyle = {};
+
+    if (width) {
+      _style.width = width + "px";
+      onStyle.width = _style.width;
+      offStyle.width = _style.width;
+    }
+
+    if (height) {
+      _style.height = height + "px";
+
+      _Object$assign(onStyle, {
+        height: _style.height,
+        lineHeight: _style.height,
+        padding: "0 " + _style.height + " 0 " + height / 3 + "px"
+      });
+
+      _Object$assign(offStyle, {
+        height: _style.height,
+        lineHeight: _style.height,
+        padding: "0 " + height / 3 + "px 0 " + _style.height
+      });
+
+      barStyle = {
+        width: value === trueValue ? '100%' : height + "px"
+      };
+    }
+
+    style = addStyle(style, _style);
+  }
+
+  if (barWidth.value) {
+    barStyle = addStyle(barStyle, {
+      width: barWidth.value + 'px'
+    });
+  }
+
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this), {
+    'style': style,
+    'ev-click': this.onClick,
+    'tabindex': disabled ? "-1" : "0",
+    'ev-keypress': this.onKeypress,
+    'ref': this.elementRef
+  }), [_$ce(64, 'input', null, 1, null, {
+    'type': 'checkbox',
+    'name': name,
+    'disabled': disabled,
+    'trueValue': trueValue,
+    'falseValue': falseValue,
+    'tabindex': '-1',
+    '$model:value': 'value',
+    'checked': _$isc($this.get('value'), trueValue),
+    'ev-$model:change': _$le($this, _$scm)
+  }), off || $blocks.off ? _$ce(2, 'div', (_$blocks['off'] = function ($super) {
+    return off;
+  }, __$blocks['off'] = function ($super, data) {
+    var block = $blocks['off'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['off'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['off'](_$no)), 0, 'k-switch-off', {
+    'style': offStyle
+  }) : undefined, _$ce(2, 'div', [on || $blocks.on ? _$ce(2, 'div', (_$blocks['on'] = function ($super) {
+    return on;
+  }, __$blocks['on'] = function ($super, data) {
+    var block = $blocks['on'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['on'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['on'](_$no)), 0, 'k-switch-on', {
+    'style': onStyle
+  }) : undefined, _$ce(2, 'div', _$ce(2, 'div', _$ce(2, 'img', null, 1, null, _$tmp0), 2, 'k-switch-handle', {
+    'ev-click': this.onClickOnHandle,
+    'ev-mousedown': start
+  }), 2, 'k-switch-wrapper')], 0, 'k-switch-bar', {
+    'style': barStyle
+  }, null, barRef)]);
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/switch/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare function makeStyles(): string;
+
+
+export {normalize} from 'intact-vue-next';

package/components/switch/styles.js

@@ -0,0 +1,87 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults, sizes } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  bgColor: "#fff",
+  fontSize: "12px",
+
+  get color() {
+    return theme.color.text;
+  },
+
+  checkedBgColor: "#fff",
+  handleBorderRadius: "100%",
+
+  get handleBgColor() {
+    return theme.color.border;
+  },
+
+  get border() {
+    return "1px solid " + theme.color.border;
+  },
+
+  // checked
+  checked: {
+    get borderColor() {
+      return theme.color.primary;
+    },
+
+    get color() {
+      return theme.color.primary;
+    },
+
+    get bgColor() {
+      return theme.color.primary;
+    }
+
+  },
+  // default
+  default: {
+    width: "36px",
+    height: "18px",
+    padding: "2px"
+  },
+  // large
+  large: {
+    width: "52px",
+    height: "26px",
+    padding: "2px"
+  },
+  // small
+  small: {
+    width: "32px",
+    height: "16px",
+    padding: "2px"
+  },
+  // mini
+  mini: {
+    width: "24px",
+    height: "12px",
+    padding: "1px"
+  },
+
+  // disabled
+  get disabledBgColor() {
+    return theme.color.disabledBg;
+  }
+
+};
+var kswitch;
+setDefault(function () {
+  kswitch = deepDefaults(theme, {
+    switch: defaults
+  }).switch;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;background:", kswitch.bgColor, ";position:relative;cursor:pointer;user-select:none;overflow:hidden;border:", kswitch.border, ";box-sizing:content-box;input{opacity:0;position:absolute;}.k-switch-bar,.k-switch-off{box-sizing:border-box;}.k-switch-bar{position:absolute;text-align:right;overflow:hidden;}.k-switch-wrapper{display:inline-block;position:relative;z-index:1;border-radius:", kswitch.handleBorderRadius, ";}.k-switch-bar,.k-switch-wrapper{height:100%;background:", kswitch.bgColor, ";transition:all ", theme.transition, ";}.k-switch-handle{border-radius:", kswitch.handleBorderRadius, ";background:", kswitch.handleBgColor, ";height:100%;cursor:pointer;transition:left ", theme.transition, ";display:inline-block;img{height:100%;visibility:hidden;}}.k-switch-on,.k-switch-off{position:absolute;font-size:", kswitch.fontSize, ";color:", kswitch.color, ";text-align:center;}&.k-dragging{.k-switch-bar,.k-switch-wrapper{background:", kswitch.checkedBgColor, ";transition:background ", theme.transition, ";}}&:focus{outline:none;border-color:", kswitch.checked.borderColor, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    var _kswitch$size = kswitch[size],
+        width = _kswitch$size.width,
+        height = _kswitch$size.height,
+        padding = _kswitch$size.padding;
+    return /*#__PURE__*/css("&.k-", size, ",&.k-", size, " .k-switch-on,&.k-", size, " .k-switch-off{width:", width, ";height:", height, ";}&.k-", size, "{border-radius:", height, ";.k-switch-bar{width:", height, ";border-radius:", height, ";}.k-switch-wrapper{padding:", padding, ";}.k-switch-on,.k-switch-off{line-height:", height, ";left:0;}.k-switch-on{padding:0 ", height, " 0 calc(", height, " / 3);}.k-switch-off{padding:0 calc(", height, " / 3) 0 ", height, ";}}");
+  }), "&.k-checked{border-color:", kswitch.checked.borderColor, ";.k-switch-on{color:", kswitch.checked.color, ";}.k-switch-handle{background:", kswitch.checked.bgColor, ";}.k-switch-bar,.k-switch-wrapper{background:", kswitch.checkedBgColor, ";}.k-switch-bar{width:100%;}}&.k-disabled{background:", kswitch.disabledBgColor, ";cursor:not-allowed;.k-switch-bar,.k-switch-wrapper{background:", kswitch.disabledBgColor, ";}}&:not(.k-checked){.k-switch-bar,.k-switch-wrapper{border-top-right-radius:0;border-bottom-right-radius:0;}}");
+}
+
+export {normalize} from 'intact-vue-next';

package/components/switch/useDraggable.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'intact-vue-next';
+export declare function useDraggable(elementRef: RefObject<HTMLElement>): {
+    start: (e: MouseEvent) => void;
+    dragging: import("../../hooks/useState").State<boolean>;
+    barRef: RefObject<HTMLElement>;
+    barWidth: import("../../hooks/useState").State<number | null>;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/switch/useDraggable.js

@@ -0,0 +1,75 @@
+import { useInstance, createRef } from 'intact-vue-next';
+import { useDraggable as useBaseDraggable } from '../../hooks/useDraggable';
+import { useState } from '../../hooks/useState';
+export function useDraggable(elementRef) {
+  var instance = useInstance();
+  var barRef = createRef();
+  var barWidth = useState(null);
+  var x;
+  var height;
+  var width;
+  var maxWidth;
+
+  function onStart(e) {
+    if (instance.get('disabled')) return;
+    x = e.clientX;
+    height = barRef.value.clientHeight;
+    width = barRef.value.clientWidth;
+    maxWidth = elementRef.value.clientWidth;
+  }
+
+  function onMove(e) {
+    var left = e.clientX - x;
+    var newWidth = Math.min(Math.max(height, width + left), maxWidth);
+    barWidth.set(newWidth);
+  }
+
+  function onEnd(e) {
+    // unmounted
+    if (!e) return;
+    elementRef.value.blur(); // treat mousedown -> mouseup as click
+
+    if (x === e.clientX) {
+      barWidth.set(null);
+      instance.toggle(false);
+    } else {
+      // cancel this operation if the distance less than half of width
+      var percent = (barWidth.value - height / 2) / maxWidth;
+
+      if (!instance.isChecked()) {
+        if (percent >= 0.5) {
+          instance.check();
+        }
+      } else if (percent < 0.5) {
+        instance.uncheck();
+      }
+
+      var _instance$get = instance.get(),
+          _width = _instance$get.width,
+          _height = _instance$get.height;
+
+      if (!instance.isChecked() && _width && _height) {
+        barWidth.set(+_height);
+      } else {
+        barWidth.set(null);
+      }
+    }
+  }
+
+  var _useBaseDraggable = useBaseDraggable({
+    onStart: onStart,
+    onMove: onMove,
+    onEnd: onEnd
+  }),
+      start = _useBaseDraggable.start,
+      dragging = _useBaseDraggable.dragging;
+
+  return {
+    start: start,
+    dragging: dragging,
+    barRef: barRef,
+    barWidth: barWidth
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/table/cell.d.ts

@@ -0,0 +1,25 @@
+import { Component, Props, VNodeComponentClass, IntactDom } from 'intact-vue-next';
+import type { TableColumnProps } from './column';
+import type { TableProps } from './table';
+import type { TableGrid } from './useMerge';
+export interface TableCellProps {
+    props: Props<TableColumnProps>;
+    columnIndex: number;
+    rowIndex: number;
+    data: any;
+    offset: number;
+    checkType: TableProps['checkType'];
+    indent: number;
+    grid: TableGrid;
+    colspan: number;
+    rowspan: number;
+    onClickArrow: (e: MouseEvent) => void;
+    hasChildren: boolean;
+}
+export declare class TableCell extends Component<TableCellProps> {
+    static template: string | import("intact").Template<any>;
+    $update(lastVNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[], force: boolean): void;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/table/cell.js

@@ -0,0 +1,34 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact-vue-next';
+import template from './cell.vdt';
+export var TableCell = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(TableCell, _Component);
+
+  function TableCell() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = TableCell.prototype;
+
+  _proto.$update = function $update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force) {
+    var lastProps = lastVNode.props;
+    var nextProps = nextVNode.props;
+    var isSame = true;
+
+    for (var key in lastProps) {
+      if (lastProps[key] !== nextProps[key]) {
+        isSame = false;
+        break;
+      }
+    }
+
+    if (!isSame) {
+      _Component.prototype.$update.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
+    }
+  };
+
+  return TableCell;
+}(Component);
+TableCell.template = template;
+
+export {normalize} from 'intact-vue-next';