@king-design/vue 2.0.0-beta.0

package/components/tree/useTransitionEvent.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { useInstance } from 'intact-vue-next';
+import { expandAnimationCallbacks } from '../utils'; // for TreeSelect to refresh position
+
+export function useTransitionEvent() {
+  var instance = useInstance();
+  var _onAfterEnter = expandAnimationCallbacks.onAfterEnter,
+      _onAfterLeave = expandAnimationCallbacks.onAfterLeave;
+  return _extends({}, expandAnimationCallbacks, {
+    onAfterEnter: function onAfterEnter(el) {
+      instance.trigger('transitionEnd');
+
+      _onAfterEnter(el);
+    },
+    onAfterLeave: function onAfterLeave(el) {
+      instance.trigger('transitionEnd');
+
+      _onAfterLeave(el);
+    }
+  });
+}
+
+export {normalize} from 'intact-vue-next';

package/components/treeSelect/index.d.ts

@@ -0,0 +1,30 @@
+import { TypeDefs, Children, Key } from 'intact-vue-next';
+import { BaseSelect, BaseSelectProps, BaseSelectEvents, BaseSelectBlocks } from '../select/base';
+import { TreeProps } from '../tree';
+import type { DataItem } from '../tree/useNodes';
+export interface TreeSelectProps<K extends Key = Key, Multipe extends boolean = boolean, Checkbox extends boolean = boolean> extends BaseSelectProps<K, Multipe, Checkbox extends true ? K[] : K | null> {
+    data?: TreeProps<K>['data'];
+    uncorrelated?: boolean;
+    load?: TreeProps<K>['load'];
+    showLine?: boolean;
+    defaultExpandAll?: boolean;
+    checkbox?: Checkbox;
+    filter?: (keywords: string, data: DataItem<K>) => boolean;
+}
+export interface TreeSelectEvents extends BaseSelectEvents {
+}
+export interface TreeSelectBlocks<K> extends BaseSelectBlocks<K> {
+}
+export declare class TreeSelect<K extends Key = Key, Checkbox extends boolean = false, Multipe extends boolean = Checkbox extends true ? true : false> extends BaseSelect<TreeSelectProps<K, Multipe, Checkbox>, TreeSelectEvents, TreeSelectBlocks<K>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<TreeSelectProps<Key, boolean, boolean>>>;
+    static defaults: () => Partial<TreeSelectProps<Key, boolean, boolean>>;
+    private value;
+    init(): void;
+    protected getPlaceholder(): string | number | boolean | import("misstime/dist/utils/types").VNode<any> | Children[];
+    protected getLabel(): Children;
+    private filter;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/treeSelect/index.js

@@ -0,0 +1,141 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import { __decorate } from "tslib";
+import template from './index.vdt';
+import { BaseSelect } from '../select/base';
+import { useEqualWidth } from '../select/useEqualWidth';
+import { _$ } from '../../i18n';
+import { isNullOrUndefined, isStringOrNumber } from 'intact-shared';
+import { useReceive } from '../../hooks/useReceive';
+import { useValue } from './useValue';
+import { bind } from '../utils';
+
+var typeDefs = _extends({}, BaseSelect.typeDefs, {
+  data: Array,
+  filter: Function,
+  uncorrelated: Boolean,
+  load: Function,
+  showLine: Boolean,
+  defaultExpandAll: Boolean,
+  checkbox: Boolean
+});
+
+var defaults = function defaults() {
+  return _extends({}, BaseSelect.defaults(), {
+    defaultExpandAll: true,
+    showLine: true
+  });
+};
+
+export var TreeSelect = /*#__PURE__*/function (_BaseSelect) {
+  _inheritsLoose(TreeSelect, _BaseSelect);
+
+  function TreeSelect() {
+    var _context;
+
+    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(_context = [this]).call(_context, args)) || this;
+    _this.value = useValue();
+    return _this;
+  }
+
+  var _proto = TreeSelect.prototype;
+
+  _proto.init = function init() {
+    var _this2 = this;
+
+    _BaseSelect.prototype.init.call(this);
+
+    useEqualWidth(); // if we get checkbox is true, set mutiple to true forcely
+
+    useReceive(['checkbox', 'multiple'], function () {
+      if (_this2.get('checkbox')) {
+        _this2.set('multiple', true, {
+          silent: true
+        });
+      }
+    });
+  };
+
+  _proto.getPlaceholder = function getPlaceholder() {
+    var _this$get = this.get(),
+        placeholder = _this$get.placeholder;
+
+    return isNullOrUndefined(placeholder) ? _$('请选择') : placeholder;
+  };
+
+  _proto.getLabel = function getLabel() {
+    var _this$get2 = this.get(),
+        data = _this$get2.data,
+        value = _this$get2.value,
+        multiple = _this$get2.multiple;
+
+    if (isNullOrUndefined(data) || isNullOrUndefined(value)) return;
+    var label;
+    var counts = 0;
+
+    var loop = function loop(children) {
+      return _findInstanceProperty(children).call(children, function (item) {
+        if (!multiple) {
+          if (item.key === value) {
+            label = item.label;
+            return true;
+          }
+        } else {
+          var index = value.indexOf(item.key);
+
+          if (index > -1) {
+            if (!label) label = []; // keep the order
+
+            label[index] = item.label;
+
+            if (++counts === value.length) {
+              return true;
+            }
+          }
+        }
+
+        if (item.children) {
+          return loop(item.children);
+        }
+
+        return false;
+      });
+    };
+
+    loop(data);
+    return label;
+  };
+
+  _proto.filter = function filter(data) {
+    var _context2, _context3;
+
+    var keywords = this.input.keywords.value;
+    if (!keywords) return true;
+
+    var _this$get3 = this.get(),
+        filter = _filterInstanceProperty(_this$get3);
+
+    if (filter) return filter(keywords, data);
+    keywords = keywords.toLowerCase();
+    return isStringOrNumber(data.label) && _includesInstanceProperty(_context2 = String(data.label).toLowerCase()).call(_context2, keywords) || _includesInstanceProperty(_context3 = String(data.key).toLowerCase()).call(_context3, keywords);
+  };
+
+  return TreeSelect;
+}(BaseSelect);
+TreeSelect.template = template;
+TreeSelect.typeDefs = typeDefs;
+TreeSelect.defaults = defaults;
+
+__decorate([bind], TreeSelect.prototype, "filter", null);
+
+export {normalize} from 'intact-vue-next';

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

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

package/components/treeSelect/index.spec.js

@@ -0,0 +1,210 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/treeSelect/demos/basic';
+import MultipleDemo from '~/components/treeSelect/demos/multiple';
+import CheckboxDemo from '~/components/treeSelect/demos/checkbox';
+import FilterDemo from '~/components/treeSelect/demos/filter';
+import { TreeSelect } from './';
+import { Form, FormItem } from '../form';
+import { Component } from 'intact-vue-next';
+import { mount, unmount, dispatchEvent, wait, getElement } from '../../test/utils';
+describe('TreeSelect', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('should select value correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, dropdown;
+
+    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.click();
+            _context.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-tree-select-menu');
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            dropdown.querySelector('.k-tree-text').click();
+            expect(instance.get('value')).to.eql('1');
+            _context.next = 10;
+            return wait(300);
+
+          case 10:
+            expect(getElement('.k-tree-select-menu')).to.be.undefined;
+
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, dropdown, _dropdown$querySelect, node1, node2;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(MultipleDemo), instance = _mount2[0], element = _mount2[1];
+            element.click();
+            _context2.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-tree-select-menu');
+            _dropdown$querySelect = dropdown.querySelectorAll('.k-tree-text'), node1 = _dropdown$querySelect[0], node2 = _dropdown$querySelect[1];
+            node1.click();
+            node2.click();
+            expect(instance.get('values')).to.eql(['1', '1.1']);
+            node1.click();
+            expect(instance.get('values')).to.eql(['1.1']);
+            instance.set('values', ['1']);
+            _context2.next = 14;
+            return wait(300);
+
+          case 14:
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 16:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('checkbox', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount3, instance, element, dropdown, texts, text211, text212;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount3 = mount(CheckboxDemo), instance = _mount3[0], element = _mount3[1];
+            element.click();
+            _context3.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-tree-select-menu');
+            texts = dropdown.querySelectorAll('.k-tree-text');
+            text211 = texts[5];
+            text212 = texts[6];
+            text211.click();
+            expect(instance.get('values')).to.eql(['2.1.1']);
+            text212.click();
+            expect(instance.get('values')).to.eql(['2']);
+            instance.set('values', []);
+            _context3.next = 15;
+            return wait();
+
+          case 15:
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 17:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('filterable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount4, instance, element, dropdown, input, _dropdown$querySelect2, text2;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount4 = mount(FilterDemo), instance = _mount4[0], element = _mount4[1];
+            element.click();
+            _context4.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-tree-select-menu');
+            input = element.querySelector('.k-input-inner');
+            input.value = 'first';
+            dispatchEvent(input, 'input');
+            _context4.next = 10;
+            return wait(300);
+
+          case 10:
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            _dropdown$querySelect2 = dropdown.querySelectorAll('.k-tree-text'), text2 = _dropdown$querySelect2[1];
+            text2.click();
+            expect(instance.get('value')).to.eql('2');
+
+          case 14:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('should not validate when click arrow of Tree', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var Demo, _mount5, instance, element, select;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context5;
+
+                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(_context5 = [this]).call(_context5, args)) || this;
+                _this.Form = Form;
+                _this.FormItem = FormItem;
+                _this.TreeSelect = TreeSelect;
+                return _this;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Form, FormItem, TreeSelect} = this;\n                <Form>\n                    <FormItem rules={{required: true}} value={this.get('value')}>\n                        <TreeSelect data={[{label: 'test', key: 'test'}]} v-model=\"value\" />\n                    </FormItem>\n                </Form>\n            ";
+            _mount5 = mount(Demo), instance = _mount5[0], element = _mount5[1];
+            select = element.querySelector('.k-select');
+            dispatchEvent(select, 'click');
+            _context6.next = 7;
+            return wait();
+
+          case 7:
+            dispatchEvent(select, 'focusout');
+            _context6.next = 10;
+            return wait(300);
+
+          case 10:
+            expect(element.querySelector('.k-form-error')).to.be.null;
+            dispatchEvent(select, 'click');
+            _context6.next = 14;
+            return wait(300);
+
+          case 14:
+            expect(element.querySelector('.k-form-error')).not.to.be.null;
+
+          case 15:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee5);
+  })));
+});
+
+export {normalize} from 'intact-vue-next';

package/components/treeSelect/index.vdt.js

@@ -0,0 +1,68 @@
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import { superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, createUnknownComponentVNode as _$cc, className as _$cn } from 'intact-vue-next';
+import { DropdownMenu } from '../dropdown';
+import { Tree } from '../tree';
+import { makeStyles } from './styles';
+export default function ($props, $blocks, $__proto__) {
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      data = _this$get.data,
+      uncorrelated = _this$get.uncorrelated,
+      load = _this$get.load,
+      showLine = _this$get.showLine,
+      defaultExpandAll = _this$get.defaultExpandAll,
+      checkbox = _this$get.checkbox,
+      multiple = _this$get.multiple,
+      filterable = _this$get.filterable;
+
+  var _this$value = this.value,
+      selectedKeys = _this$value.selectedKeys,
+      checkedKeys = _this$value.checkedKeys,
+      treeRef = _this$value.treeRef,
+      onChangeCheckedKeys = _this$value.onChangeCheckedKeys,
+      onChangeSelectedKeys = _this$value.onChangeSelectedKeys;
+  return _$su.call($this, null, function ($blocks) {
+    var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+
+    return (_$blocks['base-menu'] = function ($super) {
+      var _$cn2;
+
+      return _$cc(DropdownMenu, {
+        'className': _$cn((_$cn2 = {
+          'k-tree-select-menu': true
+        }, _$cn2[makeStyles()] = true, _$cn2)),
+        'children': _$cc(Tree, {
+          'ref': treeRef,
+          'data': data,
+          'selectedKeys': selectedKeys.value,
+          'ev-$change:selectedKeys': onChangeSelectedKeys,
+          'checkedKeys': checkedKeys.value,
+          'ev-$change:checkedKeys': onChangeCheckedKeys,
+          'defaultExpandAll': defaultExpandAll,
+          'uncorrelated': uncorrelated,
+          'checkbox': checkbox,
+          'multiple': multiple,
+          'selectable': !checkbox,
+          'load': load,
+          'filter': filterable ? _filterInstanceProperty(this) : null,
+          'ev-transitionEnd': this.position
+        }, null, treeRef)
+      });
+    }, __$blocks['base-menu'] = function ($super, data) {
+      var block = $blocks['base-menu'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['base-menu'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }), __$blocks;
+  }.call($this, $blocks), $__proto__);
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/treeSelect/styles.d.ts

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

package/components/treeSelect/styles.js

@@ -0,0 +1,19 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  maxHeight: "400px",
+  padding: "3px 6px"
+};
+var treeSelect;
+setDefault(function () {
+  treeSelect = deepDefaults(theme, {
+    treeSelect: defaults
+  }).treeSelect;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("min-width:auto;max-height:", treeSelect.maxHeight, ";padding:", treeSelect.padding, ";overflow:auto;&:not([class*=\"-active\"]){transition:left ", theme.transition, ",top ", theme.transition, ";}");
+}
+
+export {normalize} from 'intact-vue-next';

package/components/treeSelect/useLabel.d.ts

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

package/components/treeSelect/useLabel.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export {normalize} from 'intact-vue-next';

package/components/treeSelect/useValue.d.ts

@@ -0,0 +1,12 @@
+import { Key } from 'intact-vue-next';
+import type { Tree } from '../tree';
+export declare function useValue(): {
+    selectedKeys: import("../../hooks/useState").State<Key[]>;
+    checkedKeys: import("../../hooks/useState").State<Key[]>;
+    treeRef: import("intact").RefObject<Tree<Key>>;
+    onChangeCheckedKeys: () => void;
+    onChangeSelectedKeys: (keys: Key[]) => void;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/treeSelect/useValue.js

@@ -0,0 +1,71 @@
+import { useInstance, createRef } from 'intact-vue-next';
+import { useState } from '../../hooks/useState';
+import { isNullOrUndefined } from 'intact-shared';
+export function useValue() {
+  var instance = useInstance();
+  var selectedKeys = useState([]);
+  var checkedKeys = useState([]);
+  var treeRef = createRef();
+  instance.watch('value', setKeys);
+
+  function setKeys(v) {
+    if (!instance.get('multiple') && !instance.get('checkbox')) {
+      v = isNullOrUndefined(v) ? [] : [v];
+    } else if (isNullOrUndefined(v)) {
+      v = [];
+    }
+
+    selectedKeys.set(v);
+    checkedKeys.set(v);
+  }
+
+  function onChangeCheckedKeys() {
+    var keys = getAllCheckedKeys();
+    instance.set('value', keys);
+    checkedKeys.set(keys);
+  }
+
+  function getAllCheckedKeys() {
+    // if the parent has been checked, ignore the children
+    var keys = [];
+
+    var loop = function loop(nodes) {
+      for (var i = 0; i < nodes.length; i++) {
+        var node = nodes[i];
+
+        if (node.checked) {
+          keys.push(node.key);
+          continue;
+        }
+
+        if (node.children) {
+          loop(node.children);
+        }
+      }
+    };
+
+    loop(treeRef.value.getNodes());
+    return keys;
+  }
+
+  function onChangeSelectedKeys(keys) {
+    if (instance.get('multiple')) {
+      instance.set('value', keys);
+    } else {
+      instance.set('value', keys[0]);
+      instance.hide();
+    }
+
+    selectedKeys.set(keys);
+  }
+
+  return {
+    selectedKeys: selectedKeys,
+    checkedKeys: checkedKeys,
+    treeRef: treeRef,
+    onChangeCheckedKeys: onChangeCheckedKeys,
+    onChangeSelectedKeys: onChangeSelectedKeys
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/types.d.ts

@@ -0,0 +1,13 @@
+export declare type Sizes = 'large' | 'default' | 'small' | 'mini';
+export declare type Colors = 'default' | 'primary' | 'warning' | 'danger' | 'success';
+export interface CommonInputHTMLAttributes {
+    autocomplete?: string;
+    autofocus?: boolean;
+    form?: string;
+    name?: string;
+    required?: boolean;
+}
+export declare type Events<T> = Record<keyof T, true>;
+
+
+export {normalize} from 'intact-vue-next';

package/components/types.js

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

package/components/upload/ajaxUploader.d.ts

@@ -0,0 +1,22 @@
+export declare type Options = {
+    action?: string;
+    headers?: Record<string | number, string>;
+    data: any;
+    withCredentials?: boolean;
+    onProgress: (e: ProgressEvent, percent: number, xhr: XMLHttpRequest) => void;
+    onError: (err: RequestError, xhr: XMLHttpRequest) => void;
+    onSuccess: (res: any, xhr: XMLHttpRequest) => void;
+};
+export interface RequestError extends Error {
+    status: number;
+    method: string;
+    url: string;
+    response: any;
+    xhr: XMLHttpRequest;
+}
+export declare function request(options: Options): {
+    abort(): void;
+};
+
+
+export {normalize} from 'intact-vue-next';