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

package/components/tag/demos/draggable.md

@@ -0,0 +1,49 @@
+---
+title: 标签可拖动
+order: 5
+---
+
+```vdt
+import {Tags, Tag, Tooltip} from 'kpc';
+
+<div>
+    <Tags draggable>
+        <Tag v-for={this.get('tags1')}
+            key={$value}
+            type={$value}
+        >{$value}</Tag>
+        <Tooltip content="test" key="test">
+             <Tag>with tooltip</Tag>
+        </Tooltip>
+    </Tags>
+    <br />
+    <Tags draggable nowrap style="width: 300px;">
+        <Tag v-for={this.get('tags2')}
+            key={$value}
+            type={$value}
+        >{$value}</Tag>
+        <Tooltip content="test" key="test">
+             <Tag>with tooltip</Tag>
+        </Tooltip>
+    </Tags>
+</div>
+```
+
+```ts
+import {TagProps} from 'kpc';
+
+interface Props {
+    tags1: Required<TagProps>['type'][]
+    tags2: Required<TagProps>['type'][]
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            tags1: ['default', 'primary', 'success', 'warning', 'danger'],
+            tags2: ['default', 'primary', 'success', 'warning', 'danger'],
+        } as Props;
+    }
+}
+```

package/components/tag/demos/tags.md

@@ -0,0 +1,72 @@
+---
+title: 标签组
+order: 4
+---
+
+使用`Tags`包裹`Tag`可以展示标签组，给`Tags`指定`nowrap`可以让标签自适应仅展示成一行，超出的部分会隐藏，
+同时会展示隐藏的数量
+
+```vdt
+import {Tags, Tag, Split, Tooltip} from 'kpc';
+
+<Split style="width: 600px; background: #e1e1e1;">
+    <b:first>
+        <Tags>
+            <Tag v-for={this.get('tags1')}
+                key={$value}
+                type={$value}
+                closable
+                ev-close={(e) => this.remove('tags1', $value, e)}
+            >{$value}</Tag>
+        </Tags>
+    </b:first>
+    <b:last>
+        <Tags nowrap>
+            <Tag v-for={this.get('tags2')}
+                key={$value}
+                type={$value}
+                closable
+                ev-close={(e) => this.remove('tags2', $value, e)}
+            >{$value}</Tag>
+            <Tooltip content="test" key="test">
+                 <Tag>with tooltip</Tag>
+            </Tooltip>
+        </Tags>
+    </b:last>
+</Split>
+```
+
+```ts
+import {TagProps} from 'kpc';
+
+interface Props {
+    tags1: Required<TagProps>['type'][]
+    tags2: Required<TagProps>['type'][]
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            tags1: ['default', 'primary', 'success', 'warning', 'danger'],
+            tags2: ['default', 'primary', 'success', 'warning', 'danger'],
+        } as Props;
+    }
+
+    remove(name: keyof Props, type: Required<TagProps>['type'], e: MouseEvent) {
+        e.preventDefault();
+
+        const tags = this.get(name).filter((tag) => tag !== type);
+        this.set(name, tags); 
+    }
+}
+```
+
+```react-methods
+remove(name: keyof Props, type: Required<TagProps>['type'], e: MouseEvent) {
+    e.preventDefault();
+
+    const tags = this.state[name].filter((tag) => tag !== type);
+    this.setState({[name as 'tags1']: tags});
+}
+```

package/components/tag/index.md

@@ -7,6 +7,8 @@ sidebar: doc
 
 # 属性
 
+## Tag
+
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | type | 组件类型 | `"default"` | `"primary"` | `"success"` | `"warning"` | `"danger"` | `"default"` |
@@ -16,8 +18,48 @@ sidebar: doc
 | size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
 | border | 定义边框样式 | `"solid"` | `"dashed"` | `"none"` | `"none"` |
 
+## Tags
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| size | 定义“更多”标签尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
+| border | 定义“更多”标签边框样式 | `"solid"` | `"dashed"` | `"none"` | `"none"` |
+| nowrap |  是否单行展示标签组，超出的部分会隐藏，仅展示隐藏数量 | `boolean` | `flase` |
+| draggable | 标签是否支持拖动排序 | `boolean` | `false` |
+
+# 扩展点
+
+## Tags
+
+| 名称 | 说明 | 参数 |
+| --- | --- | --- |
+| append | 追加到后面的元素，不参与到`Tags`对`Tag`的管理中  | - |
+
+
 # 事件
 
+## Tag
+
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
 | close | 标签关闭事件 | `(e: MouseEvent) => void` |
+
+## Tags
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| dragstart | 拖动开始 | `(v: TagsDragStartParam) => void` |
+| dragend | 拖动结束 | `(v: TagsDragEndParam) => void` |
+
+```ts
+type Key = string | number
+
+export type TagsDragStartParam = {
+    key: Key
+    from: number
+}
+
+export type TagsDragEndParam = TagsDragStartParam & {
+    to: number
+} 
+```

package/components/tag/index.spec.ts

@@ -1,8 +1,10 @@
 import ClosableDemo from '~/components/tag/demos/closable';
-import {mount, unmount, wait} from '../../test/utils';
+import {mount, unmount, wait, dispatchEvent, getElement} from '../../test/utils';
+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);
@@ -18,4 +20,70 @@ describe('Tag', () => {
         await wait(500);
         expect(element.innerHTML).to.matchSnapshot();
     });
+
+    it('should hide tags that overflow', async () => {
+        const [instance, element] = mount(TagsDemo);
+
+        const lastPanel = element.querySelector<HTMLDivElement>('.k-split-last')!;
+
+        await wait(0);
+        expect(lastPanel.innerHTML).to.matchSnapshot();
+
+        // show tooltip
+        let more = lastPanel.querySelector<HTMLDivElement>('.k-tags-more')!;
+        dispatchEvent(more, 'mouseenter');
+        await wait();
+        let tooltip = getElement('.k-tags-tooltip')!;
+        expect(tooltip.querySelectorAll('.k-tag').length).to.eql(3);
+
+        // remove one tag
+        dispatchEvent(lastPanel.querySelector<HTMLElement>('.k-tag-close')!, 'click');
+        await wait(0);
+        expect(lastPanel.innerHTML).to.matchSnapshot();
+
+        // resize
+        const tags = lastPanel.querySelector<HTMLDivElement>('.k-tags')!;
+        tags.style.width = '200px';
+        await wait(200);
+        expect(lastPanel.innerHTML).to.matchSnapshot();
+
+        // show tooltip again (the "more" element will be removed and created again)
+        more = lastPanel.querySelector<HTMLDivElement>('.k-tags-more')!;
+        dispatchEvent(more, 'mouseenter');
+        await wait();
+        tooltip = getElement('.k-tags-tooltip')!;
+        expect(tooltip.querySelectorAll('.k-tag').length).to.eql(3);
+    });
+
+    it('should support drag tags', async () => {
+        const [instance, element] = mount(DraggableDemo);        
+
+        async function test(from: HTMLElement, to: HTMLElement) {
+            dispatchEvent(from, 'dragstart');
+            await wait();
+            dispatchEvent(to, 'dragover');
+            await wait(500);
+            expect(element.innerHTML).to.matchSnapshot();
+            dispatchEvent(from, 'dragend');
+            await wait();
+            expect(element.innerHTML).to.matchSnapshot();
+        }
+        const [tag1, tag2, , , , tag6] = element.querySelectorAll<HTMLElement>('.k-tag');
+        await test(tag1, tag2);
+        await test(tag1, tag6);
+
+        // with more tooltip
+        const [tag11, tag22, , , more] = element.querySelectorAll<HTMLElement>('.k-tags:last-of-type .k-tag');
+        await test(tag11, tag22);
+        await wait(0);
+        dispatchEvent(more, 'mouseenter');
+        await wait();
+        const dropdown = getElement('.k-tags-tooltip')!;
+        const [tag55, tag66] = dropdown.querySelectorAll<HTMLElement>('.k-tag');
+        await test(tag55, tag11);
+        expect(dropdown.innerText).to.eql('warning\nwith tooltip');
+
+        // should not drag to other tags
+        await test(tag11, tag2);
+    });
 });

package/components/tag/index.ts

@@ -1,5 +1,7 @@
 import {TagProps, TagEvents, TagBlocks, Tag as BaseTag} from './base';
 
+export * from './tags';
+
 export type {TagProps, TagEvents, TagBlocks}
 
 // export declare class _Tag extends BaseTag<

package/components/tag/styles.ts

@@ -23,6 +23,11 @@ const defaults = deepDefaults(
         close: {
             fontSize: '20px',
             gap: '8px',
+            /**
+             * fix the width to calculate the width for nowrap tags,
+             * otherwise the width will be decided by font font-icons loaded
+             */
+            width: '7px',
         },
         disabled: {
             get color() { return theme.color.disabled },
@@ -32,24 +37,28 @@ const defaults = deepDefaults(
         large: {
             padding: `0px 8px`,
             height: '24px',
+            get fontSize() { return theme.large.fontSize },
             close: {
-                fontSize: '20px',
-                gap: '12px',
+                fontSize: '22px',
+                gap: '6px',
             }
         },
         small: {
             padding: `0 4px`,
             height: '16px',
+            get fontSize() { return theme.small.fontSize },
             close: {
-                fontSize: '12px',
+                fontSize: '18px',
                 gap: '4px'
             }
         },
         mini: {
             padding: `0 2px`,
             height: '14px',
+            // get fontSize() { return theme.mini.fontSize },
+            fontSize: '11px',
             close: {
-                fontSize: '12px',
+                fontSize: '16px',
                 gap: '2px'
             }
         },
@@ -57,6 +66,9 @@ const defaults = deepDefaults(
             get bgColor() { return theme.color.bg },
         },
 
+        tags: {
+            gap: '8px',
+        }
     },
     types.reduce((memo, type) => {
         if (type === 'disabled') return memo;
@@ -73,6 +85,8 @@ setDefault(() => {
     tag = deepDefaults(theme, {tag: defaults}).tag;
 });
 
+export { tag };
+
 export function makeStyles() {
     return css`
         display: inline-flex;
@@ -85,6 +99,7 @@ export function makeStyles() {
         .k-tag-close {
             font-size: ${tag.close.fontSize};
             margin-left: ${tag.close.gap};
+            width: ${tag.close.width};
         }
 
         &.k-none {
@@ -110,6 +125,7 @@ export function makeStyles() {
                 &.k-${s} {
                     padding: ${styles.padding};
                     height: ${styles.height};
+                    font-size: ${styles.fontSize};
                     .k-tag-close {
                         font-size: ${styles.close.fontSize};
                         margin-left: ${styles.close.gap};
@@ -122,5 +138,38 @@ export function makeStyles() {
         &.k-dashed {
             border-style: dashed;
         }
+
+        // draggable
+        &.k-dragging {
+            opacity: 0;
+        }
+    `;
+}
+
+export function makeTagsStyles() {
+    return css`
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${defaults.tags.gap};
+        position: relative;
+        overflow: hidden;
+        &.k-nowrap {
+            flex-wrap: nowrap;
+            .k-tag {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                flex-shrink: 0;
+            }
+        }
+        .k-tags-more {
+            cursor: default;
+            font-family: monospace;
+        }
+
+        // draggable
+        .k-tag.k-draggable {
+            cursor: move;
+        }
     `;
 }

package/components/tag/tags.ts

@@ -0,0 +1,54 @@
+import { Component, TypeDefs, Key } from 'intact';
+import template from './tags.vdt';
+import { useNowrap } from './useNowrap';
+import { TagProps, typeDefs as tagTypeDefs } from './base';
+import { useChildren } from './useChildren';
+import { useDraggable } from './useDraggable';
+import type {Events} from '../types';
+
+export interface TagsProps extends Pick<TagProps, 'size' | 'border'> {
+    nowrap?: boolean 
+    draggable?: boolean
+}
+
+export type TagsDragStartParam = {
+    key: Key
+    from: number
+}
+
+export type TagsDragEndParam = TagsDragStartParam & {
+    to: number
+} 
+
+export interface TagsEvents {
+    dragstart: [TagsDragStartParam]
+    dragend: [TagsDragEndParam]
+}
+
+const typeDefs: Required<TypeDefs<TagsProps>> = {
+    nowrap: Boolean,
+    draggable: Boolean,
+    size: tagTypeDefs.size,
+    border: tagTypeDefs.border,
+};
+
+const defaults = (): Partial<TagsProps> => ({
+    size: 'default',
+    border: 'none',
+});
+
+const events: Events<TagsEvents> = {
+    dragstart: true,
+    dragend: true,
+};
+
+export class Tags extends Component<TagsProps, TagsEvents> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+    static events = events;
+
+    private children = useChildren();
+    private draggable = useDraggable(this.children);
+    private nowrap = useNowrap(this.draggable);
+}

package/components/tag/tags.vdt

@@ -0,0 +1,50 @@
+import { TransitionGroup } from 'intact';
+import { getRestProps } from '../utils';
+import { makeTagsStyles } from './styles';
+import { Tag } from './';
+import { Tooltip } from '../tooltip';
+import { Tags } from './tags';
+import { Virtual } from '../virtual';
+
+const { className, nowrap, size, border, draggable } = this.get();
+
+const classNameObj = {
+    'k-tags': true,
+    'k-nowrap': nowrap,
+    'k-draggable': draggable,
+    [makeTagsStyles()]: true,
+    [className]: className,
+}
+
+const { containerRef, children, hiddenChildren } = this.nowrap;
+const vNodes = children.value;
+
+/**
+ * We should always render Tooltip in nowrap mode, otherwise it will be removed while we close one tag.
+ * Because we will render all tags to calculate the width
+ */
+<div class={classNameObj} {...getRestProps(this)} ref={containerRef}>
+    <TransitionGroup name="k-fade" v-if={!nowrap}>
+        {vNodes}
+    </TransitionGroup>
+    <template v-else>{vNodes}</template>
+    <Tooltip
+        v-if={nowrap}
+        key="$tooltip"
+        hoverable
+        theme="light"
+        class="k-tags-tooltip"
+    >
+        <Tag key="$more"
+            class={{"k-tags-more": true, 'c-hidden': !hiddenChildren.value.length}}
+            size={size}
+            border={border}
+        >
+            +{hiddenChildren.value.length}
+        </Tag>
+        <b:content>
+            <div class={classNameObj}>{hiddenChildren.value}</div>
+        </b:content>
+    </Tooltip>
+    <b:append />
+</div>

package/components/tag/useChildren.ts

@@ -0,0 +1,42 @@
+import { VNode, useInstance } from 'intact';
+import type { Tags } from './tags';
+import { eachChildren, findChildren, isComponentVNode, ValidVNode } from '../utils';
+import { isStringOrNumber } from 'intact-shared';
+import { useState } from '../../hooks/useState';
+import { Tag } from './';
+import { Dropdown } from '../dropdown';
+import { Tooltip } from '../tooltip';
+
+export function useChildren() {
+    const instance = useInstance() as Tags;
+    const children = useState<VNode[]>([]);
+
+    instance.watch('children', (v) => {
+        const vNodes: VNode[] = [];
+        eachChildren(v, (vNode) => {
+            if (isTagOrContainsTag(vNode)) {
+                vNodes.push(vNode);
+            }
+        })
+        children.set(vNodes);
+    });
+
+    return children;
+}
+
+function isTagOrContainsTag(vNode: ValidVNode): vNode is VNode {
+    if (isStringOrNumber(vNode)) return false;
+
+    if (isComponentVNode(vNode, Tag)) {
+        return true;
+    }
+
+    if (isComponentVNode(vNode, Dropdown) || isComponentVNode(vNode, Tooltip)) {
+        return !!findChildren(vNode.props?.children, (vNode) => {
+            return isTagOrContainsTag(vNode);
+        });
+    }
+
+    return false;
+}
+

package/components/tag/useDraggable.ts

@@ -0,0 +1,97 @@
+import {
+    VNode,
+    useInstance,
+    findDomFromVNode,
+    createVNode as h,
+    Key,
+} from 'intact';
+import type { Tags } from './tags';
+import { nextFrame, debounce, swap } from '../utils';
+import { useState, watchState, State } from '../../hooks/useState';
+import { Virtual } from '../virtual';
+import { cx } from '@emotion/css';
+
+export function useDraggable(originVNodes: State<VNode[]>) {
+    const instance = useInstance() as Tags;
+    const children = useState<VNode[]>([]);
+    const draggingKey = useState<Key | null>(null);
+
+    let draggingIndex: number = -1;
+    let originIndex: number = -1;
+    let lastOverIndex: number = -1; /* let the dragover event only trigger once when tags changed order */
+
+    watchState(originVNodes, render);
+    watchState(draggingKey, render);
+
+    function render() {
+        const { draggable } = instance.get();
+        children.set(!draggable ? originVNodes.value : originVNodes.value.map((vNode, index) => {
+            const key = vNode.key!;
+            return h(Virtual, {
+                'ev-dragstart': () => onStart(key, index),
+                'ev-dragover': (e: MouseEvent) => onOver(e, key, index),
+                'ev-dragend': (e: MouseEvent) => onEnd(e),
+                key,
+                draggable, 
+                className: cx({
+                    'k-dragging': key === draggingKey.value, 
+                    'k-draggable': draggable,
+                })
+            }, vNode); 
+        }));
+
+    }
+
+    function onStart(key: Key, index: number) {
+        draggingIndex = originIndex = index;
+        nextFrame(() => {
+            draggingKey.set(key); 
+        });
+
+        instance.trigger('dragstart', {
+            key,
+            from: index,
+        });
+    }
+
+    function onOver(e: MouseEvent, key: Key, index: number) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Dragging the tag of another tags drag to this tags should be ignored
+        if (draggingIndex === -1) return;
+
+        if (lastOverIndex === index) return;
+        lastOverIndex = index;
+
+        if (index === draggingIndex) return;
+
+        // if the tag has move transition, you cannot drag over it before transition ended.
+        const dom = findDomFromVNode(children.value[index], true) as HTMLElement;
+        if (dom.classList.contains('k-fade-move')) return;
+
+        const vNodes = swap(originVNodes.value, draggingIndex, index);
+
+        lastOverIndex = draggingIndex;
+        draggingIndex = index;
+
+        originVNodes.set(vNodes);
+    }
+
+    function onEnd(e: MouseEvent) {
+        e.preventDefault();
+
+        instance.trigger('dragend', {
+            key: draggingKey.value!,
+            from: originIndex,
+            to: draggingIndex,
+        });
+
+        draggingKey.set(null);
+        lastOverIndex = -1;
+        draggingIndex = -1;
+        originIndex = -1;
+    }
+
+    return children;
+}