@king-design/intact 2.0.0-beta.1 → 2.0.2

package/components/table/useFixedColumns.ts

@@ -41,7 +41,10 @@ export function useFixedColumns(
     callbacks.push(setScrollPosition);
 
     instance.on('$receive:children', handleFixedColumns);
-    watchState(widthMap, handleFixedColumns);
+    watchState(widthMap, () => {
+        handleFixedColumns();
+        updateScrollPositionOnResize();
+    });
     
     const throttleUpdate = throttle(() => {
         if (instance.$unmounted) return;
@@ -122,13 +125,12 @@ export function useFixedColumns(
         );
     }
 
-
     function updateScrollPositionOnResize() {
         const scrollDom = scrollRef.value!;     
         if (scrollDom.scrollWidth - scrollDom.offsetWidth <= 0) {
             scrollPosition.set(null);
         } else {
-            scrollPosition.set('left');
+            setScrollPosition(scrollRef.value!.scrollLeft);
         }
     }
 

package/components/table/useWidth.ts

@@ -4,6 +4,7 @@ import type {Table, TableRowKey} from './table';
 import type {TableColumn} from './column';
 import {useState} from '../../hooks/useState';
 import {debounce} from '../utils';
+import {scrollbarWidth} from '../position';
 
 const hasLocalStorage = typeof localStorage !== 'undefined';
 
@@ -73,7 +74,13 @@ export function useWidth(
         if (resizable) {
             const hasBorder = type === 'grid' || type === 'border';
             const _tableWidth = tableRef.value!.offsetWidth;
-            const containerWidth = scrollRef.value!.offsetWidth + (hasBorder ? -2 : 0);
+            const container = scrollRef.value!;
+            let containerWidth = container.offsetWidth + (hasBorder ? -2 : 0);
+            // detect whether the table has vertical scrollbar or not
+            if (container.scrollHeight > container.clientHeight) {
+                containerWidth = containerWidth - scrollbarWidth();
+            }
+
             if (_tableWidth < containerWidth) {
                 tableWidth.set(isMount ? null : containerWidth);
 

package/components/tabs/index.md

@@ -14,25 +14,32 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| data | 选项卡数据 | `Array` | `[]` |
-| value | 被选中的选项卡,使用`v-model`进行双向绑定 | `*` | `undefined`|
-| vertical | 垂直排列 | `Boolean` | `undefined` |
+| value | 被选中的选项卡,使用`v-model`进行双向绑定 | `T = any` | `undefined`|
+| vertical | 垂直排列 | `boolean` | `undefined` |
 | size | 选项卡尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
 | type | 选项卡类型 | `"default"` | `"card"` | `"border-card"` | `"no-border-card"` | `"default"` |
-| beforeChange | 切换选项卡之前的拦截函数，如果该函数返回`false`则阻止本次切换，支持异步函数，参数为当前`Tab` `value` | `Function` | `undefined` |
+| closable | 是否展示选项卡关闭按钮 | `boolean` | `false` |
+| beforeChange | 切换选项卡之前的拦截函数，如果该函数返回`false`则阻止本次切换，支持异步函数，参数为当前`Tab` `value` | <code>(value: T) => boolean &#124; Promise&lt;boolean&gt;</code> | `undefined` |
 
 ## Tab
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 选中的值 | `*` | `undefined` |
-| to | 点击标签的跳转地址 | `String` | `undefined` |
-| disabled | 是否禁用 | `Boolean` | `false` |
+| value | 选中的值 | `any` | `undefined` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| to | 点击标签的跳转地址 | `string` | `undefined` |
+| closable | 是否展示选项卡关闭按钮 | `boolean` | `false` |
 
 # 事件
 
+## Tabs
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| remove | 关闭选项卡时触发 | `(value: T) => void` |
+
 ## Tab
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| click | `Tab`点击事件，发生在`value`改变之后，`disabled`状态不会触发 | `Event` |
+| click | `Tab`点击事件，发生在`value`改变之后，`disabled`状态不会触发 | `(e: MouseEvent) => void` |

package/components/tabs/index.spec.ts

@@ -14,7 +14,7 @@ describe('Tabs', () => {
 
         // add tab
         instance._add();
-        await wait(300);
+        await wait(500);
         expect(tabs.outerHTML).to.matchSnapshot();
 
         // prev & next

package/components/tabs/styles.ts

@@ -19,6 +19,7 @@ const closeFontSizeMap: Record<Sizes, string> = {
 
 const defaults = deepDefaults(
     {
+        get transition() { return theme.transition.middle },
         get borderColor() { return theme.color.border },
         borderWidth: '1px',
         get border() { return `${tabs.borderWidth} solid ${tabs.borderColor}` },
@@ -47,7 +48,7 @@ const defaults = deepDefaults(
 
         // no-border-card
         noBorderCard: {
-            bgColor: `#eee`,
+            get bgColor() { return theme.color.bg },
             gutter: `4px`,
         }
     },
@@ -63,7 +64,7 @@ const defaults = deepDefaults(
     }, {} as Record<Sizes, SizeStyles>)
 );
 
-let tabs: any;
+let tabs: typeof defaults;
 setDefault(() => {
     tabs = deepDefaults(theme, {tabs: defaults}).tabs;
 });
@@ -81,6 +82,9 @@ export function makeStyles() {
             color: ${tabs.color};
             position: relative;
             vertical-align: middle;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
             &:hover,
             &.k-active {
                 color: ${tabs.activeColor};
@@ -99,7 +103,7 @@ export function makeStyles() {
 
         // active-bar
         .k-tabs-active-bar {
-            transition: all ${theme.transition};
+            transition: all ${tabs.transition};
             position: absolute;
             left: 0;
             height: ${tabs.highlight.height};
@@ -222,10 +226,10 @@ export function makeStyles() {
                     right: 0;
                 }
             }
-            .k-vertical {
+            &.k-vertical {
                 border-right: none;
-                .k-tab {
-                    margin-top: ${tabs.noBorderCard.gutter};
+                .k-tab:not(:first-of-type) {
+                    margin: ${tabs.noBorderCard.gutter} 0 0;
                 }
                 .k-tabs-active-bar {
                     border: none;
@@ -252,7 +256,7 @@ export function makeStyles() {
             .k-tabs-wrapper {
                 white-space: nowrap;
                 float: left;
-                transition: transform ${theme.transition};
+                transition: transform ${tabs.transition};
             }
             .k-tabs-prev,
             .k-tabs-next {

package/components/tabs/tab.vdt

@@ -26,6 +26,6 @@ const classNameObj = {
         v-if={isNullOrUndefined(closable) ? this.tabs.get('closable') : closable}
         ev-click={this.remove}
     >
-        <Icon class="ion-ios-close-empty" />
+        <Icon class="ion-ios-close-empty" hoverable />
     </Button>
 </div>

package/components/tabs/useActiveBar.ts

@@ -1,4 +1,4 @@
-import {useInstance, onMounted, onUpdated, findDomFromVNode} from 'intact';
+import {useInstance, onMounted, onUpdated, findDomFromVNode, nextTick} from 'intact';
 import type {Tabs} from './';
 import {useState} from '../../hooks/useState';
 
@@ -42,7 +42,8 @@ export function useActiveBar() {
     } 
 
     onMounted(generateStyle);
-    onUpdated(generateStyle);
+    // Tabs maybe embed into Transition, therefore handle style nextTick
+    onUpdated(() => nextTick(generateStyle));
 
     return styles;
 }

package/components/tag/base.ts

@@ -51,6 +51,9 @@ export class Tag<
     @bind
     private onClose(e: MouseEvent): void {
         e.stopPropagation();
+
+        if (this.get('disabled')) return;
+
         this.trigger('close', e);
         if (!e.defaultPrevented) {
             this.set('closed', true);

package/components/tag/demos/border.md

@@ -13,8 +13,9 @@ import {Tag} from 'kpc';
         <Tag v-for={this.get('types')}
             type={$value}
             border={border}
+            closable
         >{$value}</Tag>
-        <Tag disabled border={border}>disabled</Tag>
+        <Tag disabled closable border={border}>disabled</Tag>
     </div>
 </div>
 ```

package/components/tag/index.md

@@ -10,8 +10,9 @@ sidebar: doc
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | type | 组件类型 | `"default"` | `"primary"` | `"success"` | `"warning"` | `"danger"` | `"default"` |
-| disabled | 是否展示禁用状态 | `Boolean` | `false` |
-| closable | 是否可关闭 | `Boolean` | `false` |
+| closable | 是否可关闭 | `boolean` | `false` |
+| closed | 是否已关闭 | `boolean` | `false` |
+| disabled | 是否展示禁用状态 | `boolean` | `false` |
 | size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
 | border | 定义边框样式 | `"solid"` | `"dashed"` | `"none"` | `"solid"` |
 
@@ -19,4 +20,4 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| close | 标签关闭事件 | - |
+| close | 标签关闭事件 | `(e: MouseEvent) => void` |

package/components/tag/styles.ts

@@ -52,6 +52,9 @@ const defaults = deepDefaults(
                 gap: '2px'
             }
         },
+        none: {
+            get bgColor() { return theme.color.bg },
+        }
     },
     types.reduce((memo, type) => {
         if (type === 'disabled') return memo;
@@ -63,7 +66,7 @@ const defaults = deepDefaults(
     }, {} as {[key in Exclude<Types, 'disabled'>]: TypeStyles}),
 );
 
-let tag: any;
+let tag: typeof defaults;
 setDefault(() => {
     tag = deepDefaults(theme, {tag: defaults}).tag;
 });
@@ -83,6 +86,11 @@ export function makeStyles() {
             margin-left: ${tag.close.gap};
         }
 
+        &.k-none {
+            border: none;
+            background: ${tag.none.bgColor};
+        }
+
         ${types.map(t => {
             const styles = tag[t];
             return css`
@@ -113,8 +121,5 @@ export function makeStyles() {
         &.k-dashed {
             border-style: dashed;
         }
-        &.k-none {
-            border: none;
-        }
     `;
 }

package/components/timeline/styles.ts

@@ -1,5 +1,5 @@
 import {css} from '@emotion/css';
-import {theme, ThemeValue, setDefault} from '../../styles/theme';
+import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, Sizes, sizes, palette}  from '../../styles/utils';
 import '../../styles/global';
 
@@ -8,7 +8,7 @@ type ValueOf<T extends readonly any[]> = T[number]
 export type Types = ValueOf<typeof types>
 
 type TypeStyles = {
-    color: ThemeValue<string>
+    color: string
 }
 
 type SizeStyles = {
@@ -55,7 +55,7 @@ const defaults = deepDefaults(
     sizeStyles
 );
 
-let timeline: any;
+let timeline: typeof defaults;
 setDefault(() => {
     timeline = deepDefaults(theme, {timeline: defaults}).timeline;
 });

package/components/timepicker/constants.ts

@@ -10,8 +10,9 @@ import {TypeDefs} from 'intact';
 
 export const YEAR_FORMAT = 'YYYY-MM-DD ';
 export const TIME_FORMAT = 'HH:mm:ss';
-export const NOW = getNowDate();
-export const PREFIX = NOW.format(YEAR_FORMAT);
+export const NOW_START = getNowDate();
+export const NOW_END = getNowDate(true);
+export const PREFIX = NOW_START.format(YEAR_FORMAT);
 
 export interface TimepickerProps<
     M extends boolean = boolean,

package/components/timepicker/demos/basic.md

@@ -3,8 +3,8 @@ title: 基础使用
 order: 0
 ---
 
-基础用法，通过`v-model`双向绑定，值为时间字符串，并非`Date`对象。添加`multiple`属性可以支持多选；
-通过`min` `max`属性可以指定最小最大可选时间
+基础用法，通过`v-model`双向绑定，值为任意合法的日期或时间字符串，组件最终都会处理成时间字符串，
+日期信息将被忽略。添加`multiple`属性可以支持多选；通过`min` `max`属性可以指定最小最大可选时间
 
 ```vdt
 import {Timepicker} from 'kpc';

package/components/timepicker/demos/step.md

@@ -6,7 +6,7 @@ order: 2
 当指定了`step`属性时，组件将展示成`Select`样式，只能选择固定的几个时间点。通过`min`和`max`限定
 选择时间范围（默认：00:00:00 ~ 23:59:59），`step`指定步长，它们值类型都为时间字符串
 
-> `@since v1.1.0` `step`不能隐藏“秒”，可以通过`showFomart`或`format`来格式化时间字符串
+> 可以通过`showFomart`或`format`来格式化时间字符串，来隐藏“秒”
 
 ```vdt
 import {Timepicker} from 'kpc';

package/components/timepicker/index.md

@@ -9,24 +9,55 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前选中的时间字符串 | `String` | `undefind` |
-| clearable | 是否能清空当前值 | `Boolean` | `false` |
-| step | 固定时间点的步长 | `String` | `undefined` |
-| max | 最大可选时间 | `String` | `undefined` |
-| min | 最小可选时间 | `String` | `undefined` |
-| placeholder | 占位文字 | `String` | `"请选择时间"` |
-| disabled | 是否禁用 | `Boolean` | `false` |
-| multiple | 是否支持多选 | `Boolean` | `false` |
-| size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
-| range | 是否选择时间范围 | `Boolean` | `false` |
-| container | 指定弹出选择层追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Function` | `String` | `undefined` |
-| format | 指定时间格式化字符串 | `String` | `HH:mm:ss` |
-| valueFormat | 指定`value`值时间格式化字符串 | `String` | `undefined` |
-| showFormat | 指定展示的时间格式化字符串 | `String` | `undefined` |
+| value | 当前选中的时间字符串，可用`v-model`双向绑定，你可以传入任意合法的日期，组件最终都会处理成时间字符串，日期信息将被忽略 | `Value` | `Value[]` | `[Value, Value]`  | `[Value, Value][]` | `""` |
+| multiple | 是否支持多选 | `boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| name | 表单元素的`name` | `string` | `undefined` |
+| size | 尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
+| hideIcon | 是否隐藏后面的图标 | `boolean` | `false` |
+| clearable | 是否可清空 | `boolean` | `false` |
+| fluid | 是否宽度100% | `boolean` | `false` |
+| inline | 展示内联模式，该模式下，组件没有边框，宽度和高度如同内联元素一样由内容撑开 | `boolean` | `false` |
+| placeholder | 占位文案 | `string` | `"请选择时间"` |
+| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| width | 指定宽度，组件自动添加单位`px` | `number` | `string` | `undefined` | 
+| range | 是否选择时间范围 | `boolean` | `false` |
+| format | 指定日期格式化字符串 | `string` | `YYYY-MM-DD HH:mm:ss` |
+| valueFormat | 指定`value`值日期格式化字符串 | `string` | `undefined` |
+| showFormat | 指定展示的日期格式化字符串 | `string` | `undefined` |
+| max | 最大可选时间 | `Value` | `undefind` |
+| min | 最小可选时间 | `Value` | `undefind` |
+| disabledDate | 该属性值是一个函数，用于定义那些日期被禁止选择，函数参数为日期字符串，返回`true`则表示禁用该日期 | `(v: Dayjs) => boolean` | `undefined` |
+| step | 固定时间点的步长 | `string` | `undefined` |
+
+```ts
+import {Dayjs} from 'dayjs';
+import {VNode} from 'intact';
+
+export type Value = string | Date | number | Dayjs;
+export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+```
+
+# 扩展点
+
+## Select
+
+| 名称 | 说明 | 参数 |
+| --- | --- | --- |
+| value | 自定义选择结果的展示 | `([value: any, label: Children]) => Children` |
+| values | 自定义多选的选择结果的展示 | `([values: any[], labels: Children[]]) => Children` |
+| prefix | 自定义输入款前面展示的内容 | - |
+| suffix | 自定义输入框后面展示的内容 | - |
+
+```ts
+import {Children} from 'intact';
+```
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| selectStart | 该事件尽在范围选择(`range`)，并且只选择了第一个值时触发 | `timeString` |
-| change | 当用户操作完成且值`value`变化时触发 | `dateString` |
+| show | 菜单弹出时触发 | - |
+| hide | 菜单隐藏时触发 | - |
+| selecting | 该事件尽在范围选择(`range`)触发，表示用户正在操作选择，可能只选了一个值，或者正在修改日期的时间 | `(value: [Dayjs, Dayjs?]) => void` |
+| change | 当用户操作完成且值`value`变化时触发 | `(value: string) => void` |

package/components/timepicker/index.spec.ts

@@ -11,15 +11,16 @@ describe('Timepicker', () => {
 
     afterEach(async () => {
         unmount();
-        await wait(400);
+        await wait(500);
     });
 
-    it('select time', async () => {
+    it('select time', async function() {
+        this.timeout(0);
         const [instance, element] = mount(BasicDemo);
 
         const [picker1, picker2] = element.querySelectorAll('.k-select') as NodeListOf<HTMLElement>;
         picker1.click();
-        await wait(300);
+        await wait(500);
         let dropdown = getElement('.k-time-content')!;
         expect(dropdown.innerHTML).to.matchSnapshot();
         const next = dropdown.querySelector('.k-scroll-select-item:nth-child(11)') as HTMLElement;
@@ -33,18 +34,18 @@ describe('Timepicker', () => {
         expect(dropdown.innerHTML).to.matchSnapshot();
         const ok = dropdown.querySelector('.k-btn') as HTMLElement;
         ok.click();
-        await wait(300);
+        await wait(500);
         expect(instance.get('time')).to.eql('02:00:00');
         expect(dropdown.style.display).to.eql('none');
         // set time
         instance.set('time', '03:03:03');
         picker1.click();
-        await wait(300);
+        await wait(500);
         expect(dropdown.innerHTML).to.matchSnapshot();
 
         // multiple
         picker2.click();
-        await wait(300);
+        await wait(500);
         dropdown = getElement('.k-time-content')!;
         dropdown.querySelector<HTMLElement>('.k-scroll-select-item:nth-child(11)')!.click();
         const ok2 = dropdown.querySelector('.k-btn') as HTMLElement;
@@ -83,7 +84,7 @@ describe('Timepicker', () => {
 
         const picker = element.querySelector('.k-select') as HTMLElement;
         picker.click();
-        await wait(300);
+        await wait(500);
         const dropdown = getElement('.k-time-content')!;
         expect(dropdown.innerHTML).to.matchSnapshot();
         const [start, end] = dropdown.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
@@ -95,7 +96,7 @@ describe('Timepicker', () => {
         expect(dropdown.innerHTML).to.matchSnapshot();
         dropdown.querySelector<HTMLElement>('.k-btn')!.click();
         await wait();
-        expect(instance.get('time')).to.eql(['01:00:00', '02:00:00']);
+        expect(instance.get('time')).to.eql(['01:00:00', '01:59:59']);
     });
 
     it('step', async () => {
@@ -122,7 +123,7 @@ describe('Timepicker', () => {
         (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
         await wait();
         expect(dropdown.innerHTML).to.matchSnapshot();
-        (end.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
+        (end.querySelector('.k-disabled')!.nextElementSibling as HTMLElement).click();
         await wait();
         expect(dropdown.innerHTML).to.matchSnapshot();
         dropdown.querySelector<HTMLElement>('.k-btn')!.click();
@@ -165,7 +166,7 @@ describe('Timepicker', () => {
         expect(content.innerHTML).to.matchSnapshot();
         content.querySelector<HTMLElement>('.k-btn')!.click();
         await wait();
-        expect(instance.get('time3')).eql(['00:30:00.000', '01:00:00.000']);
+        expect(instance.get('time3')).eql(['00:30:00.000', '00:30:00.000']);
         expect(input3.innerHTML).to.matchSnapshot();
     });
 

package/components/timepicker/styles.ts

@@ -18,7 +18,7 @@ const defaults = {
     },
 };
 
-let timepicker: any;
+let timepicker: typeof defaults;
 setDefault(() => {
     timepicker = deepDefaults(theme, {timepicker: defaults}).timepicker;
 });

package/components/timepicker/useStep.ts

@@ -3,7 +3,7 @@ import type {TimepickerProps} from './';
 import {useState} from '../../hooks/useState';
 import type {useDisabled} from '../datepicker/useDisabled';
 import type {useFormats} from './useFormats';
-import {NOW} from './constants'
+import {NOW_START, NOW_END} from './constants'
 import {Dayjs} from 'dayjs';
 import {useReceive} from '../../hooks/useReceive';
 
@@ -28,9 +28,9 @@ export function useStep(
 
         if (step) {
             const data: Option[] = [];
-            const maxValue = maxDate.value || NOW.hour(23).minute(59).second(59);
+            const maxValue = maxDate.value || NOW_END;
             const stepValue = parseTime(step);
-            let value = minDate.value || NOW;
+            let value = minDate.value || NOW_START;
 
             const push = (value: Dayjs) => {
                 data.push({

package/components/timepicker/useValue.ts

@@ -9,7 +9,7 @@ import {
 } from '../datepicker/basepicker';
 import type {useDisabled} from '../datepicker/useDisabled';
 import type {usePanel} from '../datepicker/usePanel';
-import {NOW} from './constants';
+import {NOW_START, NOW_END} from './constants';
 import {PanelFlags} from '../datepicker/usePanel';
 
 export function useValue(
@@ -47,7 +47,7 @@ export function useValue(
     });
 
     function getPlaceholderDates(): StateValueItem {
-        return instance.get('range') ? [NOW, NOW] : NOW;
+        return instance.get('range') ? [NOW_START, NOW_END] : NOW_START;
     }
 
     function onChangeTimeByStep(v: string, flag: PanelFlags) {

package/components/tip/demos/closable.md

@@ -19,7 +19,7 @@ import {Tip} from 'kpc';
         type={$value}
         closable
     >{$value}</Tip>
-    <Tip closable>
+    <Tip closable border="dashed">
         custom closing content
         <b:close>No longer show</b:close>
     </Tip>

package/components/tip/index.md

@@ -5,15 +5,19 @@ order: 89
 sidebar: doc
 ---
 
-> `Tip`组件继承`Tag`组件，所以很多属性都是一样的
+> `Tip`组件继承`Tag`组件，所以属性是一样的
 
 # 属性
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | type | 组件类型 | `"default"` | `"primary"` | `"success"` | `"warning"` | `"danger"` | `"default"` |
-| disabled | 是否展示禁用状态 | `Boolean` | `false` |
-| closable | 是否可关闭 | `Boolean` | `false` |
+| closable | 是否可关闭 | `boolean` | `false` |
+| closed | 是否已关闭 | `boolean` | `false` |
+| disabled | 是否展示禁用状态 | `boolean` | `false` |
+| size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
+| border | 定义边框样式 | `"solid"` | `"dashed"` | `"none"` | `"solid"` |
+
 
 # 扩展点
 
@@ -26,4 +30,4 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| close | 标签关闭事件 | - |
+| close | 标签关闭事件 | `(e: MouseEvent) => void` |

package/components/tip/styles.ts

@@ -12,7 +12,7 @@ const defaults = {
     get padding() { return `6px ${theme.default.padding}` },
 };
 
-let tip: any;
+let tip: typeof defaults;
 setDefault(() => {
     tip = deepDefaults(theme, {tip: defaults}).tip;
 });

package/components/tooltip/demos/basic.md

@@ -6,19 +6,8 @@ order: 0
 使用`Tooltip`包裹需要展示提示的元素，使用`content`属性指定提示文本即可，组件默认为深色主题`dark`，你可以通过
 `theme`指定浅色主题`light`，通过`disabled`属性可以禁用提示，通过`size`可以指弹层的大小：`small` `default`
 
-> 由于`Tooltip`是一个宏函数，Intact下，会返回两个元素，所以不要当做模板的顶级元素，
-> 因为Intact模板只能返回一个元素，此时应该用一个元素将它包起来
-
-> `@since 1.0.0` `Tooltip`在`Vue/React`下渲染不会被元素包裹，这可能会影响你之前项目中定义的样式，
-> 如需渲染包裹元素，请做如下配置
-> ```js
-> // @code 
-> import {configure} from 'kpc';
->
-> // 该配置全局生效
-> configure({useWrapper: true});
-> ```
-
+> 与`Dropdown`一样，`Tooltip`会返回两个元素（触发器和菜单），所以不要作为Vue2.0的模板顶层返回元素
+> 因为Vue2.0只支持返回一个元素
 
 ```vdt
 import {Tooltip} from 'kpc';

package/components/tooltip/demos/trigger.md

@@ -7,8 +7,7 @@ order: 2
 鼠标离开触发器，弹层就会消失，如果我们需要鼠标能离开触发器并悬浮在弹层上，需要添加`canHover`属性
 
 ```vdt
-import {Tooltip} from 'kpc';
-import {ButtonGroup, Button} from 'kpc';
+import {Tooltip, ButtonGroup, Button} from 'kpc';
 
 <ButtonGroup>
     <Tooltip content="hover">