@king-design/intact 2.1.1 → 3.0.0-beta.1

package/components/tabs/useScroll.ts

@@ -1,4 +1,10 @@
-import {useInstance, createRef, onMounted, onUpdated, onUnmounted} from 'intact';
+import {
+    useInstance,
+    createRef,
+    onMounted,
+    onUpdated,
+    onUnmounted,
+} from 'intact';
 import {useState} from '../../hooks/useState';
 import type {Tabs} from './';
 import {useResizeObserver} from '../../hooks/useResizeObserver';
@@ -8,7 +14,7 @@ export function useScroll() {
     const scrollRef = createRef<HTMLElement>();
     const wrapperRef = createRef<HTMLElement>();
     const isScroll = useState<boolean>(false);
-    const left = useState<number>(0);
+    const offset = useState<number>(0);
     const enablePrev = useState<boolean>(false);
     const enableNext = useState<boolean>(false);
 
@@ -18,77 +24,130 @@ export function useScroll() {
 
     instance.watch('value', scrollActiveToView, {presented: true});
 
-    function refresh() {
+    function getLength() {
         const {vertical} = instance.get();
-        if (vertical) return;
 
-        const scrollWidth = scrollRef.value!.offsetWidth;
-        const wrapperWidth = wrapperRef.value!.offsetWidth;
+        if (vertical) {
+            return {
+                scrollLength: scrollRef.value!.offsetHeight,
+                wrapperLength: wrapperRef.value!.offsetHeight,
+            };
+        }
+
+        return {
+            scrollLength: scrollRef.value!.offsetWidth,
+            wrapperLength: wrapperRef.value!.offsetWidth,
+        };
+    }
+
+    function refresh() {
+        const {scrollLength, wrapperLength} = getLength();
 
-        isScroll.set(scrollWidth < wrapperWidth);
-        updateTransition(left.value, scrollWidth, wrapperWidth);
+        isScroll.set(scrollLength < wrapperLength);
+        updateTransition(offset.value, scrollLength, wrapperLength);
     }
 
     function updateTransition(
-        _left = left.value,
-        scrollWidth = scrollRef.value!.offsetWidth,
-        wrapperWidth = wrapperRef.value!.offsetWidth,
+        _offset: number,
+        scrollLength: number,
+        wrapperLength: number
     ) {
         let prev = true;
         let next = true;
-        if (_left >= 0) {
-            _left = 0;
+        if (_offset >= 0) {
+            _offset = 0;
             prev = false;
-        } else if (_left <= scrollWidth - wrapperWidth) {
-            _left = scrollWidth - wrapperWidth;
+        } else if (_offset <= scrollLength - wrapperLength) {
+            _offset = scrollLength - wrapperLength;
             next = false;
         }
 
-        left.set(_left);
+        offset.set(_offset);
         enablePrev.set(prev);
         enableNext.set(next);
     }
 
     function prev() {
-        const scrollWidth = scrollRef.value!.offsetWidth;
-        updateTransition(left.value + scrollWidth);
+        const {scrollLength, wrapperLength} = getLength();
+
+        updateTransition(
+            offset.value + scrollLength,
+            scrollLength,
+            wrapperLength
+        );
     }
 
     function next() {
-        const scrollWidth = scrollRef.value!.offsetWidth;
-        updateTransition(left.value - scrollWidth);
+        const {scrollLength, wrapperLength} = getLength();
+
+        updateTransition(
+            offset.value - scrollLength,
+            scrollLength,
+            wrapperLength
+        );
     }
 
     function scrollActiveToView() {
         const {vertical} = instance.get();
-        if (vertical) return;
 
-        const activeTab = scrollRef.value!.querySelector('.k-tab.k-active') as HTMLElement;
+        const activeTab = scrollRef.value!.querySelector(
+            '.k-tab.k-active'
+        ) as HTMLElement;
         if (activeTab) {
-            let _left = left.value;
+            let _offset = offset.value;
             // don't use getBoundingClientRect, it has transform and will return digital number
-            const activeRect = {
-                left: activeTab.offsetLeft,
-                width: activeTab.offsetWidth
-            };
-            const scrollRect = {
-                width: scrollRef.value!.offsetWidth
-            };
-            const wrapperRect = {
-                left: wrapperRef.value!.offsetLeft,
-                width: wrapperRef.value!.offsetWidth
-            };
-            const x = activeRect.left - wrapperRect.left;
-            if (_left + x <= 0) {
-                _left = -x;
-            } else if (x + activeRect.width + _left > scrollRect.width) {
-                _left = -x - activeRect.width + scrollRect.width;
+            let activeRect: {offset: number; length: number};
+            let scrollRect: {length: number};
+            let wrapperRect: {offset: number; length: number};
+
+            if (vertical) {
+                activeRect = {
+                    offset: activeTab.offsetTop,
+                    length: activeTab.offsetHeight,
+                };
+                scrollRect = {
+                    length: scrollRef.value!.offsetHeight,
+                };
+                wrapperRect = {
+                    offset: wrapperRef.value!.offsetTop,
+                    length: wrapperRef.value!.offsetHeight,
+                };
+            } else {
+                activeRect = {
+                    offset: activeTab.offsetLeft,
+                    length: activeTab.offsetWidth,
+                };
+                scrollRect = {
+                    length: scrollRef.value!.offsetWidth,
+                };
+                wrapperRect = {
+                    offset: wrapperRef.value!.offsetLeft,
+                    length: wrapperRef.value!.offsetWidth,
+                };
+            }
+            const offsetDelta = activeRect.offset - wrapperRect.offset;
+            if (_offset + offsetDelta <= 0) {
+                _offset = -offsetDelta;
+            } else if (
+                offsetDelta + activeRect.length + _offset >
+                scrollRect.length
+            ) {
+                _offset = -offsetDelta - activeRect.length + scrollRect.length;
             }
-            left.set(_left);
+            offset.set(_offset);
         } else {
-            left.set(0);
+            offset.set(0);
         }
     }
 
-    return {isScroll, left, enablePrev, enableNext, prev, next, scrollRef, wrapperRef};
+    return {
+        isScroll,
+        offset,
+        enablePrev,
+        enableNext,
+        prev,
+        next,
+        scrollRef,
+        wrapperRef,
+    };
 }

package/components/tag/base.ts

@@ -19,7 +19,7 @@ export interface TagEvents {
 
 export interface TagBlocks { }
 
-const typeDefs: Required<TypeDefs<TagProps>> = {
+export const typeDefs: Required<TypeDefs<TagProps>> = {
     type: ['default', 'primary', 'danger', 'success', 'warning'],
     closable: Boolean,
     closed: Boolean,
@@ -31,7 +31,7 @@ const typeDefs: Required<TypeDefs<TagProps>> = {
 const defaults = (): Partial<TagProps> => ({
     type: 'default',
     size: 'default',
-    border: 'solid',
+    border: 'none',
 });
 
 const events: Events<TagEvents> = {

package/components/tag/demos/border.md

@@ -3,7 +3,7 @@ title: 边框
 order: 3
 ---
 
-通过`border`可以定义边框样式: `solid`(默认) `dashed` `none`
+通过`border`可以定义边框样式: `solid` `dashed` `none`(默认) 
 
 ```vdt
 import {Tag} from 'kpc';
@@ -40,7 +40,7 @@ export default class extends Component {
     static defaults() {
         return {
             types: ['default', 'primary', 'success', 'warning', 'danger'],
-            borders: ['dashed', 'none'],
+            borders: ['solid', 'dashed', 'none'],
         } as Props;
     }
 }

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"` |
@@ -14,7 +16,16 @@ sidebar: doc
 | closed | 是否已关闭 | `boolean` | `false` |
 | disabled | 是否展示禁用状态 | `boolean` | `false` |
 | size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
-| border | 定义边框样式 | `"solid"` | `"dashed"` | `"none"` | `"solid"` |
+| border | 定义边框样式 | `"solid"` | `"dashed"` | `"none"` | `"none"` |
+
+## Tags
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| size | 定义“更多”标签尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
+| border | 定义“更多”标签边框样式 | `"solid"` | `"dashed"` | `"none"` | `"none"` |
+| nowrap |  是否单行展示标签组，超出的部分会隐藏，仅展示隐藏数量 | `boolean` | `flase` |
+| draggable | 标签是否支持拖动排序 | `boolean` | `false` |
 
 # 事件
 

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

@@ -14,14 +14,20 @@ const types = ['primary', 'warning', 'danger', 'success', 'disabled'] as const;
 
 const defaults = deepDefaults(
     {
-        get borderColor() { return theme.color.border },
+        get border() { return `1px solid ${theme.color.border}` },
         get borderRadius() { return theme.borderRadius },
         get fontSize() { return theme.default.fontSize },
         padding: `0 8px`,
         height: '20px',
+        get bgColor() { return theme.color.bg },
         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 },
@@ -29,24 +35,28 @@ const defaults = deepDefaults(
             get bgColor() { return theme.color.disabledBg },
         },
         large: {
-            padding: `0px 16px`,
-            height: '32px',
+            padding: `0px 8px`,
+            height: '24px',
+            get fontSize() { return theme.large.fontSize },
             close: {
-                fontSize: '24px',
-                gap: '12px',
+                fontSize: '22px',
+                gap: '6px',
             }
         },
         small: {
             padding: `0 4px`,
-            height: '18px',
+            height: '16px',
+            get fontSize() { return theme.small.fontSize },
             close: {
                 fontSize: '18px',
                 gap: '4px'
             }
         },
         mini: {
-            padding: `0 1px`,
+            padding: `0 2px`,
             height: '14px',
+            // get fontSize() { return theme.mini.fontSize },
+            fontSize: '11px',
             close: {
                 fontSize: '16px',
                 gap: '2px'
@@ -54,6 +64,10 @@ const defaults = deepDefaults(
         },
         none: {
             get bgColor() { return theme.color.bg },
+        },
+
+        tags: {
+            gap: '8px',
         }
     },
     types.reduce((memo, type) => {
@@ -71,19 +85,21 @@ setDefault(() => {
     tag = deepDefaults(theme, {tag: defaults}).tag;
 });
 
+export { tag };
+
 export function makeStyles() {
     return css`
         display: inline-flex;
         align-items: center;
         padding: ${tag.padding};
-        border: 1px solid ${tag.borderColor};
+        border: ${tag.border};
         border-radius: ${tag.borderRadius};
         font-size: ${tag.fontSize};
         height: ${tag.height};
-
         .k-tag-close {
             font-size: ${tag.close.fontSize};
             margin-left: ${tag.close.gap};
+            width: ${tag.close.width};
         }
 
         &.k-none {
@@ -109,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};
@@ -121,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);
+}