@king-design/intact 3.6.2-beta.1 → 3.7.0

package/components/notification/notifications.ts

@@ -0,0 +1,46 @@
+import {Component, VNodeComponentClass, TypeDefs} from 'intact';
+import template from './notifications.vdt';
+import type {Notification} from './notification';
+import { useConfigContext } from '../config';
+
+export interface NotificationsProps {
+    classNamePrefix?: string
+    position?: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft' | 'top' | 'bottom'
+}
+
+const typeDefs: Required<TypeDefs<NotificationsProps>> = {
+    classNamePrefix: String,
+    position: ['topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'top', 'bottom'],
+};
+
+export class Notifications extends Component {
+    static template = template;
+    static typeDefs = typeDefs;
+
+    private notifications: VNodeComponentClass<Notification>[] = [];
+    private config = useConfigContext();
+    __cleanup?: () => void;
+
+    notice(notification: VNodeComponentClass<Notification>) {
+        this.notifications.push(notification);
+        this.forceUpdate();
+    }
+
+    delete(key: number | string) {
+        const notifications = this.notifications;
+        const index = notifications.findIndex(notification => notification.key === key);
+        if (process.env.NODE_ENV !== 'production' && !~index) {
+            throw new Error('You are removing a notification that does not exist.');
+        }
+
+        notifications.splice(index, 1);
+        this.forceUpdate();
+    }
+
+    onAfterLeave() {
+        // 当离开动画完成后，如果该位置 通知列表为空，则清理容器
+        if (this.notifications.length === 0 && this.__cleanup) {
+            this.__cleanup();
+        }
+    }
+}

package/components/notification/notifications.vdt

@@ -0,0 +1,16 @@
+import {TransitionGroup} from 'intact';
+import {makeNotificationsStyles} from './styles';
+import { ConfigProvider } from '../config';
+
+const k = this.get('classNamePrefix') || this.config.k;
+const position = this.get('position') || 'topRight';
+
+<ConfigProvider value={{classNamePrefix: k}}>
+    <div class={{[`${k}-notifications`]: true, [makeNotificationsStyles(k, position)]: true}}>
+        <TransitionGroup onAfterLeave={this.onAfterLeave.bind(this)}>
+            <template v-for={this.notifications} key={$value.key}>
+                {$value}
+            </template>
+        </TransitionGroup>
+    </div>
+</ConfigProvider>

package/components/notification/styles.ts

@@ -0,0 +1,179 @@
+import {css} from '@emotion/css';
+import {theme, setDefault} from '../../styles/theme';
+import {deepDefaults} from '../../styles/utils';
+import '../../styles/global';
+import { cache } from '../utils';
+
+const defaults = {
+    get transition() { return theme.transition.large },
+    top: `24px`,
+    right: `24px`,
+    left: `24px`,
+    bottom: `24px`,
+    leftTransform: `translateX(-100%)`,
+    rightTransform: `translateX(100%)`,
+    topTransform: `translateY(-100%)`,
+    bottomTransform: `translateY(100%)`,
+    bgColor: '#fff',
+    get borderRadius() { return theme.borderRadius },
+    gap: `8px`,
+    boxShadow: '0px 4px 32px 4px #00000014',
+    padding: `12px`,
+    get fontSize() { return theme.default.fontSize },
+    get contentColor() { return theme.color.text },
+    get titleColor() { return theme.color.title },
+    minWidth: '320px',
+    width: '360px',
+    maxWidth: '400px',
+    titleFontSize: '14px',
+    titleFontWeight: '500',
+    titleMarginBottom: '8px',
+    bodyLineHeight: '1.5',
+    
+    icon: {
+        fontSize: `20px`,
+    },
+    
+    close: {
+        right: `12px`,
+        top: `12px`,
+        width: `20px`,
+        height: `20px`,
+    },
+};
+
+let notification: typeof defaults;
+setDefault(() => {
+    notification = deepDefaults(theme, {notification: defaults}).notification;
+    makeNotificationsStyles?.clearCache();
+    makeNotificationStyles?.clearCache();
+});
+
+
+export const makeNotificationsStyles = cache(function makeNotificationsStyles(
+    k: string, 
+    position: string
+) {
+    // 位置配置
+    const positions = {
+        topRight: { top: notification.top, right: notification.right, left: '', bottom: '', transform: '' },
+        topLeft: { top: notification.top, left: notification.left, right: '', bottom: '', transform: '' },
+        bottomRight: { bottom: notification.top, right: notification.right, left: '', top: '', transform: '' },
+        bottomLeft: { bottom: notification.top, left: notification.left, right: '', top: '', transform: '' },
+        top: { top: notification.top, left: '50%', right: '', bottom: '', transform: 'translateX(-50%)' },
+        bottom: { bottom: notification.top, left: '50%', right: '', top: '', transform: 'translateX(-50%)' },
+    };
+    const pos = positions[position as keyof typeof positions] || positions.topRight;
+    
+    return css`
+        position: fixed;
+        ${pos.top ? `top: ${pos.top};` : ''}
+        ${pos.bottom ? `bottom: ${pos.bottom};` : ''}
+        ${pos.left ? `left: ${pos.left};` : ''}
+        ${pos.right ? `right: ${pos.right};` : ''}
+        ${pos.transform ? `transform: ${pos.transform};` : ''}
+        width: auto;
+        pointer-events: none;
+        z-index: ${theme.maxZIndex + 1};
+    `;
+});
+
+export const makeNotificationStyles = cache(function makeNotificationStyles(k: string) {
+    return css`
+        .${k}-notification-container {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            box-shadow: ${notification.boxShadow};
+            border-radius: ${notification.borderRadius};
+            margin-bottom: ${notification.gap};
+            pointer-events: all;
+            min-width: ${notification.minWidth};
+            max-width: ${notification.maxWidth};
+            width: ${notification.width};
+            background: ${notification.bgColor};
+        }
+        
+        .${k}-notification-wrapper {
+            position: relative;
+            display: flex;
+            gap: ${notification.gap};
+            padding: ${notification.padding};
+        }
+        
+        .${k}-notification-icon {
+            .${k}-icon {
+                font-size: ${notification.icon.fontSize};
+            }
+        }
+        
+        .${k}-notification-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .${k}-notification-title {
+            font-size: ${notification.titleFontSize};
+            font-weight: ${notification.titleFontWeight};
+            color: ${notification.titleColor};
+            margin-bottom: ${notification.titleMarginBottom};
+            line-height: ${notification.bodyLineHeight};
+        }
+        
+        .${k}-notification-body {
+            font-size: ${notification.fontSize};
+            color: ${notification.contentColor};
+            line-height: ${notification.bodyLineHeight};
+            word-break: break-word;
+            word-wrap: break-word;
+        }
+        
+        .${k}-notification-close {
+            position: absolute;
+            right: ${notification.close.right};
+            top: ${notification.close.top};
+            width: ${notification.close.width};
+            height: ${notification.close.height};
+        }
+        
+        // 过渡动画 - 右侧位置（topRight, bottomRight）
+        &.${k}-position-topRight.transition-enter-from,
+        &.${k}-position-bottomRight.transition-enter-from,
+        &.${k}-position-topRight.transition-leave-to,
+        &.${k}-position-bottomRight.transition-leave-to {
+            opacity: 0;
+            transform: ${notification.rightTransform};
+        }
+        
+        // 过渡动画 - 左侧位置（topLeft, bottomLeft）
+        &.${k}-position-topLeft.transition-enter-from,
+        &.${k}-position-bottomLeft.transition-enter-from,
+        &.${k}-position-topLeft.transition-leave-to,
+        &.${k}-position-bottomLeft.transition-leave-to {
+            opacity: 0;
+            transform: ${notification.leftTransform};
+        }
+        
+        // 过渡动画 - 中间位置（top, bottom）
+        &.${k}-position-top.transition-enter-from,
+        &.${k}-position-top.transition-leave-to {
+            opacity: 0;
+            transform: ${notification.topTransform};
+        }
+
+        &.${k}-position-bottom.transition-enter-from,
+        &.${k}-position-bottom.transition-leave-to {
+            opacity: 0;
+            transform: ${notification.bottomTransform};
+        }
+        
+        &.transition-enter-active,
+        &.transition-leave-active {
+            transition: transform ${notification.transition}, opacity ${notification.transition};
+        }
+        &.transition-move {
+            transition: transform ${notification.transition};
+        }
+    `;
+});

package/components/select/styles.ts

@@ -313,6 +313,8 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
             height: ${select.card.height};
             .${k}-tabs {
                 border: none;
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
                 overflow: auto;
             }
             .${k}-select-group {

package/components/table/demos/hidden.md

@@ -16,10 +16,16 @@ import {Table, TableColumn} from 'kpc';
     </Table>
     <p>无数据展示</p>
     <Table data={this.get('data2')} resizable>
-        <TableColumn key="a" title="Title 1" />
-        <TableColumn key="b" title="Title 2" hidden/>
+        <TableColumn key="a" title="Title 1" hidden />
+        <TableColumn key="b" title="Title 2" />
         <TableColumn key="c" title="Title 3"/>
     </Table>
+    <Table data={this.get('data2')} resizable checkType="none">
+        <TableColumn key="a" title="Title 1" hidden />
+        <TableColumn key="b" title="Title 2" />
+        <TableColumn key="c" title="Title 3" hidden />
+        <TableColumn key="d" title="Title 4"/>
+    </Table>
 </div>
 ```
 

package/components/table/demos/sort.md

@@ -71,13 +71,13 @@ export default class extends Component<Props> {
 ```
 
 ```vue-methods
-_onSort(c, sort) {
+_onSort(sort?: TableSortValue<'name' | 'age'>) {
     console.log(sort);
     const data = this.data.slice(0);
     data.sort((a, b) => {
-        return sort.type === 'desc' ? 
-            (a[sort.key] > b[sort.key] ? -1 : 1) : 
-            (a[sort.key] > b[sort.key] ? 1 : -1);
+        return sort!.type === 'desc' ? 
+            (a[sort!.key!] > b[sort!.key!] ? -1 : 1) : 
+            (a[sort!.key!] > b[sort!.key!] ? 1 : -1);
     });
     this.data = data;
     this.sort = sort;

package/components/table/styles.ts

@@ -128,7 +128,9 @@ export const makeStyles = cache(function makeStyles(k: string) {
             position: relative;
             background: ${table.thead.bgColor};
             line-height: normal;
+            // hide all :before firstly, then show all :before except first th
             &:before {
+                display: none;
                 content: '';
                 height: ${table.thead.delimiterHeight};
                 position: absolute;
@@ -141,8 +143,10 @@ export const makeStyles = cache(function makeStyles(k: string) {
             &.${k}-fixed-right:before {
                 left: -2px;
             }
-            &:first-of-type:before {
-                display: none;
+        }
+        &:not(.${k}-grid) {
+            th:not(.${k}-hidden) ~ th:not(.${k}-hidden):before {
+                display: block;
             }
         }
         .${k}-table-title {

package/components/tabs/useActiveBar.ts

@@ -16,21 +16,21 @@ export function useActiveBar() {
         const element = findDomFromVNode(instance.$lastInput!, true) as HTMLElement;
         const { k } = instance.config;
         const activeTab = element.querySelector(`.${k}-tab.${k}-active`) as HTMLElement | null;
+        const vertical = instance.get('vertical');
 
         if (!activeTab) {
             const oldStyles = styles.value;
             if (oldStyles) {
                 styles.set(oldStyles.left ?
                     {left: oldStyles.left, width: '0'} :
-                    {top: oldStyles.top, width: '0'}
+                    {top: oldStyles.top, height: '0'}
                 );
             } else {
-                styles.set(null);
+                styles.set(vertical ? {height: '0'} : {width: '0'});
             }
             return;
         }
         
-        const vertical = instance.get('vertical');
         if (!vertical) {
             const width = activeTab.offsetWidth;
             const left = activeTab.offsetLeft;

package/components/tag/base.ts

@@ -4,9 +4,11 @@ import template from './index.vdt';
 import {sizes, Sizes} from '../../styles/utils';
 import type {Events, Colors} from '../types';
 import { useConfigContext } from '../config';
+import { useColor } from './useColor';
 
 export interface TagProps {
     type?: Colors 
+    color?: Colors | 'purple' | 'teal' | 'blue' | 'yellow' | string 
     closable?: boolean
     closed?: boolean
     disabled?: boolean
@@ -22,6 +24,7 @@ export interface TagBlocks { }
 
 export const typeDefs: Required<TypeDefs<TagProps>> = {
     type: ['default', 'primary', 'danger', 'success', 'warning'],
+    color: String,
     closable: Boolean,
     closed: Boolean,
     disabled: Boolean,
@@ -50,6 +53,7 @@ export class Tag<
     static events = events;
 
     private config = useConfigContext();
+    private tagColor = useColor();
 
     @bind
     private onClose(e: MouseEvent): void {

package/components/tag/demos/border.md

@@ -1,6 +1,6 @@
 ---
 title: 边框
-order: 3
+order: 4
 ---
 
 通过`border`可以定义边框样式: `solid` `dashed` `none`(默认) 

package/components/tag/demos/color.md

@@ -0,0 +1,40 @@
+---
+title: 颜色
+order: 3
+---
+
+`color` 属性支持 `type` 的所有类型、内置颜色（`purple`, `teal`, `blue`, `yellow`）或自定义颜色值。
+
+```vdt
+import {Tag} from 'kpc';
+
+<div class="container">
+    <Tag v-for={this.get('colors')} color={$value}>
+        {$value}
+    </Tag>
+</div>
+```
+
+```styl
+.container
+    display flex
+    gap 8px
+    flex-wrap wrap
+```
+
+```ts
+import {TagProps} from 'kpc';
+
+interface Props {
+    colors: string[]
+}
+
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            colors: ['default', 'primary', 'danger', 'success', 'warning', 'purple', 'teal', 'blue', 'yellow', '#f50', '#87d068', 'rgb(255, 0, 179)'],
+        } as Props;
+    }
+}
+```

package/components/tag/demos/draggable.md

@@ -1,6 +1,6 @@
 ---
 title: 标签可拖动
-order: 5
+order: 6
 ---
 
 ```vdt

package/components/tag/demos/tags.md

@@ -1,6 +1,6 @@
 ---
 title: 标签组
-order: 4
+order: 5
 ---
 
 使用`Tags`包裹`Tag`可以展示标签组，给`Tags`指定`nowrap`可以让标签自适应仅展示成一行，超出的部分会隐藏，

package/components/tag/index.md

@@ -12,6 +12,7 @@ sidebar: doc
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | type | 组件类型 | `"default"` | `"primary"` | `"success"` | `"warning"` | `"danger"` | `"default"` |
+| color | 颜色 | `"default"` | `"primary"` | `"success"` | `"warning"` | `"danger"` | `"purple"` | `"teal"` | `"blue"` | `"yellow"` | `undefined` | 
 | closable | 是否可关闭 | `boolean` | `false` |
 | closed | 是否已关闭 | `boolean` | `false` |
 | disabled | 是否展示禁用状态 | `boolean` | `false` |

package/components/tag/index.spec.ts

@@ -2,6 +2,7 @@ import ClosableDemo from '~/components/tag/demos/closable';
 import {mount, unmount, wait, dispatchEvent, getElement} from '../../test/utils';
 import TagsDemo from '~/components/tag/demos/tags';
 import DraggableDemo from '~/components/tag/demos/draggable';
+import ColorDemo from '~/components/tag/demos/color';
 
 describe('Tag', () => {
     afterEach(() => unmount());
@@ -86,4 +87,11 @@ describe('Tag', () => {
         // should not drag to other tags
         await test(tag11, tag2);
     });
+
+    it('should support color property', async () => {
+        const [instance, element] = mount(ColorDemo);
+        await wait();
+        
+        expect(element.innerHTML).to.matchSnapshot();
+    });
 });

package/components/tag/index.vdt

@@ -1,18 +1,19 @@
 import {Icon} from '../icon';
-import {getRestProps} from '../utils';
+import {addStyle, getRestProps} from '../utils';
 import {makeStyles} from './styles';
 import {Transition} from 'intact';
 
 const {
     className, children, type, border,
-    disabled, closable, closed, size
+    disabled, closable, closed, size, style
 } = this.get();
 const { k } = this.config;
+const { colorClassName, customStyle, iconColor } = this.tagColor;
 
 const classNameObj = {
     [`${k}-tag`]: !$props.className,
     [className]: className,
-    [`${k}-${type}`]: type !== 'default',
+    [`${k}-${colorClassName.value}`]: colorClassName.value,
     [`${k}-${size}`]: size !== 'default',
     [`${k}-${border}`]: border,
     [`${k}-disabled`]: disabled,
@@ -25,11 +26,12 @@ const classNameObj = {
     <div v-if={!closed}
         class={classNameObj}
         {...getRestProps(this)}
+        style={addStyle(style, customStyle.value)}
     >
         <b:body>{children}</b:body>
         <b:_close>
             <Icon class={`${k}-tag-close ion-ios-close-empty`}
-                color={type}
+                color={iconColor.value}
                 hoverable={!disabled}
                 v-if={closable}
                 ev-click={this.onClose}

package/components/tag/styles.ts

@@ -10,8 +10,14 @@ type TypeStyles = {
     color: string
     bgColor: string
 }
+type Colors = ValueOf<typeof colors>
+type ColorStyles = {
+    color: string
+    bgColor: string
+}
 
 const types = ['primary', 'warning', 'danger', 'success', 'disabled'] as const;
+const colors = ['purple', 'teal', 'blue', 'yellow'] as const;
 
 const defaults = deepDefaults(
     {
@@ -79,6 +85,13 @@ const defaults = deepDefaults(
         };
         return memo;
     }, {} as {[key in Exclude<Types, 'disabled'>]: TypeStyles}),
+    colors.reduce((memo, color) => {
+        memo[color] = {
+            get color() { return theme.color[color] },
+            get bgColor() { return palette(theme.color[color], -4)}
+        };
+        return memo;
+    }, {} as {[key in Colors]: ColorStyles}),
 );
 
 let tag: typeof defaults;
@@ -110,6 +123,16 @@ export const makeStyles = cache(function makeStyles(k: string) {
             background: ${tag.none.bgColor};
         }
 
+        ${colors.map(c => {
+            return css`
+                &.${k}-${c} {
+                    color: ${tag[c].color};
+                    border-color: ${tag[c].color};
+                    background: ${tag[c].bgColor};
+                }
+            `;
+        })}
+
         ${types.map(t => {
             const styles = tag[t];
             return css`

package/components/tag/useColor.ts

@@ -0,0 +1,79 @@
+import { useInstance } from 'intact';
+import type { Tag } from './base';
+import { palette } from '../../styles/utils';
+import { useState } from '../../hooks/useState';
+import { useReceive } from '../../hooks/useReceive';
+import { theme } from '../../styles/theme';
+
+// type 支持的颜色
+const TYPE_COLORS = ['default', 'primary', 'danger', 'success', 'warning'] as const;
+// color 支持的扩展内置颜色
+const EXTENDED_COLORS = ['purple', 'teal', 'blue', 'yellow'] as const;
+// 所有内置颜色
+const BUILT_IN_COLORS = [...TYPE_COLORS, ...EXTENDED_COLORS] as const;
+
+export function getIconColorValue(color: string | undefined, disabled: boolean | undefined): string | undefined {
+    if (disabled) return theme.color.disabled;
+    if (!color || color === 'default') return 'default';
+    if (BUILT_IN_COLORS.includes(color as any)) {
+        const themeColor = theme.color[color as keyof typeof theme.color];
+        return themeColor;
+    }
+    return color;
+}
+
+export function useColor() {
+    const instance = useInstance() as Tag;
+    
+    const effectiveColor = useState<string | undefined>(undefined);
+    const colorClassName = useState<string | undefined>(undefined);
+    const customStyle = useState<Record<string, string>>({});
+    const iconColor = useState<string | undefined>(undefined);
+
+    function updateColor() {
+        const { color, type, disabled } = instance.get();
+        const _effectiveColor = color || (TYPE_COLORS.includes(type as any) ? type : undefined); // color优先
+
+        effectiveColor.set(_effectiveColor);
+
+        const isBuiltIn = _effectiveColor ? BUILT_IN_COLORS.includes(_effectiveColor as any) : false;
+
+        // 内置颜色 - 更新 colorClassName
+        if (_effectiveColor && isBuiltIn && _effectiveColor !== 'default') {
+            colorClassName.set(_effectiveColor);
+        } else {
+            colorClassName.set(undefined);
+        }
+
+        // 自定义颜色 - 更新 customStyle
+        if (_effectiveColor && !isBuiltIn && !disabled) {
+            const bgColor = palette(_effectiveColor, -4);
+            customStyle.set({
+                color: _effectiveColor,
+                borderColor: _effectiveColor,
+                backgroundColor: bgColor
+            });
+        } else {
+            customStyle.set({});
+        }
+
+        // 更新 iconColor
+        if (!_effectiveColor && !disabled) {
+            iconColor.set('default');
+        } else {
+            const _iconColor = getIconColorValue(_effectiveColor, disabled);
+            iconColor.set(_iconColor);
+        }
+    }
+
+    useReceive<Tag>(['color', 'type', 'disabled'], updateColor);
+
+    updateColor();
+
+    return {
+        effectiveColor,
+        colorClassName,
+        customStyle,
+        iconColor,
+    };
+}