@king-design/vue 2.0.0-beta.0

package/components/carousel/useSlide.js

@@ -0,0 +1,191 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
+import { useInstance, createRef, findDomFromVNode, onMounted, onBeforeUnmount } from 'intact-vue-next';
+import { useState } from '../../hooks/useState';
+import ResizeObserver from 'resize-observer-polyfill';
+import { nextFrame } from '../utils';
+export function useSlide(getItems, getItemsWithCloned) {
+  var instance = useInstance();
+  var translate = useState(0);
+  var shouldTransition = useState(true);
+  var elementRef = createRef();
+  var ro = null;
+
+  function observe() {
+    var init = function init() {
+      setTranslate(getItems()[instance.getIndex()], false);
+    };
+
+    ro = new ResizeObserver(init);
+    ro.observe(elementRef.value);
+    init();
+  }
+
+  function disconnect() {
+    if (ro) {
+      ro.disconnect();
+      ro = null;
+    }
+  }
+
+  function stopTranstion() {
+    shouldTransition.set(false);
+  }
+
+  function startTransition() {
+    return new _Promise(function (resolve) {
+      nextFrame(function () {
+        shouldTransition.set(true);
+        resolve();
+      });
+    });
+  }
+
+  function translateToItem(_x, _x2, _x3, _x4) {
+    return _translateToItem.apply(this, arguments);
+  }
+
+  function _translateToItem() {
+    _translateToItem = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item, oldIndex, newIndex, keepDirection) {
+      var itemsWithCloned, length;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (isSlide()) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              if (!keepDirection) {
+                _context.next = 13;
+                break;
+              }
+
+              itemsWithCloned = getItemsWithCloned();
+              length = getItems().length;
+
+              if (!(oldIndex === length - 1 && newIndex === 0)) {
+                _context.next = 10;
+                break;
+              }
+
+              _context.next = 8;
+              return setTranslate(itemsWithCloned[0], false);
+
+            case 8:
+              _context.next = 13;
+              break;
+
+            case 10:
+              if (!(oldIndex === 0 && newIndex === length - 1)) {
+                _context.next = 13;
+                break;
+              }
+
+              _context.next = 13;
+              return setTranslate(itemsWithCloned[itemsWithCloned.length - 1], false);
+
+            case 13:
+              setTranslate(item, true);
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _translateToItem.apply(this, arguments);
+  }
+
+  function setTranslate(_x5, _x6) {
+    return _setTranslate.apply(this, arguments);
+  }
+
+  function _setTranslate() {
+    _setTranslate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(item, withTranstion) {
+      var el, offsetLeft, width, containerWidth;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!instance.$unmounted) {
+                _context2.next = 2;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 2:
+              if (!withTranstion) {
+                stopTranstion();
+              }
+
+              el = findDomFromVNode(item, true);
+              offsetLeft = el.offsetLeft;
+              width = el.offsetWidth;
+              containerWidth = elementRef.value.offsetWidth; // let item position center
+
+              translate.set(-(offsetLeft - (containerWidth - width) / 2));
+
+              if (withTranstion) {
+                _context2.next = 11;
+                break;
+              }
+
+              _context2.next = 11;
+              return startTransition();
+
+            case 11:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return _setTranslate.apply(this, arguments);
+  }
+
+  function isSlide() {
+    return instance.get('effect') === 'slide';
+  }
+
+  instance.watch('effect', function () {
+    if (isSlide()) {
+      observe();
+    } else {
+      disconnect();
+    }
+  }, {
+    presented: true,
+    inited: true
+  });
+  instance.watch('clonedAmount', function () {
+    if (isSlide()) {
+      observe();
+    }
+  }, {
+    presented: true,
+    inited: true
+  });
+  onMounted(function () {
+    if (isSlide()) {
+      observe();
+    }
+  });
+  onBeforeUnmount(disconnect);
+  return {
+    translate: translate,
+    shouldTransition: shouldTransition,
+    elementRef: elementRef,
+    translateToItem: translateToItem,
+    isSlide: isSlide
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/cascader/index.d.ts

@@ -0,0 +1,37 @@
+import { TypeDefs } from 'intact-vue-next';
+import { BaseSelect, BaseSelectProps, BaseSelectEvents, BaseSelectBlocks } from '../select/base';
+export interface CascaderProps<V = any, Multipe extends boolean = boolean> extends BaseSelectProps<V[], Multipe> {
+    data?: CascaderData<V>[];
+    trigger?: 'click' | 'hover';
+    changeOnSelect?: boolean;
+    format?: (labels: string[]) => string;
+    loadData?: (data: CascaderData<V>) => any;
+    filter?: (keywords: string, data: CascaderData<V>) => boolean;
+}
+export declare type CascaderData<V> = {
+    value: V;
+    label: string;
+    disabled?: boolean;
+    loaded?: boolean;
+    children?: CascaderData<V>[];
+};
+export interface CascaderEvents extends BaseSelectEvents {
+}
+export interface CascaderBlocks<V> extends BaseSelectBlocks<V> {
+}
+export declare class Cascader<V = any, Multipe extends boolean = false> extends BaseSelect<CascaderProps<V, Multipe>, CascaderEvents, CascaderBlocks<V>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<CascaderProps<any, boolean>>>;
+    static defaults: () => Partial<CascaderProps<any, boolean>>;
+    private value;
+    private label;
+    private load;
+    private filterable;
+    private positionObj;
+    protected getPlaceholder(): string | number | boolean | import("misstime/dist/utils/types").VNode<any> | import("intact").Children[];
+    protected getLabel(): import("intact").Children;
+    protected hasValue(): any;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/cascader/index.js

@@ -0,0 +1,93 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import template from './index.vdt';
+import { BaseSelect } from '../select/base';
+import { _$ } from '../../i18n';
+import { isNullOrUndefined } from 'intact-shared';
+import { useValue } from './useValue';
+import { useLabel } from './useLabel';
+import { useLoad } from './useLoad';
+import { useFilterable } from './useFilterable';
+
+var typeDefs = _extends({}, BaseSelect.typeDefs, {
+  data: Array,
+  trigger: ['click', 'hover'],
+  changeOnSelect: Boolean,
+  format: Function,
+  loadData: Function,
+  filter: Function
+});
+
+var defaults = function defaults() {
+  return _extends({}, BaseSelect.defaults(), {
+    data: [],
+    trigger: 'click',
+    format: function format(labels) {
+      return labels.join(' / ');
+    },
+    filter: function filter(keywords, data) {
+      var _context;
+
+      return _includesInstanceProperty(_context = data.label).call(_context, keywords);
+    }
+  });
+};
+
+export var Cascader = /*#__PURE__*/function (_BaseSelect) {
+  _inheritsLoose(Cascader, _BaseSelect);
+
+  function Cascader() {
+    var _context2;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _BaseSelect.call.apply(_BaseSelect, _concatInstanceProperty(_context2 = [this]).call(_context2, args)) || this;
+    _this.value = useValue();
+    _this.label = useLabel();
+    _this.load = useLoad();
+    _this.filterable = useFilterable(_this.input.keywords, _this.value.setValue);
+    _this.positionObj = {
+      my: 'left top',
+      at: 'right top',
+      collisionDirection: ['left']
+    };
+    return _this;
+  }
+
+  var _proto = Cascader.prototype;
+
+  _proto.getPlaceholder = function getPlaceholder() {
+    var _this$get = this.get(),
+        placeholder = _this$get.placeholder,
+        filterable = _this$get.filterable;
+
+    return isNullOrUndefined(placeholder) ? filterable ? _$('请输入或选择') : _$('请选择') : placeholder;
+  };
+
+  _proto.getLabel = function getLabel() {
+    return this.label.getLabel();
+  };
+
+  _proto.hasValue = function hasValue() {
+    var _this$get2 = this.get(),
+        value = _this$get2.value;
+
+    var has = _BaseSelect.prototype.hasValue.call(this);
+
+    if (has && !value.length) return false;
+    return has;
+  };
+
+  return Cascader;
+}(BaseSelect);
+Cascader.template = template;
+Cascader.typeDefs = typeDefs;
+Cascader.defaults = defaults;
+
+export {normalize} from 'intact-vue-next';

package/components/cascader/index.spec.d.ts

@@ -0,0 +1,4 @@
+export {};
+
+
+export {normalize} from 'intact-vue-next';

package/components/cascader/index.spec.js

@@ -0,0 +1,283 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/cascader/demos/basic';
+import CustomDemo from '~/components/cascader/demos/custom';
+import ChangeOnSelectDemo from '~/components/cascader/demos/changeOnSelect';
+import LoadDataDemo from '~/components/cascader/demos/loadData';
+import FilterDemo from '~/components/cascader/demos/filterable';
+import { mount, unmount, dispatchEvent, getElement, getElements, wait } from '../../test/utils';
+describe('Cascader', function () {
+  afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            unmount();
+            _context.next = 3;
+            return wait(400);
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount, instance, element, select, dropdown1, _dropdown1$querySelec, item1, item2, dropdown2, _dropdown2$querySelec, item11, item12, dropdown3, _dropdown3$querySelec, item21, item22, _getElements, _dropdown1, _dropdown2, _dropdown3;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            select = element.querySelector('.k-cascader');
+            select.click();
+            _context2.next = 5;
+            return wait();
+
+          case 5:
+            dropdown1 = getElement('.k-cascader-menu');
+            _dropdown1$querySelec = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec[0], item2 = _dropdown1$querySelec[1];
+            item2.click();
+            _context2.next = 10;
+            return wait();
+
+          case 10:
+            expect(dropdown1.innerHTML).to.matchSnapshot();
+            dropdown2 = getElement('.k-cascader-menu');
+            _dropdown2$querySelec = dropdown2.querySelectorAll(':scope > .k-dropdown-item'), item11 = _dropdown2$querySelec[0], item12 = _dropdown2$querySelec[1];
+            item12.click();
+            _context2.next = 16;
+            return wait();
+
+          case 16:
+            dropdown3 = getElement('.k-cascader-menu');
+            _dropdown3$querySelec = dropdown3.querySelectorAll(':scope > .k-dropdown-item'), item21 = _dropdown3$querySelec[0], item22 = _dropdown3$querySelec[1];
+            item22.click();
+            _context2.next = 21;
+            return wait();
+
+          case 21:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.eql(['hunan', 'yueyang', 'yueyangxian']);
+            select.click();
+            _context2.next = 26;
+            return wait();
+
+          case 26:
+            _getElements = getElements('.k-cascader-menu'), _dropdown1 = _getElements[0], _dropdown2 = _getElements[1], _dropdown3 = _getElements[2];
+            expect(_dropdown1.innerHTML).to.matchSnapshot();
+            expect(_dropdown2.innerHTML).to.matchSnapshot();
+            expect(_dropdown3.innerHTML).to.matchSnapshot();
+
+          case 30:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('custom label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount2, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount2 = mount(CustomDemo), instance = _mount2[0], element = _mount2[1];
+            instance.set('value', ['beijing', 'haidian']);
+            _context3.next = 4;
+            return wait();
+
+          case 4:
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('value', ['hunan', 'yueyang', 'yueyangxian']);
+            _context3.next = 8;
+            return wait();
+
+          case 8:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 9:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('change on select', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount3, instance, element, select, dropdown1, _dropdown1$querySelec2, item1, item2;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount3 = mount(ChangeOnSelectDemo), instance = _mount3[0], element = _mount3[1];
+            select = element.querySelector('.k-cascader');
+            select.click();
+            _context4.next = 5;
+            return wait();
+
+          case 5:
+            dropdown1 = getElement('.k-cascader-menu');
+            _dropdown1$querySelec2 = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec2[0], item2 = _dropdown1$querySelec2[1];
+            item2.click();
+            _context4.next = 10;
+            return wait();
+
+          case 10:
+            expect(instance.get('value')).to.eql(['hunan']);
+            item1.click();
+            _context4.next = 14;
+            return wait();
+
+          case 14:
+            expect(instance.get('value')).to.eql(['beijing']);
+
+          case 15:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('load data asychronously', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount4, instance, element, dropdown1, _dropdown1$querySelec3, item1, item2, dropdown2, _dropdown2$querySelec2, item21, item22, dropdown3;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount4 = mount(LoadDataDemo), instance = _mount4[0], element = _mount4[1];
+            element.click();
+            _context5.next = 4;
+            return wait();
+
+          case 4:
+            dropdown1 = getElement('.k-cascader-menu');
+            _dropdown1$querySelec3 = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec3[0], item2 = _dropdown1$querySelec3[1];
+            item2.click();
+            _context5.next = 9;
+            return wait();
+
+          case 9:
+            dropdown2 = getElement('.k-cascader-menu');
+            expect(dropdown2.innerHTML).to.matchSnapshot();
+            expect(dropdown2.innerText).to.eql('');
+            _context5.next = 14;
+            return wait(1500);
+
+          case 14:
+            expect(dropdown2.innerHTML).to.matchSnapshot();
+            expect(dropdown2.innerText).to.not.eql('');
+            _dropdown2$querySelec2 = dropdown2.querySelectorAll(':scope > .k-dropdown-item'), item21 = _dropdown2$querySelec2[0], item22 = _dropdown2$querySelec2[1];
+            item22.click();
+            _context5.next = 20;
+            return wait();
+
+          case 20:
+            dropdown3 = getElement('.k-cascader-menu');
+            expect(dropdown3.innerHTML).to.matchSnapshot();
+            expect(dropdown3.innerText).to.eql('无数据');
+
+          case 23:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('filter', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _mount5, instance, element, input, dropdown, dropdown1;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            _mount5 = mount(FilterDemo), instance = _mount5[0], element = _mount5[1];
+            input = element.querySelector('.k-input-inner'); // show menu
+
+            input.click();
+            _context6.next = 5;
+            return wait();
+
+          case 5:
+            // should show layer when input empty string
+            input.value = ' ';
+            dispatchEvent(input, 'input');
+            _context6.next = 9;
+            return wait();
+
+          case 9:
+            dropdown = getElement('.k-cascader-menu');
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            expect(dropdown.innerText).to.eql('北京\n湖南');
+            input.value = '长沙';
+            dispatchEvent(input, 'input');
+            _context6.next = 16;
+            return wait();
+
+          case 16:
+            dropdown1 = getElement('.k-cascader-filter');
+            expect(dropdown1.innerHTML).to.matchSnapshot();
+            expect(dropdown1.innerText).to.eql('湖南 / 长沙市 / 岳麓区'); // should show no-data layer
+
+            input.value = 'xxx';
+            dispatchEvent(input, 'input');
+            _context6.next = 23;
+            return wait();
+
+          case 23:
+            expect(dropdown1.innerHTML).to.matchSnapshot();
+            expect(dropdown1.innerText).to.eql('无匹配数据');
+            input.value = '岳阳';
+            dispatchEvent(input, 'input');
+            _context6.next = 29;
+            return wait();
+
+          case 29:
+            expect(dropdown1.innerHTML).to.matchSnapshot();
+            expect(dropdown1.childElementCount).to.eql(2);
+            dropdown1.querySelector('.k-dropdown-item').click();
+            _context6.next = 34;
+            return wait();
+
+          case 34:
+            expect(instance.get('value')).to.eql(['hunan', 'yueyang', 'yueyanglou']);
+
+          case 35:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  it('no data for init data', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _mount6, instance, element, _element$querySelecto, select, dropdown;
+
+    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            _mount6 = mount(BasicDemo), instance = _mount6[0], element = _mount6[1];
+            _element$querySelecto = element.querySelectorAll('.k-cascader'), select = _element$querySelecto[1];
+            dispatchEvent(select, 'click');
+            _context7.next = 5;
+            return wait();
+
+          case 5:
+            dropdown = getElement('.k-cascader-menu');
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            expect(dropdown.innerText).to.eql('无数据');
+
+          case 8:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  })));
+});
+
+export {normalize} from 'intact-vue-next';