@king-design/intact 3.2.2-beta.0 → 3.3.1

package/components/ellipsis/demos/custom.md

@@ -0,0 +1,36 @@
+---
+title: 自定义内容
+order: 2
+---
+
+`Ellipsis`支持任意自定义内容。
+
+```vdt
+import {Ellipsis, Split, Button, Icon} from 'kpc';
+
+<div style={{width: '200px'}}>
+    <Ellipsis class="panel tooltip-class">
+        <Icon class="ion-heart" />
+        <Button type="primary">测试</Button>
+        <Icon class="ion-heart" />
+        <Button type="primary">测试</Button>
+        <Icon class="ion-heart" />
+        <Button type="primary">测试</Button>
+        <Icon class="ion-heart" />
+        <Button type="primary">测试</Button>
+        <Icon class="ion-heart" />
+        <Button type="primary">测试</Button>
+    </Ellipsis>
+</div>
+```
+
+```styl
+.k-split
+    border 1px solid #ccc
+    height 200px
+    margin-bottom 20px
+.k-btn
+    margin 10px
+.panel
+    margin 10px
+```

package/components/ellipsis/demos/position.md

@@ -0,0 +1,24 @@
+---
+title: tooltip位置
+order: 1
+---
+
+`position`属性可以设置`tooltip`的位置，参看[Tooltip](https://design.ksyun.com/components/tooltip/?_blank){target="_blank"}组件的`position`属性。
+
+```vdt
+import {Ellipsis} from 'kpc';
+
+<div>
+    <Ellipsis position="right" style={{width: '90px'}}>tooltip在右侧tooltip在右侧</Ellipsis>
+    <Ellipsis position="bottom" style={{width: '90px'}}>tooltip在下方tooltip在下方</Ellipsis>
+</div>  
+```
+
+```styl
+.k-split
+    border 1px solid #ccc
+    height 200px
+    margin-bottom 20px
+.panel
+    margin 10px
+```

package/components/ellipsis/index.md

@@ -0,0 +1,14 @@
+---
+title: 超长忽略
+category: 组件
+order: 30
+sidebar: doc
+---
+
+# 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| maxLines | 定义多行省略最大行数 | `number` | `undefined` |
+| position | 菜单弹出的位置，默认在触发器正上方向上偏移`10px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` |
+| disabled | 定义是否展示tooltip | `boolean` | `false` |

package/components/ellipsis/index.spec.ts

@@ -0,0 +1,58 @@
+import BasicDemo from '~/components/ellipsis/demos/basic';
+import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
+import {Ellipsis} from './';
+
+describe('Ellipsis', () => {
+    afterEach(() => unmount());
+
+    it('should support drag Ellipsis', async () => {
+        const [instance, element] = mount(BasicDemo);        
+        const [ellipsis1, ellipsis2] = element.querySelectorAll<HTMLElement>('.k-ellipsis')!;
+
+        let dragLine = element.querySelector('.k-split-line-wrapper') as HTMLElement;
+        // There is no tooltip content by default
+        expect(getElement('.k-tooltip-content')).to.be.undefined;
+
+        // mouse move
+        dispatchEvent(dragLine, 'mousedown', {which: 1, clientX: 200, clientY: 0});
+        dispatchEvent(document, 'mousemove', {clientX: 100, clientY: 0});
+        dispatchEvent(dragLine, 'mouseup');
+        await wait(200);
+        expect(element.outerHTML).to.matchSnapshot();
+
+        // mouseenter ellipsis dom
+        const children1 = ellipsis1.firstElementChild!;
+        dispatchEvent(children1, 'mouseenter');
+        await wait(0);
+        expect(children1.classList.contains('k-dropdown-open')).to.be.true;
+        let content1 = getElement('.k-tooltip-content')!;
+        expect(content1.textContent).eql('测试测试测试测试测试测试');
+
+        const children2 = ellipsis2.firstElementChild!;
+        dispatchEvent(children2, 'mouseenter');
+        await wait(0);
+        let content2 = getElement('.k-tooltip-content')!;
+        expect(content2.textContent).eql('最大几行忽略最大几行忽略最大几行忽略');
+    });
+
+    it('should disabled tooltip', async () => {
+        const [instance, element] = mount(BasicDemo);        
+        const ellipsis3 = element.querySelectorAll<HTMLElement>('.k-ellipsis')[2]!;
+        let dragLine = element.querySelector('.k-split-line-wrapper') as HTMLElement;
+        
+        dispatchEvent(dragLine, 'mousedown', {which: 1, clientX: 200, clientY: 0});
+        dispatchEvent(document, 'mousemove', {clientX: 300, clientY: 0});
+        dispatchEvent(dragLine, 'mouseup');
+        await wait(200);
+
+        // disabled close tooltip
+        expect(ellipsis3.firstElementChild!.classList.contains('k-dropdown-open')).to.be.false;
+        instance.set('disabled', false);
+        await wait();
+
+        const children3 = ellipsis3.firstElementChild!;
+        dispatchEvent(children3, 'mouseenter');
+        await wait();
+        expect(children3.classList.contains('k-dropdown-open')).to.be.true;
+    });
+});

package/components/ellipsis/index.ts

@@ -0,0 +1,36 @@
+import { Component, TypeDefs, createRef } from 'intact';
+import template from './index.vdt';
+import { useEllipsis } from './useEllipsis';
+import { useConfigContext } from '../config';
+import { Options } from '../position';
+
+export type Position = Options;
+export interface EllipsisProps {
+    maxLines?: number,
+    disabled?: boolean,
+    position?: Position | 'left' | 'bottom' | 'right' | 'top',
+    theme?: 'light' | 'dark',
+}
+
+const typeDefs: Required<TypeDefs<EllipsisProps>> = {
+    maxLines: Number,
+    disabled: Boolean,
+    position: [Object, 'left', 'bottom', 'right', 'top'],
+    theme: ['light', 'dark'],
+};
+
+const defaults = (): Partial<EllipsisProps> => ({
+    disabled: false,
+    theme: 'light'
+});
+
+export class Ellipsis extends Component<EllipsisProps> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+
+    private ellipsis = useEllipsis();
+
+    private config = useConfigContext();
+}
+

package/components/ellipsis/index.vdt

@@ -0,0 +1,39 @@
+import { makeStyles } from './styles';
+import {Tooltip} from '../tooltip';
+import {getRestProps, addStyle} from '../utils';
+
+const {
+    children, className, maxLines, 
+    disabled, position, theme, style
+} = this.get();
+const { k } = this.config;
+
+const { showTooltip, ellipsisRef } = this.ellipsis;
+const tooltip = showTooltip.value && !disabled;
+const wrapper = <div class={{
+    'c-ellipsis': true,
+    [`${k}-ellipsis-wrapper`]: true,
+    [className]: className && !tooltip,
+}}>{children}</div>;
+
+<div
+    {...getRestProps(this)}
+    class={{
+        [`${k}-ellipsis`]: true,
+        [`${k}-multiline`]: maxLines,
+        [makeStyles(k, maxLines)]: true,
+    }}
+    ref={ellipsisRef}
+>
+    <Tooltip
+        v-if={tooltip}
+        position={position}
+        theme={theme}
+        class={className}
+    >
+        {wrapper}
+        <b:content>{children}</b:content> 
+    </Tooltip>
+    <template v-else>{wrapper}</template>
+</div>
+

package/components/ellipsis/styles.ts

@@ -0,0 +1,22 @@
+import {css} from '@emotion/css';
+import {setDefault} from '../../styles/theme';
+import '../../styles/global';
+import { cache } from '../utils';
+
+setDefault(() => {
+    makeStyles?.clearCache();
+});
+
+export const makeStyles = cache(function makeStyles(k: string, maxLines: number) {
+    return css`
+        width: 100%;
+        &.${k}-multiline {
+            .k-ellipsis-wrapper {
+                white-space: normal;
+                display: -webkit-box;
+                -webkit-line-clamp: ${maxLines};
+                -webkit-box-orient: vertical;
+            }
+        }
+    `;
+});

package/components/ellipsis/useEllipsis.ts

@@ -0,0 +1,31 @@
+import {useInstance, createRef} from 'intact';
+import type {Ellipsis} from './';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { useState } from '../../hooks/useState';
+
+export function useEllipsis() {
+    const instance = useInstance() as Ellipsis;
+    const ellipsisRef = createRef<HTMLDivElement>();
+    let showTooltip = useState<boolean>(false);
+
+    useResizeObserver(ellipsisRef, isShowTooltip);
+
+    function isShowTooltip() {
+        const isMulti = instance.get('maxLines');
+        const element = ellipsisRef.value!.children[0] as HTMLDivElement;
+
+        const _showTooltip = isMulti
+            ? element.scrollHeight > element.clientHeight
+            : element.offsetWidth < element.scrollWidth;
+        
+        requestAnimationFrame(() => {
+            showTooltip.set(_showTooltip);
+        });
+    }
+    
+
+    return {
+        ellipsisRef,
+        showTooltip
+    };
+}

package/components/input/index.ts

@@ -56,7 +56,7 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     type?: HTMLInputTypes 
     value?: V
     defaultValue?: string | number
-    placeholder?: string
+    placeholder?: string | number
     readonly?: boolean
     clearable?: boolean
     disabled?: boolean
@@ -98,7 +98,7 @@ const typeDefs: Required<TypeDefs<Omit<InputProps, keyof InputHTMLAttributes>>>
     type: String,
     value: [String, Number],
     defaultValue: [String, Number],
-    placeholder: String,
+    placeholder: [String, Number],
     readonly: Boolean,
     clearable: Boolean,
     disabled: Boolean,

package/components/menu/demos/showCollapseArrow.md

@@ -6,7 +6,7 @@ order: 6
 `showCollapseArrow`定义是否展示折叠按钮，`MenuTitle`定义菜单标题项。
 
 ```vdt
-import {Menu, MenuItem, Icon, MenuTitle, Switch, ButtonGroup, Button} from 'kpc';
+import {Menu, MenuItem, Icon, MenuTitle, Switch, ButtonGroup, Button, Divider} from 'kpc';
 <div>
     <ButtonGroup checkType="radio"
         v-model="theme"
@@ -44,7 +44,7 @@ import {Menu, MenuItem, Icon, MenuTitle, Switch, ButtonGroup, Button} from 'kpc'
         <MenuTitle>title 1</MenuTitle>
         <MenuItem key="1">menu 1</MenuItem>
         <MenuItem key="2">menu 2</MenuItem>
-        <MenuItem key="3">menu 3</MenuItem>
+        <MenuItem key="3">menu 3menu 3menu 3menu 3menu 3menu 3</MenuItem>
         <MenuTitle>title 2</MenuTitle>
         <MenuItem key="4">menu 1</MenuItem>
         <MenuItem key="5" disabled>menu 2</MenuItem>
@@ -57,12 +57,13 @@ import {Menu, MenuItem, Icon, MenuTitle, Switch, ButtonGroup, Button} from 'kpc'
                 <MenuItem key="6-4">
                     sub menu 7
                     <Menu>
-                        <MenuItem key="6-7-1">Option 1</MenuItem>
-                        <MenuItem key="6-7-2">Option 2</MenuItem>
+                        <MenuItem key="6-7-1">option 1</MenuItem>
+                        <MenuItem key="6-7-2">option 2</MenuItem>
                     </Menu>
                 </MenuItem>
             </Menu>
         </MenuItem>
+        <Divider theme={ this.get('theme') === 'white' ? 'light' : this.get('theme')} class="divider-style"/>
         <MenuItem key="8" to="/">menu 8</MenuItem>
     </Menu>
 </div>
@@ -71,6 +72,8 @@ import {Menu, MenuItem, Icon, MenuTitle, Switch, ButtonGroup, Button} from 'kpc'
 ```styl
 .k-switch
     margin 0 16px
+.divider-style
+    margin 4px 0 0 0
 ```
 
 ```ts

package/components/menu/item.vdt

@@ -3,12 +3,13 @@ import {Dropdown, DropdownItem} from '../dropdown';
 import {Tooltip} from '../tooltip';
 import {Icon} from '../icon';
 import {Menu} from './menu';
+import {Ellipsis} from '../ellipsis';
 import {getRestProps, expandAnimationCallbacks} from '../utils';
 import {isNullOrUndefined} from 'intact-shared';
 import {makeItemStyles, makeTitleStyles, makeNestedMenuStyles} from './styles';
 
 const rootMenu = this.rootMenu;
-const {theme, type, dot: rootDot} = rootMenu.get();
+const {theme, type, dot: rootDot, size} = rootMenu.get();
 const {children, key, className, disabled, dot} = this.get();
 const {isHighlighted, isSelected} = rootMenu.highlight;
 const {isExpanded: isExpandedKey} = this.expanded;
@@ -36,7 +37,9 @@ const title = (children) => (
         ev-click={this.onClick.bind(this, subMenuVNode)}
     >
         <Icon class={`${k}-menu-dot ion-record`} v-if={showDot} />
-        <div class={`${k}-menu-name`}>{children}</div>
+        <div class={`${k}-menu-name`}>
+            <Ellipsis position="bottom">{children}</Ellipsis>
+        </div>
         <Icon class={`${k}-menu-item-arrow ion-arrow-down-b`} v-if={subMenuVNode} />
     </div>
 );
@@ -52,7 +55,7 @@ const title = (children) => (
             {(() => {
                 if (subMenuVNode) {
                     const paddingLeft = this.parentMenu.get('_paddingLeft');
-                    const [_classname, _paddingLeft] = makeNestedMenuStyles(k, showDot || !!iconVNode, paddingLeft);
+                    const [_classname, _paddingLeft] = makeNestedMenuStyles(k, showDot || !!iconVNode, paddingLeft, size);
                     const className = _$cn({
                         [_classname]: true,
                         [subMenuVNode.className]: subMenuVNode.className,

package/components/menu/styles.ts

@@ -1,6 +1,7 @@
 import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, getLeft, palette} from '../../styles/utils';
+import type {MenuProps} from './menu';
 import '../../styles/global';
 import { cache } from '../utils';
 
@@ -16,7 +17,7 @@ const defaults = {
 
     item: {
         height: '40px',
-        padding: '0 17px',
+        padding: '0 12px',
         bodyPadding: '0 4px',
         color: '#aeaeb9',
         hoverColor: '#fff',
@@ -29,7 +30,7 @@ const defaults = {
 
     title: {
         height: '40px',
-        padding: '0 17px',
+        padding: '0 12px',
         color: '#fff',
     },
 
@@ -113,7 +114,7 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
         // header
         .${k}-menu-header {
             height: ${menu.header.height};
-            padding: 0 21px;
+            padding: 0 16px;
             color: ${menu.header.color};
             font-size: ${menu.header.fontSize};
             font-weight: bold;
@@ -121,9 +122,10 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
 
         .${k}-menu-body {
             padding: ${menu.item.bodyPadding};
-            max-height: calc(100vh - ${menu.header.height});
+            max-height: calc(100% - ${menu.header.height});
             overflow-y: auto;
             overflow-x: hidden;
+            scrollbar-width: none;
         }
 
         // menu title
@@ -168,7 +170,7 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
 
         // theme light
         &.${k}-light {
-            border: 1px solid ${theme.color.disabledBg};
+            border-right: 1px solid ${theme.color.disabledBg};
             background: ${menu.light.bgColor};
             .${k}-menu-header {
                 color: ${menu.light.title.color};
@@ -342,13 +344,9 @@ export const makeItemStyles = cache(function makeItemStyles(k: string) {
             display: flex;
             align-items: center;
             min-width: 0;
-            span {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                min-width: 0;
-            }
             .${k}-icon {
                 color: inherit;
+                display: inline-block;
             }
         }
         .${k}-menu-item-arrow {
@@ -399,8 +397,9 @@ export const makeItemStyles = cache(function makeItemStyles(k: string) {
     `
 });
 
-export const makeNestedMenuStyles = cache(function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft: string = getLeft(menu.item.padding)) {
-    const paddingLeft = `${parentPaddingLeft}${hasIcon ? ' + ' + menu.icon.width + ' + ' + menu.icon.gap : ''}`;
+export const makeNestedMenuStyles = cache(function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft: string = getLeft(menu.item.padding), size: MenuProps['size']) {
+    const fontSize = `${size === 'small' ? menu.small.fontSize : menu.fontSize}`;
+    const paddingLeft = `${parentPaddingLeft}${hasIcon ? ' + ' + menu.icon.width + ' + ' + menu.icon.gap : ' + ' + fontSize}`;
     return [
         css`
             &.${k}-menu {
@@ -410,6 +409,7 @@ export const makeNestedMenuStyles = cache(function makeNestedMenuStyles(k: strin
                 border: none;
                 .${k}-menu-body {
                     padding: 0;
+                    max-height: 100%;
                     .${k}-menu-item-title {
                         padding-left: calc(${paddingLeft});
                     }

package/components/menu/title.vdt

@@ -1,4 +1,5 @@
 import {Icon} from '../icon';
+import {Ellipsis} from '../ellipsis';
 import {getRestProps, findChildren, isComponentVNode} from '../utils';
 import {makeTitleStyles} from './styles';
 
@@ -17,7 +18,7 @@ const classNameObj = {
         [`${k}-menu-name`]: true,
         [makeTitleStyles(k)]: true
     }}>
-        <span v-if={!collapse}>{children}</span>
+        <Ellipsis position="bottom" v-if={!collapse}>{children}</Ellipsis>
         <template v-else>
             {findChildren(children, vNode => isComponentVNode(vNode, Icon))}
         </template>

package/components/select/useInput.ts

@@ -54,7 +54,11 @@ export function useInput(resetKeywords: (keywords: State<string>) => void) {
         const {multiple, filterable} = component.get();
         if (multiple && filterable) {
             focusInput();
-            resetKeywords(keywords);
+            /**
+             * don't reset keywords on multiple mode for continue selection
+             * https://github.com/ksc-fe/kpc/issues/983
+             */
+            // resetKeywords(keywords);
         }
     });
 

package/components/table/styles.ts

@@ -19,7 +19,7 @@ const defaults = {
     thead: {
         get bgColor() { return theme.color.bg },
         get color() { return theme.color.lightBlack },
-        padding: `0 5px 0 12px`,
+        padding: `0 8px 0 12px`,
         fontSize: `12px`,
         fontWeight: `bold`,
         textAlign: 'left',
@@ -31,7 +31,7 @@ const defaults = {
     // tbody 
     tbody: {
         get hoverBgcolor() { return theme.color.bg },
-        padding: `11px 5px 11px 12px`,
+        padding: `11px 8px 11px 12px`,
     },
 
     // stripe
@@ -129,6 +129,9 @@ export const makeStyles = cache(function makeStyles(k: string) {
                 top: 50%;
                 transform: translateY(-50%);
             }
+            &.${k}-fixed-right:before {
+                left: -2px;
+            }
             &:first-of-type:before {
                 display: none;
             }

package/components/table/table.vdt

@@ -120,7 +120,7 @@ const tbody = (
         {!hasData ? 
             <tr key="table-empty">
                 <td colspan={colCount} class={`${k}-table-empty`}>
-                    <b:empty>{_$('/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~')}</b:empty>
+                    <b:empty>{_$('暂无数据')}</b:empty>
                 </td>
             </tr> :
             (() => {

package/components/tag/index.spec.ts

@@ -4,7 +4,7 @@ import TagsDemo from '~/components/tag/demos/tags';
 import DraggableDemo from '~/components/tag/demos/draggable';
 
 describe('Tag', () => {
-    // afterEach(() => unmount());
+    afterEach(() => unmount());
 
     it('should not close tag if we has prevented default', async () => {
         const [instance, element] = mount(ClosableDemo);

package/components/tag/tags.vdt

@@ -44,7 +44,7 @@ const vNodes = children.value;
             +{hiddenChildren.value.length}
         </Tag>
         <b:content>
-            <div class={classNameObj}>{hiddenChildren.value}</div>
+            <div class={{ ...classNameObj, [`${k}-nowrap`]: false /* should not nowrap */ }}>{hiddenChildren.value}</div>
         </b:content>
     </Tooltip>
     <b:append />

package/components/tooltip/styles.ts

@@ -150,7 +150,6 @@ export const makeStyles = cache(function makeStyles(k: string) {
                                 const borderDirection = directionMap[direction as keyof typeof directionMap];
                                 return css`
                                     &.${k}-${direction} {
-                                        border-${borderDirection}-color: ${borderColor};
                                         &:before {
                                             border-${borderDirection}-color: ${bgColor};
                                         }

package/components/upload/index.vdt

@@ -10,7 +10,7 @@ import {UploadFileStatus} from './useUpload';
 
 const {
     className, accept, multiple, limit,
-    files, children, type, directory
+    files, children, type, directory, disabled
 } = this.get();
 
 const drag = this.drag;
@@ -22,6 +22,7 @@ const classNameObj = {
     [`${k}-drag`]: type === 'drag', 
     [`${k}-dragover`]: drag.dragOver.value, 
     [`${k}-gallery`]: type === 'gallery',
+    [`${k}-disabled`]: disabled,
     [makeStyles(k)]: true,
 };
 
@@ -40,7 +41,7 @@ const handle = (
         <b:content>
             <b:children v-if={children}>{children}</b:children>
             <template v-else-if={type !== 'gallery'}>
-                <Button v-if={type === 'select'}>
+                <Button disabled={disabled} v-if={type === 'select'}>
                     <Icon class={`${k}-icon-upload`} />
                     {_$('点击上传')}
                 </Button>

package/components/upload/styles.ts

@@ -256,6 +256,17 @@ export const makeStyles = cache(function makeStyles(k: string) {
                 transform: translateY(-50%);
             }
         }
+        &.${k}-disabled {
+            .${k}-upload-add, .${k}-upload-handle {
+                cursor: auto;
+                a {
+                    color: ${upload.color};
+                }
+                &:hover {
+                    border-color: ${theme.color.border}
+                }
+            }
+        }
     `;
 });
 

package/components/view/index.ts

@@ -0,0 +1,24 @@
+import { Component, createVNode as h, TypeDefs } from 'intact';
+
+export interface ViewProps {
+    tag?: string,
+} 
+
+const typeDefs: Required<TypeDefs<ViewProps>> = {
+    tag: String,
+};
+
+/**
+ * A component only used in React or Vue to bind event, so that
+ * it can use Intact Event system to stop propagation (stopPropagation).
+ */
+export class View extends Component<ViewProps> {
+    static template(this: View) {
+        const { tag, ...rest } = this.get();
+        return h(tag!, rest as any);
+    }
+    static typeDefs = typeDefs;
+    static defaults() {
+        return { tag: 'div' };
+    }
+}

package/components/wave/index.ts

@@ -72,6 +72,9 @@ export class Wave extends Component<WaveProps> {
         const {disabled} = this.get();
         const node = e.target as HTMLElement;
 
+        // configProvider全局禁用动效
+        if (this.config.disableWave) return;
+
         // 点击输入框中的icon时，此时输入框不需要动效
         const isInput = instance!.classList.contains('k-input-wrapper');
         if (disabled || isInput && node!.classList.contains(this.config.cls('icon'))) return;

package/es/components/breadcrumb/index.js

@@ -9,7 +9,7 @@ var typeDefs = {
 };
 var defaults = function defaults() {
   return {
-    separator: '>'
+    separator: ''
   };
 };
 export var Breadcrumb = /*#__PURE__*/function (_Component) {