@king-design/react 3.0.0-beta.0 → 3.0.0-beta.2

package/components/menu/index.spec.js

@@ -4,6 +4,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import { Component } from 'intact-react';
+import BasicDemo from '~/components/menu/demos/basic';
 import CollapseDemo from '~/components/menu/demos/collapse';
 import AccordionDemo from '~/components/menu/demos/accordion';
 import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
@@ -19,24 +20,29 @@ describe('Menu', function () {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            _mount = mount(CollapseDemo), instance = _mount[0], element = _mount[1];
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            _context.next = 3;
+            return wait();
+
+          case 3:
+            // shrink
             title = element.querySelector('.k-expanded .k-menu-title');
             title.click();
-            _context.next = 5;
+            _context.next = 7;
             return wait(500);
 
-          case 5:
+          case 7:
             expect(element.outerHTML).to.matchSnapshot();
             expect(instance.get('expandedKeys')).to.eql([]);
             title.click();
-            _context.next = 10;
+            _context.next = 12;
             return wait(500);
 
-          case 10:
+          case 12:
             expect(element.outerHTML).to.matchSnapshot();
             expect(instance.get('expandedKeys')).to.eql(['3']);
 
-          case 12:
+          case 14:
           case "end":
             return _context.stop();
         }
@@ -51,39 +57,44 @@ describe('Menu', function () {
         switch (_context2.prev = _context2.next) {
           case 0:
             _mount2 = mount(CollapseDemo), instance = _mount2[0], element = _mount2[1];
+            instance.set('collapse', false);
+            _context2.next = 4;
+            return wait();
+
+          case 4:
             expect(element.innerHTML).to.matchSnapshot();
             _element$querySelecto = element.querySelectorAll('.k-menu-title'), title = _element$querySelecto[0], disabledTitle = _element$querySelecto[1];
             title.click();
-            _context2.next = 6;
+            _context2.next = 9;
             return wait();
 
-          case 6:
+          case 9:
             expect(element.outerHTML).to.matchSnapshot();
             expect(instance.get('selectedKey')).to.eql('1');
             disabledTitle.click();
-            _context2.next = 11;
+            _context2.next = 14;
             return wait();
 
-          case 11:
+          case 14:
             expect(element.outerHTML).to.matchSnapshot();
             expect(instance.get('selectedKey')).to.eql('1');
             subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title');
             subTitle.click();
-            _context2.next = 17;
+            _context2.next = 20;
             return wait();
 
-          case 17:
+          case 20:
             expect(element.outerHTML).to.matchSnapshot();
             expect(instance.get('selectedKey')).to.eql('3-1'); // clear
 
             instance.set('selectedKey', '');
-            _context2.next = 22;
+            _context2.next = 25;
             return wait();
 
-          case 22:
+          case 25:
             expect(element.querySelector('.k-highlighted')).to.be.null;
 
-          case 23:
+          case 26:
           case "end":
             return _context2.stop();
         }

package/components/menu/item.d.ts

@@ -1,5 +1,6 @@
 import { Component, TypeDefs, Key } from 'intact-react';
 import { Menu } from './menu';
+import { Events } from '../types';
 export interface MenuItemProps {
     key: Key;
     to?: string | object;
@@ -14,6 +15,7 @@ export declare const MENU_ITEM = "MenuItem";
 export declare class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<MenuItemProps>>;
+    static events: Events<MenuItemEvents>;
     rootMenu: Menu<Key>;
     parentMenu: Menu<Key>;
     parentMenuItem: MenuItem | null;

package/components/menu/item.js

@@ -19,6 +19,10 @@ var typeDefs = {
   dot: Boolean,
   disabled: Boolean
 };
+var events = {
+  click: true,
+  select: true
+};
 export var MENU_ITEM = 'MenuItem';
 export var MenuItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(MenuItem, _Component);
@@ -76,5 +80,6 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
 }(Component);
 MenuItem.template = template;
 MenuItem.typeDefs = typeDefs;
+MenuItem.events = events;
 
 __decorate([bind], MenuItem.prototype, "onClick", null);

package/components/menu/item.vdt.js

@@ -11,6 +11,9 @@ import { makeItemStyles, makeTitleStyles } from './styles';
 var _$tmp0 = {
   'className': 'k-menu-dot ion-record'
 };
+var _$tmp1 = {
+  'className': 'k-menu-arrow k-icon-down'
+};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -56,7 +59,7 @@ export default function ($props, $blocks, $__proto__) {
   var title = function title(children) {
     var _$cn2;
 
-    return _$ce(2, 'div', [showDot ? _$cc(Icon, _$tmp0) : undefined, _$ce(2, 'div', children, 0, 'k-menu-name'), subMenuVNode ? _$ce(2, 'i', null, 1, 'k-menu-arrow ion-ios-arrow-down') : undefined], 0, _$cn((_$cn2 = {
+    return _$ce(2, 'div', [showDot ? _$cc(Icon, _$tmp0) : undefined, _$ce(2, 'div', children, 0, 'k-menu-name'), subMenuVNode ? _$cc(Icon, _$tmp1) : undefined], 0, _$cn((_$cn2 = {
       'k-menu-title': true
     }, _$cn2[makeTitleStyles()] = true, _$cn2)), {
       'ev-click': _this.onClick.bind(_this, subMenuVNode)

package/components/pagination/index.d.ts

@@ -8,7 +8,7 @@ export interface PaginationProps {
     value?: number;
     limit?: number;
     limits?: number[];
-    noBorder?: boolean;
+    flat?: boolean;
     simple?: boolean;
     showTotal?: boolean;
     showGoto?: boolean;

package/components/pagination/index.js

@@ -12,7 +12,7 @@ var typeDefs = {
   value: Number,
   limit: Number,
   limits: Array,
-  noBorder: Boolean,
+  flat: Boolean,
   simple: Boolean,
   showTotal: Boolean,
   showGoto: Boolean,
@@ -105,7 +105,8 @@ export var Pagination = /*#__PURE__*/function (_Component) {
 
     if (page > totalPages) {
       page = totalPages;
-    }
+    } // perhaps totalPages is 0
+
 
     if (page < 1) {
       page = 1;

package/components/pagination/index.spec.js

@@ -1,10 +1,14 @@
+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/pagination/demos/basic';
 import GotoDemo from '~/components/pagination/demos/goto';
 import CurrentDemo from '~/components/pagination/demos/current';
 import DisableDemo from '~/components/pagination/demos/disable';
 import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import { Component } from 'intact-react';
+import { Pagination } from '.';
 describe('Pagination', function () {
   afterEach(function () {
     return unmount();
@@ -169,4 +173,49 @@ describe('Pagination', function () {
       }
     }, _callee4);
   })));
+  it('should not set value to 0 when total is 0 on intialization', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var Demo, _mount5, instance;
+
+    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.Pagination = Pagination;
+                return _this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  page: 1
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const { Pagination } = this;\n                <Pagination total={0} v-model=\"page\" />\n            ";
+            _mount5 = mount(Demo), instance = _mount5[0]; // await wait();
+
+            expect(instance.get('page')).to.eql(1);
+
+          case 4:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee5);
+  })));
 });

package/components/pagination/index.vdt.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
 import { createCommentVNode as _$ccv, createUnknownComponentVNode as _$cc, createElementVNode as _$ce, createTextVNode as _$ct, createVNode as _$cv, className as _$cn, map as _$ma } from 'intact-react';
 import { getRestProps, mapChildren } from '../utils';
 import { ButtonGroup, Button } from '../button';
@@ -8,10 +9,10 @@ import { Icon } from '../icon';
 import { _$ } from '../../i18n';
 import { makeStyles } from './styles';
 var _$tmp0 = {
-  'className': 'k-icon-arrow-left'
+  'className': 'k-icon-left'
 };
 var _$tmp1 = {
-  'className': 'k-icon-arrow-right'
+  'className': 'k-icon-right'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
@@ -23,7 +24,7 @@ export default function ($props, $blocks, $__proto__) {
   var _this$get = this.get(),
       total = _this$get.total,
       size = _this$get.size,
-      noBorder = _this$get.noBorder,
+      flat = _flatInstanceProperty(_this$get),
       simple = _this$get.simple,
       className = _this$get.className,
       showTotal = _this$get.showTotal,
@@ -39,13 +40,8 @@ export default function ($props, $blocks, $__proto__) {
   if (!total) return _$ccv(' pagination ');
   var classNameObj = (_classNameObj = {
     'k-pagination': true
-  }, _classNameObj[className] = className, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-no-border'] = noBorder, _classNameObj['k-simple'] = simple, _classNameObj[makeStyles()] = true, _classNameObj);
-  var type = 'default';
-
-  if (noBorder || simple) {
-    type = 'none';
-  }
-
+  }, _classNameObj[className] = className, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-flat'] = flat, _classNameObj['k-simple'] = simple, _classNameObj[makeStyles()] = true, _classNameObj);
+  var type = flat ? 'flat' : simple ? 'none' : 'default';
   var totalPages = Math.ceil(total / limit) || 0;
 
   var paginationButton = function paginationButton(page) {
@@ -165,6 +161,7 @@ export default function ($props, $blocks, $__proto__) {
     'value': $this.get('value')
   }), !simple ? [showLimits ? _$ce(2, 'div', _$cc(Select, {
     'size': size,
+    'flat': flat,
     'children': _$ma(limits, function ($value, $key) {
       return _$cc(Option, {
         'value': $value,
@@ -177,10 +174,11 @@ export default function ($props, $blocks, $__proto__) {
       $this.set('limit', $v);
     },
     'value': $this.get('limit')
-  }), 2, 'k-pagination-limits') : undefined, showGoto ? _$ce(2, 'div', [_$ce(2, 'span', _$('跳至'), 0, 'c-middle'), _$cc(Input, {
+  }), 2, 'k-pagination-limits') : undefined, showGoto ? _$ce(2, 'div', [_$ce(2, 'span', _$('前往'), 0, 'c-middle'), _$cc(Input, {
     'size': size,
     'value': value,
-    'ev-change': this.goto
+    'ev-change': this.goto,
+    'flat': flat
   }), _$ce(2, 'span', _$('页'), 0, 'c-middle')], 4, 'k-pagination-goto') : undefined] : undefined]);
 }
 ;

package/components/pagination/styles.js

@@ -68,5 +68,5 @@ export function makeStyles() {
     var styles = pagination[size];
     var btnStyles = button[size];
     return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";.k-btn{margin-right:", styles.btnGap, ";min-width:", btnStyles.height, ";.k-icon{font-size:", styles.iconFontSize, ";}}}");
-  }), "&.k-no-border{.k-select{&,&:hover,&.k-show{border-color:transparent;}}}&.k-simple{.k-btn{margin:0;}.k-input-inner{text-align:center;}.k-pagination-text{vertical-align:middle;}}");
+  }), "&.k-flat{.k-select{&,&:hover,&.k-show{border-color:transparent;}}}&.k-simple{.k-btn{margin:0;}.k-input-inner{text-align:center;}.k-pagination-text{vertical-align:middle;}}");
 }

package/components/popover/content.d.ts

@@ -0,0 +1,19 @@
+import { TooltipContent, TooltipContentProps, TooltipContentEvents, TooltipContentBlocks } from "../tooltip/content";
+import { TypeDefs, Children } from 'intact-react';
+export interface PopoverContentProps extends TooltipContentProps {
+    type?: 'info' | 'success' | 'warning' | 'error';
+    title?: Children;
+    content?: Children;
+}
+export interface PopoverContentEvents extends TooltipContentEvents {
+}
+export interface PopoverContentBlocks extends TooltipContentBlocks {
+    title: null;
+    content: null;
+    footer: null;
+}
+export declare class PopoverContent extends TooltipContent<PopoverContentProps, PopoverContentEvents, PopoverContentBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<PopoverContentProps>>;
+    protected isEmptyChildren: boolean;
+}

package/components/popover/content.js

@@ -0,0 +1,31 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { TooltipContent } from "../tooltip/content";
+import { VNode } from 'intact-react';
+import template from "./content.vdt";
+var typeDefs = {
+  type: ['info', 'error', 'success', 'warning'],
+  title: [String, Number, VNode, Array],
+  content: [String, Number, VNode, Array]
+};
+export var PopoverContent = /*#__PURE__*/function (_TooltipContent) {
+  _inheritsLoose(PopoverContent, _TooltipContent);
+
+  function PopoverContent() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _TooltipContent.call.apply(_TooltipContent, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.isEmptyChildren = false;
+    return _this;
+  }
+
+  return PopoverContent;
+}(TooltipContent);
+PopoverContent.template = template;
+PopoverContent.typeDefs = typeDefs;

package/components/popover/content.vdt.js

@@ -0,0 +1,68 @@
+import { superCall as _$su, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em, createElementVNode as _$ce, createUnknownComponentVNode as _$cc, noop as _$no } from 'intact-react';
+import { Icon } from '../icon';
+import makeStyles from "./styles";
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      type = _this$get.type,
+      title = _this$get.title,
+      content = _this$get.content;
+
+  var iconMap = {
+    info: 'information-fill',
+    warning: 'warning-fill',
+    success: 'success-fill',
+    error: 'error-fill'
+  };
+  var classNameObj = (_classNameObj = {}, _classNameObj[makeStyles()] = true, _classNameObj['k-popover'] = true, _classNameObj);
+  return _$su.call($this, {
+    'className': _$cn(classNameObj)
+  }, function ($blocks) {
+    var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+
+    return (_$blocks['body'] = function ($super) {
+      return [title || $blocks.title ? _$ce(2, 'div', [type ? _$cc(Icon, {
+        'className': _$cn("k-icon-" + iconMap[type] + " k-popover-icon"),
+        'color': type === 'error' ? 'danger' : type,
+        'size': 'large'
+      }) : undefined, (_$blocks['title'] = function ($super) {
+        return title;
+      }, __$blocks['title'] = function ($super, data) {
+        var block = $blocks['title'];
+
+        var callBlock = function callBlock() {
+          return _$blocks['title'].call($this, $super, data);
+        };
+
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }, __$blocks['title'](_$no))], 0, 'k-popover-title') : undefined, content || $blocks.content ? _$ce(2, 'div', (_$blocks['content'] = function ($super) {
+        return content;
+      }, __$blocks['content'] = function ($super, data) {
+        var block = $blocks['content'];
+
+        var callBlock = function callBlock() {
+          return _$blocks['content'].call($this, $super, data);
+        };
+
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }, __$blocks['content'](_$no)), 0, 'k-popover-content') : undefined];
+    }, __$blocks['body'] = function ($super, data) {
+      var block = $blocks['body'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['body'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }), __$blocks;
+  }.call($this, $blocks), $__proto__);
+}
+;

package/components/popover/index.d.ts

@@ -0,0 +1,16 @@
+import { Tooltip } from "../tooltip/tooltip";
+import { TooltipProps, TooltipEvents, TooltipBlocks } from "../tooltip/tooltip";
+import { PopoverContentProps, PopoverContentBlocks } from './content';
+export interface PopoverProps extends TooltipProps, PopoverContentProps {
+    confirm?: never;
+    theme?: never;
+    hoverable?: never;
+    trigger?: never;
+}
+export interface PopoverEvents extends TooltipEvents {
+}
+export interface PopoverBlocks extends TooltipBlocks, PopoverContentBlocks {
+}
+export declare class _Popover extends Tooltip<PopoverProps, PopoverEvents, PopoverBlocks> {
+}
+export declare const Popover: typeof _Popover;

package/components/popover/index.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "type", "title", "content", "$blocks"];
+import { createVNode as h, Component } from 'intact-react';
+import { Tooltip } from "../tooltip/tooltip";
+import { PopoverContent } from './content';
+import { noop } from 'intact-shared';
+
+function Wrapper(props) {
+  var children = props.children,
+      type = props.type,
+      title = props.title,
+      content = props.content,
+      $blocks = props.$blocks,
+      rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+  if ($blocks) {
+    if ($blocks.title) {
+      title = $blocks.title(noop);
+    }
+
+    if ($blocks.content) {
+      content = $blocks.content(noop);
+    }
+  }
+
+  var contentVNode = h(PopoverContent, {
+    type: type,
+    title: title,
+    content: content,
+    $blocks: $blocks
+  });
+  return h(Tooltip, _extends({
+    children: [children, contentVNode]
+  }, rest, {
+    confirm: true,
+    theme: 'light',
+    hoverable: true,
+    trigger: 'click'
+  }));
+}
+
+var functionalWrapper = Component.functionalWrapper;
+export var Popover = functionalWrapper ? functionalWrapper(Wrapper) : Wrapper;

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

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