@king-design/vue 2.1.1 → 3.0.0-beta.1

package/components/message/styles.js

@@ -9,6 +9,7 @@ var defaults = {
   },
 
   top: "10px",
+  left: "0px",
   transform: "translateY(-10px)",
 
   get bgColor() {
@@ -22,11 +23,10 @@ var defaults = {
   gap: "10px",
   boxShadow: 'none',
   padding: "7px 33px 8px 8px",
-  closeFontSize: "26px",
   fontSize: '12px',
 
   get color() {
-    return theme.color.ghost;
+    return theme.color.text;
   },
 
   minWidth: '400px',
@@ -39,10 +39,10 @@ var defaults = {
   },
 
   icon: {
-    color: "inherit",
-    fontSize: "14px",
+    // color: `inherit`,
+    fontSize: "18px",
     left: "16px",
-    top: "8px"
+    top: "7px"
   }
 };
 var message;
@@ -52,13 +52,13 @@ setDefault(function () {
   }).message;
 });
 export function makeMessagesStyles() {
-  return /*#__PURE__*/css("position:fixed;top:", message.top, ";width:100%;pointer-events:none;z-index:", theme.maxZIndex + 1, ";");
+  return /*#__PURE__*/css("position:fixed;top:", message.top, ";left:", message.left, ";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;&:hover{background:none;}.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) {
+  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, ";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, ";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;&:hover{background:none;}}.k-message-icon{position:absolute;left:", message.icon.left, ";top:", message.icon.top, ";font-size:", message.icon.fontSize, ";}", _mapInstanceProperty(_context = ['info', '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), ";}}}");
+    return /*#__PURE__*/css("&.k-", type, "{.k-message-container{background:", palette(color, -4), ";}.k-message-icon{color:", color, ";}}");
   }), "&.transition-enter-from,&.transition-leave-to{opacity:0;transform:", message.transform, ";}&.transition-enter-active,&.transition-leave-active{transition:transform ", message.transition, ",opacity ", message.transition, ";}&.transition-move{transition:transform ", message.transition, ";}");
 }

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,

package/components/pagination/index.spec.js

@@ -6,11 +6,13 @@ 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, dispatchEvent, wait } from '../../test/utils';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
 import { Component } from 'intact-vue-next';
 import { Pagination } from '.';
 describe('Pagination', function () {
-  // afterEach(() => unmount());
+  afterEach(function () {
+    return unmount();
+  });
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, pagination, btns, prev, next;
 

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-vue-next';
 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': 'ion-ios-arrow-left'
+  'className': 'k-icon-arrow-left'
 };
 var _$tmp1 = {
-  'className': 'ion-ios-arrow-right'
+  'className': 'k-icon-arrow-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) {
@@ -140,19 +136,21 @@ export default function ($props, $blocks, $__proto__) {
 
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
-  }, getRestProps(this)), [_$cc(ButtonGroup, {
+  }, getRestProps(this)), [showTotal && !simple ? _$ce(2, 'div', _$('共 {n} 条', {
+    n: total
+  }), 0, 'k-pagination-total') : undefined, _$cc(ButtonGroup, {
     'checkType': 'radio',
     'children': [_$cc(Button, {
       'icon': true,
       'size': size,
-      'type': type,
+      'type': 'none',
       'disabled': value <= 1 || !!(disablePage && disablePage(value - 1, limit)),
       'ev-click': this.prev,
       'children': _$cc(Icon, _$tmp0)
     }), paginationItems, _$cc(Button, {
       'icon': true,
       'size': size,
-      'type': type,
+      'type': 'none',
       'disabled': value >= totalPages || !!(disablePage && disablePage(value + 1, limit)),
       'ev-click': this.next,
       'children': _$cc(Icon, _$tmp1)
@@ -163,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,
@@ -175,12 +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
-  }), _$ce(2, 'span', _$('页'), 0, 'c-middle')], 4, 'k-pagination-goto') : undefined, showTotal ? _$ce(2, 'div', _$('共 {n} 条', {
-    n: total
-  }), 0, 'k-pagination-total') : undefined] : undefined]);
+    'ev-change': this.goto,
+    'flat': flat
+  }), _$ce(2, 'span', _$('页'), 0, 'c-middle')], 4, 'k-pagination-goto') : undefined] : undefined]);
 }
 ;

package/components/pagination/styles.js

@@ -23,7 +23,16 @@ var defaults = deepDefaults({
   gap: '16px',
   btn: {
     gap: '6px',
-    padding: '0 3px'
+    padding: '0 3px',
+
+    get borderRadius() {
+      return theme.borderRadius;
+    },
+
+    get hoverBgColor() {
+      return theme.color.hoverBg;
+    }
+
   },
   // goto
   goto: {
@@ -55,9 +64,9 @@ setDefault(function () {
   }).pagination;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";.k-pagination-limits,.k-pagination-goto,.k-pagination-total{margin-left:", pagination.gap, ";display:inline-block;vertical-align:middle;}.k-pagination-ellipsis{background-color:transparent;border-color:transparent;}.k-btns{.k-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";&:last-of-type{margin:0!important;}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}.k-input-inner{text-align:center;}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";>*{display:inline-block;vertical-align:middle;&:not(:first-child){margin-left:", pagination.gap, ";}}.k-pagination-ellipsis{background-color:transparent;border-color:transparent;}.k-btns{.k-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";border-radius:", pagination.btn.borderRadius, "!important;&:last-of-type{margin:0!important;}&:hover{background:", pagination.btn.hoverBgColor, ";}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}.k-input-inner{text-align:center;}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     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-vue-next';
+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-vue-next';
+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-vue-next';
+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-vue-next';
+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 {};

package/components/popover/index.spec.js

@@ -0,0 +1,195 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Array$from2 from "@babel/runtime-corejs3/core-js/array/from";
+import BasicDemo from '~/components/popover/demos/basic';
+import ContentDemo from '~/components/popover/demos/content';
+import ButtonDemo from '~/components/popover/demos/button';
+import TextDemo from '~/components/popover/demos/text';
+import TypeDemo from '~/components/popover/demos/type';
+import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+describe("Popover", function () {
+  afterEach(function (done) {
+    unmount();
+    setTimeout(done, 500);
+  });
+  it('should handle popover correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, cancelCb, okCb, content, _Array$from, btn;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            cancelCb = sinon.spy();
+            okCb = sinon.spy();
+            instance.refs.popover1.on('cancel', cancelCb);
+            instance.refs.popover1.on('ok', okCb);
+            dispatchEvent(element.children[0], 'click');
+            _context.next = 8;
+            return wait();
+
+          case 8:
+            content = getElement('.k-tooltip-content');
+            expect(content.innerHTML).to.matchSnapshot();
+            content.querySelector('.k-btn').click();
+            _context.next = 13;
+            return wait(500);
+
+          case 13:
+            expect(content.style.display).eql('none');
+            dispatchEvent(element.firstElementChild, 'click');
+            _context.next = 17;
+            return wait();
+
+          case 17:
+            content = getElement('.k-tooltip-content');
+            _Array$from = _Array$from2(content.querySelectorAll('.k-btn')), btn = _Array$from[1];
+            btn.click();
+            _context.next = 22;
+            return wait(500);
+
+          case 22:
+            expect(content.style.display).eql('none');
+            expect(cancelCb.callCount).eql(1);
+            expect(okCb.callCount).eql(1);
+
+          case 25:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should handle type correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount2, instance, element, _element$querySelecto, info, success, error, warning, test;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount2 = mount(TypeDemo), instance = _mount2[0], element = _mount2[1];
+            _element$querySelecto = element.querySelectorAll('.k-btn'), info = _element$querySelecto[0], success = _element$querySelecto[1], error = _element$querySelecto[2], warning = _element$querySelecto[3];
+
+            test = /*#__PURE__*/function () {
+              var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(element, className) {
+                var content;
+                return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+                  while (1) {
+                    switch (_context2.prev = _context2.next) {
+                      case 0:
+                        element.click();
+                        _context2.next = 3;
+                        return wait();
+
+                      case 3:
+                        content = getElement('.k-tooltip-content');
+                        expect(content.querySelector('.k-popover-icon').classList.contains(className)).eql(true);
+
+                      case 5:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }
+                }, _callee2);
+              }));
+
+              return function test(_x, _x2) {
+                return _ref3.apply(this, arguments);
+              };
+            }();
+
+            _context3.next = 5;
+            return test(info, 'k-icon-information-fill');
+
+          case 5:
+            _context3.next = 7;
+            return test(success, 'k-icon-success-fill');
+
+          case 7:
+            _context3.next = 9;
+            return test(error, 'k-icon-error-fill');
+
+          case 9:
+            _context3.next = 11;
+            return test(warning, 'k-icon-warning-fill');
+
+          case 11:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should handle title/content slot correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount3, instance, element, content;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount3 = mount(ContentDemo), instance = _mount3[0], element = _mount3[1];
+            dispatchEvent(element.children[0], 'click');
+            _context4.next = 4;
+            return wait();
+
+          case 4:
+            content = getElement('.k-tooltip-content');
+            expect(content.querySelector('.k-popover-title')).to.matchSnapshot();
+            expect(content.querySelector('.k-popover-content')).to.matchSnapshot();
+
+          case 7:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('should handle text props correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount4, instance, element, content, btns;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount4 = mount(TextDemo), instance = _mount4[0], element = _mount4[1];
+            dispatchEvent(element.children[0], 'click');
+            _context5.next = 4;
+            return wait();
+
+          case 4:
+            content = getElement('.k-tooltip-content');
+            btns = content.querySelectorAll('.k-btn');
+            expect(btns[0].textContent).eql('cancel');
+            expect(btns[1].textContent).eql('confirm');
+
+          case 8:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('should handle footer slot correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _mount5, instance, element, content;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            _mount5 = mount(ButtonDemo), instance = _mount5[0], element = _mount5[1];
+            dispatchEvent(element.children[0], 'click');
+            _context6.next = 4;
+            return wait();
+
+          case 4:
+            content = getElement('.k-tooltip-content');
+            expect(content.querySelector('.k-tooltip-footer').outerHTML).to.matchSnapshot();
+
+          case 6:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+});

package/components/popover/styles.d.ts

@@ -0,0 +1 @@
+export default function makeStyles(): string;

package/components/popover/styles.js

@@ -0,0 +1,22 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+var defaults = {
+  width: '240px',
+  padding: '8px 16px',
+  gap: '8px',
+  title: {
+    fontSize: '14px',
+    lineHeight: '20px',
+    fontWeight: 500
+  }
+};
+var popover;
+setDefault(function () {
+  popover = deepDefaults(theme, {
+    popover: defaults
+  }).popover;
+});
+export default function makeStyles() {
+  return /*#__PURE__*/css("&.k-tooltip-content.k-popover{width:", popover.width, ";padding:", popover.padding, ";.k-popover-title{display:flex;align-items:center;font-size:", popover.title.fontSize, ";line-height:", popover.title.lineHeight, ";font-weight:", popover.title.fontWeight, ";}.k-popover-icon{margin-right:", popover.gap, ";}.k-popover-content{margin-top:", popover.gap, ";}.k-tooltip-footer{text-align:right;}}");
+}

package/components/progress/index.js

@@ -23,7 +23,7 @@ var defaults = function defaults() {
     size: 'default',
     showOuterText: true,
     status: 'active',
-    strokeWidth: 4
+    strokeWidth: 6
   };
 };