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

package/components/divider/demos/basic.md

@@ -0,0 +1,35 @@
+---
+title: 基本用法
+order: 0
+---
+
+`Divider`组件为区域内容的分割线，`dashed`属性可定义为虚线。
+
+```vdt
+import {Card, Divider} from 'kpc';
+
+<div>
+    <Card>
+        <div>默认直线</div>
+        <Divider/>
+        <div>虚线</div>
+        <Divider borderType={this.get('border')}/>
+    </Card>
+</div>
+```
+
+```ts
+
+interface Props {
+    border?: 'solid' | 'dashed' | 'dotted' | 'double'
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            border: 'dashed'
+        } as Props;
+    }
+}
+```

package/components/divider/demos/horizontal.md

@@ -0,0 +1,31 @@
+---
+title: 排列
+order: 2
+---
+
+通过`type`属性设置排列方式。
+
+```vdt
+import {Card, Divider, Icon} from 'kpc';
+
+<div class="divider-content">
+    Text
+    <Divider type="vertical"></Divider>
+    <a href="#">Link</a>
+    <Divider type="vertical">Text</Divider>
+    <a href="#">Link</a>
+</div>
+```
+
+```styl
+.divider-content
+    height 20px
+    display flex
+    align-items center
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+}
+```

package/components/divider/demos/margin.md

@@ -0,0 +1,32 @@
+---
+title: 外边距
+order: 3
+---
+
+通过`type`属性设置排列方式。
+
+```vdt
+import {Divider} from 'kpc';
+
+<div>
+    <div v-for={this.get('margin')}>
+        margin {$value}
+        <Divider margin={$value}/>
+    </div>
+    自定义margin
+    <Divider margin={30}/>
+    自定义margin
+    <Divider style={{margin: '8px 0 0 0'}}/>
+</div>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            margin: ['large', 'default', 'small', 'none'] as const
+        }
+    }
+}
+```

package/components/divider/demos/text.md

@@ -0,0 +1,27 @@
+---
+title: 文字及位置
+order: 1
+---
+
+`Divider`分割线可以设置文字，文字位置通过`position`属性设置。
+
+```vdt
+import {Card, Divider} from 'kpc';
+
+<div>
+    <Card>
+        <div>卡片内容</div>
+        <Divider>Text</Divider>
+        <div>卡片内容</div>
+        <Divider position="left">Text</Divider>
+        <div>卡片内容</div>
+        <Divider position="right">Text</Divider>
+    </Card>
+</div>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+}
+```

package/components/divider/index.md

@@ -0,0 +1,16 @@
+---
+title: 分割线
+category: 组件
+order: 30
+sidebar: doc
+---
+
+# 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| borderType | 定义线的类型 | `"solid"` | `"dashed"` | `"dotted"` | `"double"` | `"solid"` |
+| position | 定义文字位置 | `"left"` | `"right"` | `"center"` | `"center"` |
+| type | 定义菜单排列方式：垂直，水平 | `"vertical"` | `"horizontal"` | `"vertical"` |
+| theme | 定义菜单主题 | `"light"` | `"dark"` | `"light"` |
+| margin | 定义`Divider`外边距 | `"large"` | `"default"` | `"small"` | `"none"` | `number` | `"default"` |

package/components/divider/index.ts

@@ -0,0 +1,36 @@
+import {Component, TypeDefs} from 'intact';
+import template from './index.vdt';
+import { useConfigContext } from '../config';
+
+export interface DividerProps {
+    borderType?: 'solid' | 'dashed' | 'dotted' | 'double',
+    position?: 'left' | 'right' | 'center',
+    type?: 'vertical' | 'horizontal',
+    theme?: 'light' | 'dark',
+    margin?: 'large' | 'default' | 'small' | 'none' | number,
+}
+
+const typeDefs: Required<TypeDefs<DividerProps>> = {
+    borderType: ['solid', 'dashed', 'dotted', 'double'],
+    position: ['left', 'right', 'center'],
+    type: ['vertical', 'horizontal'],
+    theme: ['light', 'dark'],
+    margin: ['large', 'default', 'small', 'none', Number]
+};
+
+const defaults = (): Partial<DividerProps> => ({
+    borderType: 'solid',
+    position: 'center',
+    type: 'horizontal',
+    theme: 'light',
+    margin: 'default'
+});
+
+export class Divider extends Component<DividerProps> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+
+    private config = useConfigContext();
+}
+

package/components/divider/index.vdt

@@ -0,0 +1,35 @@
+import {makeStyles} from './styles';
+import {getRestProps, addStyle} from '../utils';
+
+const {
+    children, className, borderType, 
+    position, type, theme, margin,
+    style
+} = this.get();
+const { k } = this.config;
+const _style = {};
+if (typeof margin === 'number') {
+    const _margin = type === 'vertical' ? `0 ${margin}px` : `${margin}px 0`;
+    _style.margin = _margin;
+}
+
+const classNameObj = {
+    [`${k}-divider`]: true,
+    [`${k}-${theme === 'dark' ? 'dark' : 'light'}`]: theme,
+    [`${k}-${type}`]: type,
+    [`${k}-${margin}`]: margin && typeof margin !== 'number',
+    [`${k}-with-text`]: children && type === 'horizontal',
+    [`${k}-${position}`]: position !== 'center',
+    [makeStyles(k, borderType)]: true,
+    [className]: className,
+};
+
+<div
+    {...getRestProps(this)}
+    class={classNameObj}
+    style={addStyle(style, _style)}
+>
+    <div v-if={children && type === 'horizontal'} class={`${k}-divider-text`}>
+        {children}
+    </div>
+</div>

package/components/divider/styles.ts

@@ -0,0 +1,109 @@
+import {css} from '@emotion/css';
+import {theme, setDefault} from '../../styles/theme';
+import {deepDefaults} from '../../styles/utils';
+import '../../styles/global';
+import { cache } from '../utils';
+
+const sizes = ['large', 'default', 'small'] as const;
+
+const defaults = {
+    positionOffset: '5%',
+    get borderColor() { return theme.color.darkBorder },
+
+    light: {
+        get borderColor() { return theme.color.disabledBg },
+    },
+
+    large: {
+        get margin() { return theme.large.padding},
+    }
+    
+};
+
+let divider: typeof defaults;
+setDefault(() => {
+    divider = deepDefaults(theme, {divider: defaults}).divider;
+    makeStyles?.clearCache();
+});
+
+export const makeStyles = cache(function makeStyles(k: string, borderType: string) {
+    return css`
+        &.${k}-divider {
+            padding: 0;
+            border-top: 1px ${borderType} ${divider.borderColor};
+        }
+
+        &.${k}-light {
+            border-top-color: ${divider.light.borderColor};
+            &.${k}-with-text {
+                &::before, &::after {
+                    border-top-color: ${divider.light.borderColor};
+                }
+            }
+            &.${k}-vertical {
+                border-right-color: ${divider.light.borderColor};
+            }
+        }
+
+        &.${k}-vertical {
+            border-top: 0; 
+            display: inline-block;
+            height: 100%;
+            border-right: 1px solid ${divider.borderColor};
+            vertical-align: middle;
+        }
+
+        &.${k}-horizontal {
+            width: 100%;
+            min-width: 100%;
+        }
+
+        &.${k}-with-text {
+            border-top: 0;
+            display: flex;
+            align-items: center;
+            white-space: nowrap;
+            text-align: center;
+            &::before, &::after {
+                width: 50%;
+                content: '';
+                transform: translateY(50%);
+                border-top: 1px solid ${divider.borderColor};
+            }
+        }
+
+        .${k}-divider-text {
+            padding: 0 16px;
+        }
+
+        &.${k}-left {
+            &::before {
+                width: ${divider.positionOffset};
+            }
+            &::after {
+                width: calc(100% - ${divider.positionOffset});
+            }
+        }
+
+        &.${k}-right {
+            &::before {
+                width: calc(100% - ${divider.positionOffset});
+            }
+            &::after {
+                width: ${divider.positionOffset};
+            }
+        }
+
+        // margin sizes
+        ${sizes.map(size => {
+            return css`
+                &.${k}-${size} {
+                    margin: ${theme[size].margin} 0;
+                    &.${k}-vertical {
+                        margin: 0 ${theme[size].margin};
+                    }
+                }
+            `;
+        })}
+    `;
+});

package/components/dropdown/dropdown.ts

@@ -99,7 +99,7 @@ export class Dropdown<
         // ignore whitespaces between elements in Vue
         if ((this as any).$isVue || (this as any).$isVueNext) {
             if (Array.isArray(children)) {
-                children = children.filter(child => child !== ' ');
+                children = children.filter(child => child !== ' ' && child /* comment is null in vue3 */);
             }
         }
         if (process.env.NODE_ENV !== 'production') {

package/components/ellipsis/demos/basic.md

@@ -0,0 +1,44 @@
+---
+title: 基本用法
+order: 0
+---
+
+`width`属性可定义可展示的宽度，若不设置`width`，默认父级宽度为准。`maxLines`设置多行忽略最大行数。
+
+```vdt
+import {Ellipsis, Split} from 'kpc';
+
+<Split style="width: 400px">
+    <b:first>
+        <Ellipsis class="panel">测试测试测试测试测试测试</Ellipsis>
+        <br/>
+        <Ellipsis class="panel" maxLines={2}>最大几行忽略最大几行忽略最大几行忽略</Ellipsis>
+    </b:first>
+    <b:last>
+        <Ellipsis class="panel" disabled={this.get('disabled')}>不展示tooltip不展示tooltip</Ellipsis>
+    </b:last>
+</Split>
+```
+
+```styl
+.k-split
+    border 1px solid #ccc
+    height 200px
+    margin-bottom 20px
+.panel
+    margin 10px
+```
+```ts
+interface Props {
+    disabled?: boolean
+}
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            disabled: true
+        };
+    }
+}
+```

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
+    };
+}