@king-design/intact 2.0.0-beta.0

package/es/components/message/message.js

@@ -0,0 +1,110 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, VNode, render, createVNode as h } from 'intact';
+import template from './message.vdt';
+import { Messages } from './messages';
+import { useDelayClose } from '../../hooks/useDelayClose';
+import { isObject } from 'intact-shared';
+import { bind } from '../utils';
+var typeDefs = {
+  content: [String, VNode],
+  duration: Number,
+  type: ['info', 'error', 'success', 'warning'],
+  closable: Boolean,
+  hideIcon: Boolean
+};
+var id = 0;
+
+var defaults = function defaults() {
+  return {
+    duration: 5000,
+    type: 'info',
+    closable: true
+  };
+};
+
+var messages = null;
+export var Message = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Message, _Component);
+
+  function Message() {
+    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.delayClose = useDelayClose(_this.close, _this.get('duration'));
+    return _this;
+  }
+
+  Message.notice = function notice(content, duration, type) {
+    if (duration === void 0) {
+      duration = 5000;
+    }
+
+    if (type === void 0) {
+      type = 'info';
+    }
+
+    if (!messages) {
+      var container = document.createElement('div');
+      document.body.append(container);
+      render(h(Messages, {
+        ref: function ref(i) {
+          return messages = i;
+        }
+      }), container);
+    }
+
+    if (isObject(content) && !content.tag) {
+      content = _extends({}, content, {
+        type: type,
+        key: id++
+      });
+    } else {
+      content = {
+        content: content,
+        duration: duration,
+        type: type,
+        key: id++
+      };
+    }
+
+    messages.notice(h(Message, content));
+  };
+
+  Message.info = function info(content, duration) {
+    Message.notice(content, duration, 'info');
+  };
+
+  Message.error = function error(content, duration) {
+    Message.notice(content, duration, 'error');
+  };
+
+  Message.success = function success(content, duration) {
+    Message.notice(content, duration, 'success');
+  };
+
+  Message.warning = function warning(content, duration) {
+    Message.notice(content, duration, 'warning');
+  };
+
+  var _proto = Message.prototype;
+
+  _proto.close = function close() {
+    messages.delete(this.get('key'));
+  };
+
+  return Message;
+}(Component);
+Message.template = template;
+Message.typeDefs = typeDefs;
+Message.defaults = defaults;
+
+__decorate([bind], Message.prototype, "close", null);

package/es/components/message/message.vdt.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, createUnknownComponentVNode as _$cc } from 'intact';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { getRestProps } from '../utils';
+import { makeMessageStyles } from './styles';
+var _$tmp0 = {
+  'className': 'ion-ios-close-empty'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj, _$cn2;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      type = _this$get.type,
+      content = _this$get.content,
+      children = _this$get.children,
+      closable = _this$get.closable,
+      hideIcon = _this$get.hideIcon;
+
+  var classNameObj = (_classNameObj = {
+    "k-message": true
+  }, _classNameObj["k-" + type] = type !== 'info', _classNameObj[makeMessageStyles()] = true, _classNameObj);
+  var iconMap = {
+    info: 'information',
+    warning: 'alert',
+    success: 'truth-circled',
+    error: 'fault'
+  };
+  return _$cv('div', _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj),
+    'ev-mouseenter': this.delayClose.onMouseEnter,
+    'ev-mouseleave': this.delayClose.onMouseLeave
+  }), _$ce(2, 'div', [_$ce(2, 'div', [!hideIcon ? _$cc(Icon, {
+    'className': _$cn((_$cn2 = {}, _$cn2["k-icon-" + (iconMap[type] || iconMap.info)] = true, _$cn2["k-message-icon"] = true, _$cn2))
+  }) : undefined, typeof content === 'string' || typeof content === 'number' ? _$ce(2, 'div', null, 1, 'k-message-content', {
+    'innerHTML': content
+  }) : _$ce(2, 'div', children, 0, 'k-message-content')], 0, _$cn({
+    "k-message-wrapper": true,
+    "k-with-icon": !hideIcon
+  })), closable ? _$cc(Button, {
+    'type': 'none',
+    'icon': true,
+    'className': 'k-message-close',
+    'ev-click': this.close,
+    'children': _$cc(Icon, _$tmp0)
+  }) : undefined], 0, 'k-message-container'));
+}
+;

package/es/components/message/messages.d.ts

@@ -0,0 +1,8 @@
+import { Component, VNodeComponentClass } from 'intact';
+import type { Message } from './message';
+export declare class Messages extends Component {
+    static template: string | import("intact").Template<any>;
+    private messages;
+    notice(message: VNodeComponentClass<Message>): void;
+    delete(key: number | string): void;
+}

package/es/components/message/messages.js

@@ -0,0 +1,49 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find-index";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { Component } from 'intact';
+import template from './messages.vdt';
+export var Messages = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Messages, _Component);
+
+  function Messages() {
+    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.messages = [];
+    return _this;
+  }
+
+  var _proto = Messages.prototype;
+
+  _proto.notice = function notice(message) {
+    this.messages.push(message);
+    this.forceUpdate();
+  };
+
+  _proto.delete = function _delete(key) {
+    var messages = this.messages;
+
+    var index = _findIndexInstanceProperty(messages).call(messages, function (message) {
+      return message.key === key;
+    });
+
+    if (process.env.NODE_ENV !== 'production' && !~index) {
+      throw new Error('You are removing a message that does not exist.');
+    }
+
+    _spliceInstanceProperty(messages).call(messages, index, 1);
+
+    this.forceUpdate();
+  };
+
+  return Messages;
+}(Component);
+Messages.template = template;

package/es/components/message/messages.vdt.js

@@ -0,0 +1,18 @@
+import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, map as _$ma, className as _$cn } from 'intact';
+import { TransitionGroup, Transition } from 'intact';
+import { makeMessagesStyles } from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _$cn2;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  return _$ce(2, 'div', _$cc(TransitionGroup, {
+    'children': _$ma(this.messages, function ($value, $key) {
+      return $value;
+    }, $this)
+  }), 2, _$cn((_$cn2 = {
+    "k-messages": true
+  }, _$cn2[makeMessagesStyles()] = true, _$cn2)));
+}
+;

package/es/components/message/styles.d.ts

@@ -0,0 +1,3 @@
+import '../../styles/global';
+export declare function makeMessagesStyles(): string;
+export declare function makeMessageStyles(): string;

package/es/components/message/styles.js

@@ -0,0 +1,60 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults, palette } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  top: "10px",
+  transform: "translateY(-10px)",
+
+  get bgColor() {
+    return theme.color.bg;
+  },
+
+  get borderRadius() {
+    return theme.borderRadius;
+  },
+
+  gap: "10px",
+  boxShadow: 'none',
+  padding: "7px 33px 8px 8px",
+  closeFontSize: "26px",
+  fontSize: '12px',
+
+  get color() {
+    return theme.color.ghost;
+  },
+
+  minWidth: '400px',
+  maxWidth: '700px',
+  minHeight: '32px',
+  textAlign: 'left',
+
+  get border() {
+    return "1px solid " + theme.color.border;
+  },
+
+  icon: {
+    color: "inherit",
+    fontSize: "14px",
+    left: "16px",
+    top: "8px"
+  }
+};
+var message;
+setDefault(function () {
+  message = deepDefaults(theme, {
+    message: defaults
+  }).message;
+});
+export function makeMessagesStyles() {
+  return /*#__PURE__*/css("position:fixed;top:", message.top, ";width:100%;pointer-events:none;z-index:", theme.maxZIndex + 1, ";");
+}
+export function makeMessageStyles() {
+  var _context;
+
+  return /*#__PURE__*/css("text-align:center;width:100%;font-size:", message.fontSize, ";color:", message.color, ";.k-message-container{display:inline-block;box-shadow:", message.boxShadow, ";background:", message.bgColor, ";border-radius:", message.borderRadius, ";margin-bottom:", message.gap, ";pointer-events:all;min-width:", message.minWidth, ";max-width:", message.maxWidth, ";position:relative;text-align:", message.textAlign, ";border:", message.border, ";min-height:", message.minHeight, ";}.k-message-wrapper{position:relative;display:inline-block;&.k-with-icon{padding-left:calc(", message.icon.left, " + 14px);}}.k-message-content{display:inline-block;padding:", message.padding, ";vertical-align:middle;word-break:break-word;word-wrap:break-word;}.k-message-close{vertical-align:middle;position:absolute;right:0;top:0;.k-icon{font-size:", message.closeFontSize, ";}}.k-message-icon{position:absolute;left:", message.icon.left, ";top:", message.icon.top, ";color:", message.icon.color, ";font-size:", message.icon.fontSize, ";}", _mapInstanceProperty(_context = ['error', 'success', 'warning']).call(_context, function (type) {
+    var color = theme.color[type === 'error' ? 'danger' : type];
+    return /*#__PURE__*/css("&.k-", type, "{.k-message-container{color:", color, ";border-color:", color, ";background:", palette(color, -4), ";}.k-message-close{color:", color, ";&:hover{color:", palette(color, 1), ";}}}");
+  }), "&.transition-enter-from,&.transition-leave-to{opacity:0;transform:", message.transform, ";}&.transition-enter-active,&.transition-leave-active{transition:transform ", theme.transition, ",opacity ", theme.transition, ";}&.transition-move{transition:transform ", theme.transition, ";}");
+}

package/es/components/pagination/index.d.ts

@@ -0,0 +1,37 @@
+import { Component, TypeDefs } from 'intact';
+import { Sizes } from '../../styles/utils';
+import type { Events } from '../types';
+export interface PaginationProps {
+    size?: Sizes;
+    counts?: number | string;
+    total?: number;
+    value?: number;
+    limit?: number;
+    limits?: number[];
+    noBorder?: boolean;
+    simple?: boolean;
+    showTotal?: boolean;
+    showGoto?: boolean;
+    showLimits?: boolean;
+}
+export interface PaginationEvents {
+    change: [PaginationChangeData];
+}
+export declare type PaginationChangeData = {
+    limit: number;
+    value: number;
+};
+export declare class Pagination extends Component<PaginationProps, PaginationEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<PaginationProps>>;
+    static defaults: () => Partial<PaginationProps>;
+    static events: Events<PaginationEvents>;
+    private ignore;
+    init(): void;
+    changePage(page: number): void;
+    private prev;
+    private next;
+    private fastPrev;
+    private fastNext;
+    private goto;
+}

package/es/components/pagination/index.js

@@ -0,0 +1,165 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component } from 'intact';
+import template from './index.vdt';
+import { sizes } from '../../styles/utils';
+import { bind } from '../utils';
+var typeDefs = {
+  size: sizes,
+  counts: [Number, String],
+  total: Number,
+  value: Number,
+  limit: Number,
+  limits: Array,
+  noBorder: Boolean,
+  simple: Boolean,
+  showTotal: Boolean,
+  showGoto: Boolean,
+  showLimits: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    size: 'default',
+    counts: 7,
+    total: 0,
+    value: 1,
+    limit: 10,
+    limits: [10, 20, 50],
+    showTotal: true,
+    showLimits: true
+  };
+};
+
+var events = {
+  change: true
+};
+export var Pagination = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Pagination, _Component);
+
+  function Pagination() {
+    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.ignore = false;
+    return _this;
+  }
+
+  var _proto = Pagination.prototype;
+
+  _proto.init = function init() {
+    var _this2 = this;
+
+    // avoid setting incorrect value
+    this.changePage(this.get('value'));
+    this.watch('limit', function (v) {
+      var oldvalue = _this2.get('value');
+
+      if (oldvalue !== 1) {
+        // we should not silent it, but let it trigger change event
+        // to sync the value to parent
+        // set a flag to indicate that this set will be ignored to trigger
+        // change event again in bellow $change:value callback
+        // #341
+        _this2.ignore = true;
+
+        _this2.set('value', 1);
+
+        _this2.ignore = false;
+      }
+
+      _this2.trigger('change', {
+        limit: v,
+        value: 1
+      });
+    }, {
+      inited: true
+    });
+    this.watch('value', function (v) {
+      if (_this2.ignore) return;
+
+      _this2.trigger('change', {
+        limit: _this2.get('limit'),
+        value: v
+      });
+    }, {
+      inited: true
+    });
+  };
+
+  _proto.changePage = function changePage(page) {
+    var _this$get = this.get(),
+        total = _this$get.total,
+        limit = _this$get.limit;
+
+    var totalPages = Math.ceil(total / limit);
+
+    if (page > totalPages) {
+      page = totalPages;
+    }
+
+    if (page < 1) {
+      page = 1;
+    }
+
+    if (this.get('value') !== page) {
+      this.set('value', page);
+    }
+  };
+
+  _proto.prev = function prev() {
+    this.changePage(this.get('value') - 1);
+  };
+
+  _proto.next = function next() {
+    this.changePage(this.get('value') + 1);
+  };
+
+  _proto.fastPrev = function fastPrev() {
+    var _this$get2 = this.get(),
+        value = _this$get2.value,
+        counts = _this$get2.counts;
+
+    var page = value - Math.ceil(Number(counts) / 2);
+    this.changePage(page);
+  };
+
+  _proto.fastNext = function fastNext() {
+    var _this$get3 = this.get(),
+        value = _this$get3.value,
+        counts = _this$get3.counts;
+
+    var page = value + Math.ceil(Number(counts) / 2);
+    this.changePage(page);
+  };
+
+  _proto.goto = function goto(e) {
+    var value = parseInt(e.target.value) || 1;
+    this.changePage(value);
+  };
+
+  return Pagination;
+}(Component);
+Pagination.template = template;
+Pagination.typeDefs = typeDefs;
+Pagination.defaults = defaults;
+Pagination.events = events;
+
+__decorate([bind], Pagination.prototype, "changePage", null);
+
+__decorate([bind], Pagination.prototype, "prev", null);
+
+__decorate([bind], Pagination.prototype, "next", null);
+
+__decorate([bind], Pagination.prototype, "fastPrev", null);
+
+__decorate([bind], Pagination.prototype, "fastNext", null);
+
+__decorate([bind], Pagination.prototype, "goto", null);

package/es/components/pagination/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/es/components/pagination/index.spec.js

@@ -0,0 +1,144 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/pagination/demos/basic';
+import GotoDemo from '~/components/pagination/demos/goto';
+import CurrentDemo from '~/components/pagination/demos/current';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+describe('Pagination', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, pagination, btns, prev, next;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            pagination = element.querySelector('.k-pagination');
+            btns = pagination.querySelectorAll('.k-btns .k-btn');
+            prev = btns[0];
+            next = btns[btns.length - 1];
+            prev.click();
+            _context.next = 8;
+            return wait();
+
+          case 8:
+            expect(pagination.innerHTML).to.matchSnapshot();
+            expect(instance.get('value1')).to.eql(1);
+            next.click();
+            next.click();
+            _context.next = 14;
+            return wait();
+
+          case 14:
+            expect(pagination.innerHTML).to.matchSnapshot();
+            expect(instance.get('value1')).to.eql(3);
+            prev.click();
+            _context.next = 19;
+            return wait();
+
+          case 19:
+            expect(pagination.innerHTML).to.matchSnapshot();
+            expect(instance.get('value1')).to.eql(2);
+            pagination.querySelector('.k-pagination-ellipsis').click();
+            _context.next = 24;
+            return wait();
+
+          case 24:
+            expect(pagination.innerHTML).to.matchSnapshot();
+            expect(instance.get('value1')).to.eql(6);
+            pagination.querySelector('.k-pagination-ellipsis').click();
+            _context.next = 29;
+            return wait();
+
+          case 29:
+            expect(pagination.innerHTML).to.matchSnapshot();
+            expect(instance.get('value1')).to.eql(2); // change limit
+
+            instance.refs.__test.set('limit', 20);
+
+            _context.next = 34;
+            return wait();
+
+          case 34:
+            expect(pagination.innerHTML).to.matchSnapshot();
+            expect(instance.get('value1')).to.eql(1);
+
+          case 36:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('goto test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, input;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(GotoDemo), instance = _mount2[0], element = _mount2[1];
+            input = element.querySelector('.k-input-inner');
+            input.value = '45';
+            dispatchEvent(input, 'change');
+            _context2.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.eql(20);
+            input.value = '-10';
+            dispatchEvent(input, 'change');
+            _context2.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.eql(1);
+
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should trigger change event once', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var fn, _mount3, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            fn = CurrentDemo.prototype._fetch2 = sinon.spy(function () {
+              instance.forceUpdate();
+            });
+            _mount3 = mount(CurrentDemo), instance = _mount3[0], element = _mount3[1];
+            instance.set('value2', 2);
+            _context3.next = 5;
+            return wait();
+
+          case 5:
+            expect(fn.callCount).to.eql(1);
+            instance.set('limit', 50);
+            _context3.next = 9;
+            return wait();
+
+          case 9:
+            expect(fn.callCount).to.eql(2);
+            expect(fn.lastCall.lastArg).to.eql({
+              value: 1,
+              limit: 50
+            });
+
+          case 11:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+});