@king-design/intact 3.0.0-beta.2 → 3.0.0

package/components/badge/styles.ts

@@ -34,7 +34,7 @@ export default function makeStyles() {
             right: 0;
             transform: translate(50%, -50%);
             background: ${badge.bgColor};
-            font-size: 75%;
+            font-size: 85%;
             vertical-align: baseline;
         }
             

package/components/breadcrumb/demos/separator.md

@@ -26,7 +26,7 @@ import {Breadcrumb, BreadcrumbItem, Icon} from 'kpc';
 
 ```styl
 .separator
-    color #ffa133
+    color #0091ea
     vertical-align middle
 i
     margin-right 3px

package/components/button/demos/group.md

@@ -61,6 +61,13 @@ import {Button, ButtonGroup} from 'kpc';
         <Button value="guangzhou" size="small">广州</Button>
         <Button value="shenzhen" size="small">深圳</Button>
     </ButtonGroup>
+    <p>有间隔的按钮组</p>
+    <ButtonGroup checkType="radio" v-model="city" seperate>
+        <Button value="beijing">北京</Button>
+        <Button value="shanghai">上海</Button>
+        <Button value="guangzhou">广州</Button>
+        <Button value="shenzhen">深圳</Button>
+    </ButtonGroup>
 </div>
 ```
 

package/components/button/group.ts

@@ -8,13 +8,15 @@ export interface ButtonGroupProps {
     value?: any
     checkType?: 'none' | 'radio' | 'checkbox' 
     fluid?: boolean
+    seperate?: boolean
 }
 
 const typeDefs: Required<TypeDefs<ButtonGroupProps>> = {
     vertical: Boolean,
     value: null,
     fluid: Boolean,
-    checkType: ['none', 'radio', 'checkbox']
+    checkType: ['none', 'radio', 'checkbox'],
+    seperate: Boolean,
 };
 
 const defaults = (): Partial<ButtonGroupProps> => ({

package/components/button/group.vdt

@@ -1,12 +1,13 @@
 import {getRestProps} from '../utils';
 import {makeButtonGroupStyles} from './styles';
 
-const {className, vertical, children, fluid} = this.get();
+const {className, vertical, children, fluid, seperate} = this.get();
 
 const classNameObj = {
     'k-btns': true,
     'k-vertical': vertical,
     'k-fluid': fluid,
+    'k-seperate': seperate,
     [className]: className,
     [makeButtonGroupStyles()]: true,
 };

package/components/button/index.md

@@ -32,6 +32,7 @@ sidebar: doc
 | checkType | 指定按钮组为单选或复选类型，此时需要给每个按钮指定`value`来作为选中的值 | `"radio"` | `"checkbox"` | `"none"` | `"none"` |
 | value | 对于`radio`和`checkbox`类型按钮组，该值表示选中的按钮的值，可以使用`v-model`进行双向绑定 | `*` | `undefined` |
 | fluid | 是否宽度100% | `boolean` | `false` |
+| seperate | 是否展示间隔 | `boolean` | `false` |
 
 # 方法
 

package/components/button/index.vdt

@@ -67,7 +67,7 @@ const typeStyles = theme[type];
 const waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
 
 <Wave disabled={loading || disabled || type === 'none' || type === 'link'}
-    inset="-2px"
+    inset={type === 'flat' ? '-1px' : '-2px'}
     color={waveColor}
 >
     <DynamicButton 

package/components/button/styles.ts

@@ -32,7 +32,7 @@ const btnStyles = {
     get color() { return theme.color.text },
     bgColor: '#fff',
     lineHeight: '1.15',
-    get padding() { return `0 ${theme.default.padding}` },
+    get padding() { return `0 16px` },
     get borderColor() { return theme.color.border },
     get borderRadius() { return theme.borderRadius },
     get fontSize() { return theme.default.fontSize },
@@ -97,6 +97,11 @@ const btnSizeStyles = sizes.reduce((memo, size) => {
         get height() { return theme[size].height },
         get padding() { return `0 ${theme[size].padding}` },
     };
+    if (size === 'large') {
+        Object.defineProperty(memo[size], 'padding', {
+            value: `0 24px`,
+        });
+    }
 
     return memo; 
 }, {} as {[key in Sizes]: SizeStyles});
@@ -412,7 +417,9 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
 
 export function makeButtonGroupStyles() {
     return css`
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
+        flex-wrap: wrap;
         vertical-align: middle;
         .k-btn {
             margin: 0;
@@ -470,8 +477,8 @@ export function makeButtonGroupStyles() {
             
         // vertical
         &.k-vertical {
+            flex-direction: column;
             > .k-btn {
-                display: block;
                 &:not(.k-btn-icon) {
                     width: 100%;
                 }
@@ -503,5 +510,13 @@ export function makeButtonGroupStyles() {
                 })}
             }
         }
+
+        // seperate
+        &.k-seperate {
+            gap: 8px;
+            > .k-btn {
+                border-radius: ${button.borderRadius} !important;
+            }
+        }
     `;
 }

package/components/checkbox/styles.ts

@@ -26,11 +26,11 @@ const defaults = {
 
     
     inner: {
-        width: '5px',
+        width: '6px',
         height: '10px',
         top: '0px',
-        left: '5px',
-        border: '1px solid #fff',
+        left: '4px',
+        border: '2px solid #fff',
     },
 
     // disabled
@@ -48,11 +48,6 @@ const defaults = {
             },
         } 
     },
-
-    // indeterminate
-    indeterminate: {
-        innerLeft: '4px',
-    }
 };
 
 let checkbox: typeof defaults;
@@ -91,7 +86,9 @@ export default function makeStyles() {
                 transform: rotate(45deg) scale(0);
                 transition: all ${checkbox.transition};
             }
-            &:hover {
+        }
+        &:hover {
+            .k-checkbox-wrapper {
                 border: ${checkbox.hoverBorder}
             }
         }
@@ -125,7 +122,6 @@ export default function makeStyles() {
                 &:before {
                     transform: rotate(90deg) scale(1);
                     border-bottom: 0;
-                    left: ${checkbox.indeterminate.innerLeft};
                 }
             }
       

package/components/collapse/styles.ts

@@ -35,7 +35,6 @@ export function makeStyles() {
             .${kls('arrow')} {
                 float: left;
                 margin-right: ${collapse.titleMarginRight};
-                transform-origin: center center 0;
             }
         }
 
@@ -69,7 +68,6 @@ export function makeItemStyles() {
             transition: transform ${collapse.transition};
             line-height: ${collapseItem.titleHeight};
             height: ${collapseItem.titleHeight};
-            transform-origin: left center 0;
         }
 
         &:not(.k-disabled) {

package/components/dropdown/dropdown.ts

@@ -68,6 +68,7 @@ const typeDefs: Required<TypeDefs<DropdownProps>> = {
 const defaults = (): Partial<DropdownProps> => ({
     trigger: 'hover',
     of: 'self',
+    value: false,
 });
 
 const events: Events<DropdownEvents> = {

package/components/form/index.spec.ts

@@ -6,6 +6,7 @@ import {mount, unmount, dispatchEvent, wait} from '../../test/utils';
 import {Component, findDomFromVNode} from 'intact';
 import {Form, FormItem} from './';
 import {Input} from '../input';
+import { Select } from '../select';
 
 RemoteDemo.prototype.validateUserName = function(value) {
     // mock api
@@ -440,4 +441,24 @@ describe('Form', () => {
         await wait();
         expect(classList.contains('k-ellipsis')).to.be.true;
     });
+
+    it('should not validate when select is disabled on init', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Form, FormItem, Select} = this;
+                <Form ref="form">
+                    <FormItem rules={{required: true}}>
+                        <Select disabled />
+                    </FormItem>
+                </Form>
+            `;
+            Form = Form;
+            FormItem = FormItem;
+            Select = Select;
+        }
+        const [instance, element] = mount(Demo);
+
+        await wait(500);
+        expect(element.querySelector('.k-form-error')).to.be.null;
+    });
 });

package/components/icon/index.vdt

@@ -30,6 +30,6 @@ if (this.colors.indexOf(color) > -1) {
 }
 
 <i class={classNameObj}
-    style={addStyle(style, _style)}
     {...getRestProps(this)}
+    style={addStyle(style, _style)}
 >{children}</i>

package/components/message/demos/config.md

@@ -1,5 +1,5 @@
 ---
-title: 隐藏Icon或关闭按钮
+title: 隐藏Icon或展示关闭按钮
 order: 1.1
 ---
 
@@ -32,7 +32,7 @@ export default class extends Component {
         Message[type]({
             content: type,
             duration: 3000,
-            closable: false,
+            closable: true,
             hideIcon: true,
         });
     }

package/components/message/index.md

@@ -15,7 +15,7 @@ sidebar: doc
 | content | 提示内容 | `string` | `VNode` | `undefined` |
 | duration | 提示展示多长时间后自动关闭，当传入0时，提示将会一直展示。单位ms | `number` | `5000` |
 | type | 提示类型 | `"info"` | `"error"` | `"success"` | `"warning"`|
-| closable | 是否展示关闭按钮 | `boolean` | `true` |
+| closable | 是否展示关闭按钮 | `boolean` | `false` |
 | hideIcon | 是否隐藏文字前面的icon | `boolean` | `false` |
 
 # 静态方法

package/components/message/message.ts

@@ -33,7 +33,7 @@ let id = 0;
 const defaults = (): Partial<MessageProps> => ({
     duration: 5000,
     type: 'info',
-    closable: true,
+    closable: false,
 });
 
 let messages: Messages | null = null;

package/components/pagination/styles.ts

@@ -32,7 +32,7 @@ const defaults = deepDefaults(
             gap: '6px',
             padding: '0 3px',
             get borderRadius() { return theme.borderRadius },
-            get hoverBgColor() { return theme.color.hoverBg }
+            // get hoverBgColor() { return theme.color.hoverBg }
         },
         // goto
         goto: {
@@ -82,9 +82,6 @@ export function makeStyles() {
                 &:last-of-type {
                     margin: 0 !important;
                 }
-                &:hover {
-                    background: ${pagination.btn.hoverBgColor};
-                }
             }
             .k-icon {
                 font-size: 18px;

package/components/popover/styles.ts

@@ -3,7 +3,7 @@ import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 
 const defaults = {
-    width: '240px',
+    width: '320px',
     padding: '8px 16px',
     gap: '8px',
     title: {

package/components/radio/styles.ts

@@ -67,10 +67,13 @@ export function makeStyles() {
                 transform: scale(0);
                 transition: all ${radio.transition};
             }
-            &:hover {
+        }
+        &:hover {
+            .k-radio-wrapper {
                 border: 1px solid ${radio.hoverBorderColor};
             }
         }
+
         input {
             width: 100%;
             height: 100%;

package/components/scrollSelect/styles.ts

@@ -19,7 +19,7 @@ const defaults = {
         get color() { return theme.color.text },
         get activeColor() { return theme.color.primary },
         get hoverBgColor() { return theme.color.bg },
-        activeFontSize: `1.1em`,
+        activeFontSize: `1.3em`,
         get disabledColor() { return theme.color.disabled },
         border: `1px solid #e5e5e5`,
     }

package/components/select/base.vdt

@@ -148,10 +148,13 @@ const filterInput = <Input v-if={filterable}
                         <span class="k-select-suffix-icon">
                             <b:suffix>
                                 <Icon class="ion-load-c" rotate v-if={loading} />
-                                <Icon v-else-if={!hideIcon}
-                                    class="k-select-arrow k-icon-down"
-                                    disabled={$props.isDisableArrow}
-                                />
+                                <template v-else-if={!hideIcon}>
+                                    <Icon class="k-icon-search" v-if={filterable && show} />
+                                    <Icon v-else
+                                        class="k-select-arrow k-icon-down"
+                                        disabled={$props.isDisableArrow}
+                                    />
+                                </template>
                             </b:suffix>
                         </span>
                     </span>

package/components/select/styles.ts

@@ -11,7 +11,7 @@ type SizeStyles = {
 
 const defaults = deepDefaults(
     {
-        get transition() { return theme.transition.middle },
+        get transition() { return theme.transition.large },
         width: `300px`,
         get height() { return theme.default.height },
         bgColor: '#fff',

package/components/switch/styles.ts

@@ -6,6 +6,7 @@ import '../../styles/global';
 const defaults = {
     get transition() { return theme.transition.middle },
     get bgColor() { return theme.color.border },
+    get hoverBgColor() { return theme.color.placeholder },
     fontSize: `12px`,
     color: '#fff',
     handleBorderRadius: `100%`,
@@ -16,7 +17,8 @@ const defaults = {
         get bgColor() { return theme.color.primary },
         get disabledBgColor() {
             return palette(theme.color.primary, -3);
-        }
+        },
+        get hoverBgColor() { return theme.color.linkHover },
     },
 
     // default
@@ -66,6 +68,7 @@ export function makeStyles() {
         user-select: none;
         overflow: hidden;
         box-sizing: content-box;
+        transition: background ${kswitch.transition};
         input {
             opacity: 0;
             position: absolute;
@@ -91,6 +94,13 @@ export function makeStyles() {
             background: ${kswitch.bgColor};
             transition: all ${kswitch.transition};
         }
+        &:hover {
+            &,
+            .k-switch-bar,
+            .k-switch-wrapper {
+                background: ${kswitch.hoverBgColor};
+            }
+        }
         .k-switch-handle {
             border-radius: ${kswitch.handleBorderRadius};
             background: ${kswitch.handleBgColor};
@@ -168,6 +178,12 @@ export function makeStyles() {
             .k-switch-bar {
                 width: 100%;
             }
+            &:hover {
+                .k-switch-bar,
+                .k-switch-wrapper {
+                    background: ${kswitch.checked.hoverBgColor};
+                }
+            }
         }
 
         // disabled

package/components/table/column.vdt

@@ -95,9 +95,10 @@ const {
                                                             </DropdownItem>
                                                         </div>
                                                         <div class="k-table-group-footer" v-if={multiple}>
-                                                            <Button type="none" size="small"
+                                                            <Button size="small"
                                                                 disabled={isEmptyValue(localGroupValue.value)}
-                                                                ev-click={reset}
+                                                                type="secondary"
+                                                                ev-click={() => reset(onChange)}
                                                             >重置</Button>
                                                             <Button type="primary" size="small"
                                                                 ev-click={() => confirm(onChange)}

package/components/table/demos/showIndeterminate.md

@@ -1,5 +1,5 @@
 ---
-title: 半选中状态
+title: 取消表头半选中状态
 order: 28
 ---
 
@@ -13,7 +13,7 @@ import {Table, TableColumn} from 'kpc';
         data={this.get('data')} 
         resizable 
         ref="__test" 
-        showIndeterminate={true}
+        showIndeterminate={false}
         checkedKeys={[0]}
     >
         <TableColumn key="a" title="表头1" />

package/components/table/index.md

@@ -37,7 +37,7 @@ sidebar: doc
 | tooltipPosition | 行提示的位置 | `"left"` | `"bottom"` | `"right"` | `"top"` | `Position` | `"top"` |
 | tooltipContainer | 指定行提示弹层追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
 | keepStatus | 是否在行销毁的时候，保持该行在`checkedKeys` | `selectedKeys` | `spreadKeys` | `expandedKeys`中的`key`值，默认会同步删除（仅在销毁行的时候有效，如果整个`Table`被销毁，则不会执行该逻辑） | `boolean` | `false` |
-| showIndeterminate | 表头的`Checkbox`是否支持展示半选中状态 | `boolean` | `false` |
+| showIndeterminate | 表头的`Checkbox`是否支持展示半选中状态 | `boolean` | `true` |
 | resizable | 是否可以表头拖动 | `boolean` | `false` |
 | minColWidth | 指定所有列拖动时的最小宽度 | `number` | `40` |
 | widthStoreKey | 如果要保存表格拖动后的列宽信息，可以通过该属性设置保存到`localStorage`中的`key` | `string` | `undefined` |

package/components/table/styles.ts

@@ -138,6 +138,7 @@ export function makeStyles() {
         .k-table-title-text {
             flex: 1;
             display: inline-flex;
+            line-height: 1.4;
         }
 
         // tbody

package/components/table/table.ts

@@ -140,6 +140,7 @@ const defaults = (): Partial<TableProps> => ({
     indent: 32,
     minColWidth: 40,
     animation: true,
+    showIndeterminate: true,
 });
 
 const events: Events<TableEvents> = {

package/components/table/useGroup.ts

@@ -54,8 +54,9 @@ export function useGroup() {
         dropdownRef.value!.hide(true);
     }
 
-    function reset() {
+    function reset(onChange: ContextValue['onChange']) {
         localGroupValue.set([]);
+        confirm(onChange);
     }
 
     function isEmptyValue(groupValue: any) {

package/components/tabs/demos/closable.md

@@ -30,7 +30,7 @@ import {Tabs, Tab, Button, ButtonGroup, Icon} from 'kpc';
             key={$value.value}
             closable={$value.value !== 10}
         >
-            <Icon class="k-icon-paper" size={this.get('size')} style="margin-right: 8px;" />
+            <Icon class="k-icon-paper" size={this.get('size')} style="margin-right: 8px;" color="inherit" />
             {$value.label}
         </Tab>
     </Tabs>

package/components/tip/styles.ts

@@ -9,7 +9,7 @@ const defaults = {
         gap: '8px',
         fontWeight: '500'
     },
-    get color() { return theme.color.title },
+    get color() { return theme.color.text },
     get padding() { return `6px ${theme.default.padding}` },
 };
 

package/components/tooltip/index.spec.ts

@@ -8,6 +8,7 @@ import {Tooltip} from './';
 import {Dialog} from '../dialog';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
 import { tooltip as tooltipTheme } from './styles';
+import { Select, Option } from '../select';
 
 describe('Tooltip', () => {
     afterEach((done) => {
@@ -378,4 +379,33 @@ describe('Tooltip', () => {
         const newWidth = content.offsetWidth;
         expect(newWidth).to.eql(width);
     });
+
+    it('should not impact select when wrap select with tooltip', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Tooltip, Select, Option} = this;
+                <Tooltip>
+                    <Select>
+                        <Option value="1">Option 1</Option>
+                        <Option value="2">Option 2</Option>
+                    </Select>
+                </Tooltip>
+            `
+            private Tooltip = Tooltip;
+            private Select = Select;
+            private Option = Option;
+        }
+
+        const [instance, element] = mount(Demo);
+        dispatchEvent(element, 'mouseenter');
+        await wait();
+        dispatchEvent(element, 'click');
+        await wait();
+
+        const menu = getElement(".k-select-menu")!;
+        dispatchEvent(element, 'mouseleave');
+        await wait(500);
+
+        expect(menu.style.display).to.eql('');
+    });
 });

package/components/tooltip/tooltip.ts

@@ -86,6 +86,9 @@ export class Tooltip<
         if (this.get('hoverable')) {
             return super.hide(immediately);
         }
+        // tooltip can show any number sub-tooltips, we should not close the showed tooltip
+        // #885
+        this.showedDropdown = null;
         super.hide(true);
     }
 }

package/es/components/badge/styles.js

@@ -22,5 +22,5 @@ setDefault(function () {
   }).badge;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.k-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:75%;vertical-align:baseline;}&.k-has-text>.k-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.k-alone>.k-badge-text{position:static;transform:none;}");
+  return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.k-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:85%;vertical-align:baseline;}&.k-has-text>.k-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.k-alone>.k-badge-text{position:static;transform:none;}");
 }

package/es/components/button/group.d.ts

@@ -4,6 +4,7 @@ export interface ButtonGroupProps {
     value?: any;
     checkType?: 'none' | 'radio' | 'checkbox';
     fluid?: boolean;
+    seperate?: boolean;
 }
 export declare class ButtonGroup extends Component<ButtonGroupProps> {
     static template: string | import("intact").Template<any>;

package/es/components/button/group.js

@@ -7,7 +7,8 @@ var typeDefs = {
   vertical: Boolean,
   value: null,
   fluid: Boolean,
-  checkType: ['none', 'radio', 'checkbox']
+  checkType: ['none', 'radio', 'checkbox'],
+  seperate: Boolean
 };
 
 var defaults = function defaults() {

package/es/components/button/group.vdt.js

@@ -13,12 +13,14 @@ export default function ($props, $blocks, $__proto__) {
       className = _this$get.className,
       vertical = _this$get.vertical,
       children = _this$get.children,
-      fluid = _this$get.fluid;
+      fluid = _this$get.fluid,
+      seperate = _this$get.seperate;
 
   var classNameObj = (_classNameObj = {
     'k-btns': true,
     'k-vertical': vertical,
-    'k-fluid': fluid
+    'k-fluid': fluid,
+    'k-seperate': seperate
   }, _classNameObj[className] = className, _classNameObj[makeButtonGroupStyles()] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)

package/es/components/button/index.vdt.js

@@ -78,7 +78,7 @@ export default function ($props, $blocks, $__proto__) {
   var waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
   return _$cc(Wave, {
     'disabled': loading || disabled || type === 'none' || type === 'link',
-    'inset': '-2px',
+    'inset': type === 'flat' ? '-1px' : '-2px',
     'color': waveColor,
     'children': _$cc(DynamicButton, _extends({
       'className': _$cn(classNameObj),