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

package/components/table/styles.ts

@@ -4,6 +4,8 @@ import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.large },
+    // transition: '15000s',
     border: `1px solid #e5e5e5`,
     fontSize: `12px`,
     bgColor: `#fff`,
@@ -61,7 +63,7 @@ const defaults = {
     draggingOpacity: `.4`,
 };
 
-let table: any;
+let table: typeof defaults;
 setDefault(() => {
     table = deepDefaults(theme, {table: defaults}).table;
 });
@@ -82,6 +84,11 @@ export function makeStyles() {
             // border-collapse: collapse;
             border-spacing: 0;
             table-layout: fixed;
+            
+            td, 
+            th{
+                transition: all ${table.transition};  
+            }
         }
 
         // thead
@@ -131,7 +138,8 @@ export function makeStyles() {
                     background: ${table.tbody.hoverBgcolor};
                 }
                 &:last-of-type td {
-                    border-bottom: none;
+                    // border-bottom: none;
+                    border-bottom-color: transparent;
                 }
             }
         }
@@ -152,7 +160,7 @@ export function makeStyles() {
             &:after {
                 content: '';
                 display: block;
-                transition: box-shadow ${theme.transition};
+                transition: box-shadow ${table.transition};
                 position: absolute;
                 top: 0;
                 bottom: 0px;
@@ -192,6 +200,9 @@ export function makeStyles() {
             .k-affix-wrapper {
                 overflow: hidden;
             }
+            &.k-fixed {
+                position: relative;
+            }
         }
 
         // type
@@ -233,7 +244,7 @@ export function makeStyles() {
                 // position: absolute;
                 // top: -1px;
                 // left: 2px;
-                transition: transform ${theme.transition};
+                transition: transform ${table.transition};
             }
             &.k-dropdown-open .k-icon {
                 transform: rotate(180deg);
@@ -293,6 +304,7 @@ export function makeStyles() {
         }
         .k-table-expand {
             border-top: ${table.border};
+            box-sizing: content-box;
         }
 
         // select
@@ -306,7 +318,7 @@ export function makeStyles() {
         // }
         .k-table-arrow {
             margin-right: ${table.arrow.gap};
-            transition: transform ${theme.transition};
+            transition: transform ${table.transition};
             position: relative;
             top: -1px;
         }

package/components/table/table.ts

@@ -58,6 +58,7 @@ export interface TableProps<
     resizable?: boolean
     minColWidth?: number
     widthStoreKey?: string
+    draggable?: boolean
 }
 
 export interface TableEvents<T = any, K extends TableRowKey = number> {
@@ -114,6 +115,7 @@ const typeDefs: Required<TypeDefs<TableProps<unknown>>> = {
     resizable: Boolean,
     minColWidth: Number,
     widthStoreKey: String,
+    draggable: Boolean,
 };
 
 const defaults = (): Partial<TableProps> => ({

package/components/table/table.vdt

@@ -26,7 +26,7 @@ const {
     draggable,
 } = this.get();
 const {columns, cols, maxRows, maxCols} = this.columns.getData();
-const {setScrollPosition, scrollPosition, hasFixed, getHasFixedLeft, getOffsetMap} = this.fixedColumns;
+const {scrollPosition, hasFixed, getHasFixedLeft, getOffsetMap} = this.fixedColumns;
 const {scrollRef} = this.scroll;
 const {stickHeader, excludeStickHeader, elementRef, headRef} = this.stickyHeader;
 const classNameObj = {
@@ -71,20 +71,23 @@ const thead = (
                     <FixedColumnsContext.Provider value={offsetMap}>
                         <thead>
                             <tr v-for={columns}>
-                                <th v-if={$key === 0 && checkType !== 'none'}
-                                    {...getClassAndStyleForFixed({
-                                        fixed: hasFixedLeft ? 'left' : false,
-                                    }, 0)} 
-                                    rowspan={maxRows}
-                                >
-                                    <Checkbox v-if={checkType === 'checkbox'}
-                                        value={allCheckedStatus === AllCheckedStatus.All}
-                                        indeterminate={showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate}
-                                        ev-$change:value={toggleCheckedAll}
-                                        disabled={!hasData}
-                                    />
-                                </th>
-                                {$value}
+                                <TransitionGroup name="k-fade-expand" move={false}>
+                                    <th v-if={$key === 0 && checkType !== 'none'}
+                                        {...getClassAndStyleForFixed({
+                                            fixed: hasFixedLeft ? 'left' : false,
+                                        }, 0)}
+                                        rowspan={maxRows}
+                                        key="$checktype"
+                                    >
+                                        <Checkbox v-if={checkType === 'checkbox'}
+                                            value={allCheckedStatus === AllCheckedStatus.All}
+                                            indeterminate={showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate}
+                                            ev-$change:value={toggleCheckedAll}
+                                            disabled={!hasData}
+                                        />
+                                    </th>
+                                    {$value}
+                                </TransitionGroup>
                             </tr>
                         </thead>
                     </FixedColumnsContext.Provider>
@@ -104,91 +107,93 @@ const {isSelected} = this.selected;
 const {loopData, isSpreaded, toggleSpreadRow} = this.tree;
 const {onRowDragStart, onRowDragOver, onRowDragEnd, draggingKey} = this.draggable;
 const tbody = (
-    <TransitionGroup tag="tbody" name="k-fade" move={!draggingKey.value}>
+    <tbody>
         {!hasData ? 
             <tr key="table-empty">
                 <td colspan={colCount} class="k-table-empty">
                     <b:empty>{_$('/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~')}</b:empty>
                 </td>
             </tr> :
-            (() => {
-                const rows = [];
-                loopData((value, index, level, hidden) => {
-                    // don't render if row is hidden
-                    if (hidden) return hidden;
+            <TransitionGroup name="k-fade-in-left" move={!draggingKey.value}>
+                {(() => {
+                    const rows = [];
+                    loopData((value, index, level, hidden) => {
+                        // don't render if row is hidden
+                        if (hidden) return hidden;
 
-                    const status = allStatus[index];
-                    const key = allKeys[index];
-                    const spreaded = isSpreaded(key);
-                    const hasChildren = !!childrenKey && Array.isArray(value[childrenKey]);
-                    const indentSize = indent ? indent * level : 0; 
+                        const status = allStatus[index];
+                        const key = allKeys[index];
+                        const spreaded = isSpreaded(key);
+                        const hasChildren = !!childrenKey && Array.isArray(value[childrenKey]);
+                        const indentSize = indent ? indent * level : 0; 
 
-                    let row = <TableRow
-                        key={key}
-                        cols={cols}
-                        data={value}
-                        checkType={checkType}
-                        hasFixedLeft={hasFixedLeft}
-                        onClick={this.clickRow}
-                        checked={status.checked}
-                        indeterminate={status.indeterminate}
-                        index={index}
-                        disabled={status.disabled}
-                        allDisabled={status.allDisabled}
-                        className={rowClassName && rowClassName(value, index, key)}
-                        merge={merge}
-                        grid={getGrid()}
-                        onChangeChecked={onChangeChecked}
-                        selected={isSelected(key)}
-                        spreaded={spreaded}
-                        hasChildren={hasChildren}
-                        indent={indentSize}
-                        onToggleSpreadRow={toggleSpreadRow}
-                        onBeforeUnmount={this.resetRowStatus.onRowBeforeUnmount}
-                        offsetMap={offsetMap}
+                        let row = <TableRow
+                            key={key}
+                            cols={cols}
+                            data={value}
+                            checkType={checkType}
+                            hasFixedLeft={hasFixedLeft}
+                            onClick={this.clickRow}
+                            checked={status.checked}
+                            indeterminate={status.indeterminate}
+                            index={index}
+                            disabled={status.disabled}
+                            allDisabled={status.allDisabled}
+                            className={rowClassName && rowClassName(value, index, key)}
+                            merge={merge}
+                            grid={getGrid()}
+                            onChangeChecked={onChangeChecked}
+                            selected={isSelected(key)}
+                            spreaded={spreaded}
+                            hasChildren={hasChildren}
+                            indent={indentSize}
+                            onToggleSpreadRow={toggleSpreadRow}
+                            onBeforeUnmount={this.resetRowStatus.onRowBeforeUnmount}
+                            offsetMap={offsetMap}
 
-                        draggable={draggable}
-                        draggingKey={draggingKey.value}
-                        onRowDragStart={onRowDragStart}
-                        onRowDragEnd={onRowDragEnd}
-                        onRowDragOver={onRowDragOver}
-                    />
+                            draggable={draggable}
+                            draggingKey={draggingKey.value}
+                            onRowDragStart={onRowDragStart}
+                            onRowDragEnd={onRowDragEnd}
+                            onRowDragOver={onRowDragOver}
+                        />
 
-                    if ($blocks.tooltip) {
-                        const content = <b:tooltip params={[value, index]} />;
-                        row = (
-                            <Tooltip key={key} position={tooltipPosition} container={tooltipContainer}>
-                                <template>{row}</template>
-                                <b:content>{content}</b:content>
-                            </Tooltip>
-                        );
-                    }
+                        if ($blocks.tooltip) {
+                            const content = <b:tooltip params={[value, index]} />;
+                            row = (
+                                <Tooltip key={key} position={tooltipPosition} container={tooltipContainer}>
+                                    <template>{row}</template>
+                                    <b:content>{content}</b:content>
+                                </Tooltip>
+                            );
+                        }
 
-                    rows.push(row);
-                    if ($blocks.expand) {
-                        const expanded = isExpanded(key);
-                        rows.push(
-                            <tr class={{"k-expand": true, 'k-expanded': expanded}}
-                                key={`${key}.$expand`}
-                            >
-                                <td colspan={colCount}>
-                                    <Transition {...expandAnimationCallbacks}>
-                                        <div v-if={expanded} class="k-table-expand">
-                                            <b:expand params={[value, index]} />
-                                        </div>
-                                    </Transition>
-                                </td>
-                            </tr>
-                        );
-                    }
+                        rows.push(row);
+                        if ($blocks.expand) {
+                            const expanded = isExpanded(key);
+                            rows.push(
+                                <tr class={{"k-expand": true, 'k-expanded': expanded}}
+                                    key={`${key}.$expand`}
+                                >
+                                    <td colspan={colCount}>
+                                        <Transition {...expandAnimationCallbacks}>
+                                            <div v-if={expanded} class="k-table-expand">
+                                                <b:expand params={[value, index]} />
+                                            </div>
+                                        </Transition>
+                                    </td>
+                                </tr>
+                            );
+                        }
 
-                    return hidden || !spreaded;
-                });
+                        return hidden || !spreaded;
+                    });
 
-                return rows;
-            })()
+                    return rows;
+                })()}
+            </TransitionGroup>
         }
-    </TransitionGroup>
+    </tbody>
 );
 
 const tableWidthPx = tableWidth.value ? `${tableWidth.value}px` : null;

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';