@alifd/chat 0.1.12-beta.0 → 0.1.13-beta.0

package/{lib/calendar → es/button}/main.scss

@@ -1,5 +1,5 @@
 @import "../core/variables.scss";
 
-.#{$prefix}calendar {
+.#{$prefix}button {
   
 }

package/es/card/main.scss

@@ -0,0 +1,141 @@
+@import '../core/variables.scss';
+
+@mixin size($shadow, $corner, $padding, $fontSize, $headFontSize) {
+    $verPadding: $padding * 0.5;
+    box-shadow: $shadow;
+    border-radius: $corner;
+    font-size: $fontSize;
+    overflow: hidden;
+
+    .#{$prefix}card {
+        &-header {
+            font-size: $headFontSize;
+            &-title {
+                padding: $verPadding $padding;
+            }
+            &-extras {
+                padding: $verPadding $padding $verPadding 0;
+            }
+        }
+        &-content {
+            padding: 0 $padding;
+
+            &--gap-top {
+                margin-top: $verPadding;
+            }
+            &--gap-bottom {
+                margin-bottom: $verPadding;
+            }
+        }
+        &-footer {
+            padding: $verPadding $padding;
+        }
+    }
+}
+
+.#{$prefix}card {
+    color: $color-text1-3;
+
+    &-inner {
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        @include size(
+            $shadow-2,
+            $size-base * 3,
+            $size-base * 4,
+            $font-size-body-1,
+            $font-size-subhead
+        );
+    }
+    &-header {
+        flex: none;
+        display: flex;
+
+        &-title {
+            font-weight: 500;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            word-break: break-all;
+        }
+        &-extras {
+            flex: none;
+        }
+        &--line {
+            border-bottom: 1px solid $color-line1-0;
+        }
+    }
+    &-footer {
+        flex: none;
+
+        &--line {
+            border-top: 1px solid $color-line1-0;
+        }
+    }
+
+    &--medium {
+        .#{$prefix}card-inner {
+            @include size(
+                $shadow-2,
+                $size-base * 3,
+                $size-base * 4,
+                $font-size-body-1,
+                $font-size-subhead
+            );
+        }
+    }
+    &.#{$prefix}card--no-padding {
+        .#{$prefix}card {
+            &-header,
+            &-content,
+            &-footer {
+                padding: 0;
+                margin: 0;
+            }
+        }
+    }
+
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    &-collapsable {
+        &-inner {
+        }
+        &-inner--popup {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: auto;
+            z-index: 999;
+            opacity: 0;
+            animation-timing-function: ease-out;
+            animation-duration: 0.3s;
+            animation-name: fade-in;
+            animation-iteration-count: 1;
+            animation-fill-mode: forwards;
+        }
+        &--visible {
+            position: relative;
+            .#{$prefix}card-collapsable-inner {
+                transition: opacity 0.5s ease-in;
+                opacity: 0;
+                pointer-events: none;
+
+                &--popup {
+                    transition: none;
+                    opacity: 1;
+                    pointer-events: all;
+                }
+            }
+        }
+    }
+}

package/es/card/view/collapsable.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { CollapsableCardProps } from '../types';
-declare function CollapsableCard({ components, visible, defaultVisible, onVisibleChange, triggerType, mode, renderContent, ...props }: CollapsableCardProps): React.JSX.Element;
+declare function CollapsableCard({ components, visible: _v, defaultVisible: _dv, onVisibleChange: _onVC, triggerType, mode, renderContent, ...props }: CollapsableCardProps): React.JSX.Element;
 declare namespace CollapsableCard {
     var displayName: string;
 }

package/es/core/variables.scss

@@ -0,0 +1,35 @@
+$prefix: 'ct-' !default;
+
+$color-brand1-6: var(--color-brand1-6, #5584ff) !default;
+$size-base: 4px !default;
+$shadow-1: 1px 1px 4px 0px rgba(0, 0, 0, 0.16) !default;
+$shadow-2: 2px 4px 16px 0px rgba(0, 0, 0, 0.12) !default;
+
+$font-size-headline: var(--font-size-headline, 24px) !default;
+$font-size-title: var(--font-size-title, 20px) !default;
+$font-size-subhead: var(--font-size-subhead, 16px) !default;
+$font-size-body-2: var(--font-size-body-2, 14px) !default;
+$font-size-body-1: var(--font-size-body-1, 14px) !default;
+$font-size-caption: var(--font-size-caption, 12px) !default;
+
+/// 禁用
+$color-text1-1: var(--color-text1-1, #cccccc) !default;
+/// 水印/提示
+$color-text1-2: var(--color-text1-2, #999999) !default;
+/// 正文/标题
+$color-text1-3: var(--color-text1-3, #666666) !default;
+/// 正文/标题
+$color-text1-4: var(--color-text1-4, #333333) !default;
+
+/// 很浅
+$color-line1-0: var(--color-line1-0, #f1f3f6) !default;
+/// 浅
+$color-line1-1: var(--color-line1-1, #e6e7eb) !default;
+/// 常规
+$color-line1-2: var(--color-line1-2, #dcdee3) !default;
+/// 深
+$color-line1-3: var(--color-line1-3, #c4c6cf) !default;
+/// 重
+$color-line1-4: var(--color-line1-4, #a0a2ad) !default;
+
+

package/es/feedback/main.scss

@@ -0,0 +1,45 @@
+@import '../core/variables.scss';
+
+.#{$prefix}feedback {
+    display: inline-block;
+
+    &-inner {
+        padding: 0 4px;
+        display: flex;
+        flex-direction: row;
+        button:first-child {
+            margin-right: 16px;
+        }
+    }
+    &-item {
+        background-color: transparent;
+        outline: 0;
+        border: 0;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        color: $color-line1-3;
+        font-size: inherit;
+        padding: 0px;
+        transition:
+            color 0.15s,
+            opacity 0.15s;
+
+        &--active {
+            color: $color-brand1-6;
+        }
+
+        &:hover {
+            opacity: 0.8;
+        }
+
+        &-icon {
+            line-height: 1;
+
+            &--bad {
+                transform: rotateX(180deg);
+            }
+        }
+    }
+}

package/es/float-button/main.scss

@@ -0,0 +1,97 @@
+@import '../core/variables.scss';
+
+.#{$prefix}float-button {
+    position: fixed;
+    z-index: 1001;
+
+    &-backtop {
+        transition:
+            opacity 0.2s,
+            transform 0.2s;
+        cursor: pointer;
+
+        &--hidden {
+            opacity: 0;
+            transform: scale(0);
+        }
+    }
+
+    &-inner-drawer {
+        flex: 1;
+        overflow: hidden;
+        box-shadow: $shadow-2;
+        border-radius: $size-base * 2;
+
+        &-outer {
+            display: flex;
+        }
+        &-inner-start {
+            flex: 1;
+        }
+        &-inner-end {
+            flex: none;
+            transition:
+                width 0.3s,
+                opacity 0.3s;
+            display: flex;
+            width: 0;
+            opacity: 0;
+        }
+        &-inner {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+
+            &--has-title {
+                .#{$prefix}float-button-inner-drawer {
+                    &-header {
+                        margin: $size-base * 2 $size-base * 3;
+                    }
+                    &-body {
+                        margin-top: 0;
+                    }
+                }
+            }
+            &--has-close {
+                .#{$prefix}float-button-inner-drawer {
+                    &-header-title {
+                        margin-right: $size-base * 2;
+                    }
+                }
+            }
+        }
+        &-header {
+            flex: none;
+            &-title {
+                font-size: $font-size-subhead;
+                line-height: 1.5;
+            }
+            &-close {
+                position: absolute;
+                right: $size-base * 2;
+                top: $size-base * 2;
+                color: $color-text1-2;
+                cursor: pointer;
+                transition: color 0.15s;
+                outline: 0;
+                border: 0;
+                padding: 0;
+                align-self: flex-start;
+                background-color: transparent;
+
+                &:hover {
+                    color: $color-text1-4;
+                }
+            }
+        }
+        &-body {
+            flex: 1;
+            margin: $size-base * 2 $size-base * 3;
+        }
+        &-footer {
+            flex: none;
+        }
+    }
+}

package/es/index.d.ts

@@ -5,9 +5,5 @@ export { default as FloatButton } from './float-button';
 export { default as Text } from './text';
 export { default as Tag } from './tag';
 export { default as Tab } from './tab';
-export { default as Input } from './input';
-export { default as DatePicker } from './date-picker';
-export { default as TimePicker } from './time-picker';
-export { default as PersonPicker } from './person-picker';
-export { default as Calendar } from './calendar';
+export { default as Message } from './message';
 export declare const version: string;

package/es/index.js

@@ -5,9 +5,5 @@ export { default as FloatButton } from './float-button';
 export { default as Text } from './text';
 export { default as Tag } from './tag';
 export { default as Tab } from './tab';
-export { default as Input } from './input';
-export { default as DatePicker } from './date-picker';
-export { default as TimePicker } from './time-picker';
-export { default as PersonPicker } from './person-picker';
-export { default as Calendar } from './calendar';
-export const version = __CHAT_VERSION__;
+export { default as Message } from './message';
+export const version = '0.1.12';

package/es/message/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @component 标签
+ * @en Message
+ * @type 通用 - General
+ * @remarks 同 Next Message - Same as Next.Message
+ * @when Message
+ */
+import React from 'react';
+import { Message as NextMessage } from '@alifd/next';
+import type { MessageProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<MessageProps & React.RefAttributes<NextMessage>, "key" | keyof MessageProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, NextMessage, {}> & {
+    loading: typeof NextMessage.loading;
+    warning: typeof NextMessage.warning;
+    error: typeof NextMessage.error;
+    help: typeof NextMessage.help;
+    hide: typeof NextMessage.hide;
+    show: typeof NextMessage.show;
+    success: typeof NextMessage.success;
+    notice: typeof NextMessage.notice;
+};
+export default _default;

package/es/message/index.js

@@ -0,0 +1,30 @@
+/**
+ * @component 标签
+ * @en Message
+ * @type 通用 - General
+ * @remarks 同 Next Message - Same as Next.Message
+ * @when Message
+ */
+import { __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { Message as NextMessage, ConfigProvider } from '@alifd/next';
+import cs from 'classnames';
+import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
+const Message = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(NextMessage, Object.assign({}, props, { ref: ref, className: cs(`${PREFIX_DEFAULT}message`, className) })));
+});
+const MessageWithSub = assignSubComponent(Message, {
+    show: NextMessage.show,
+    success: NextMessage.success,
+    warning: NextMessage.warning,
+    error: NextMessage.error,
+    notice: NextMessage.notice,
+    help: NextMessage.help,
+    loading: NextMessage.loading,
+    hide: NextMessage.hide,
+});
+export * from './types';
+export default ConfigProvider.config(MessageWithSub, {
+    componentName: 'Message',
+});

package/{lib/date-picker → es/message}/main.scss

@@ -1,6 +1,2 @@
 @import '@alifd/next/variables.scss';
 @import "../core/variables.scss";
-
-.#{$prefix}date-picker {
-  
-}

package/es/message/style.d.ts

@@ -0,0 +1,2 @@
+import '@alifd/next/lib/message/style';
+import './main.scss';

package/es/message/style.js

@@ -0,0 +1,2 @@
+import '@alifd/next/lib/message/style';
+import './main.scss';

package/es/message/types.d.ts

@@ -0,0 +1,195 @@
+import type React from 'react';
+import type { OverlayProps } from '@alifd/next/types/overlay';
+import type { ConsumerState } from '@alifd/next/types/config-provider/consumer';
+type HTMLAttributesWeak = Omit<React.HTMLAttributes<HTMLElement>, 'title'>;
+/**
+ * @api Message
+ */
+export interface MessageProps extends HTMLAttributesWeak {
+    /**
+     * 反馈类型
+     * @en type of message
+     * @defaultValue 'success'
+     */
+    type?: 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading';
+    /**
+     * 反馈外观
+     * @en shape of message
+     * @defaultValue 'inline'
+     */
+    shape?: 'inline' | 'addon' | 'toast';
+    /**
+     * 反馈大小
+     * @en size of message
+     * @defaultValue 'medium'
+     */
+    size?: 'medium' | 'large';
+    /**
+     * 标题
+     * @en title of message
+     */
+    title?: React.ReactNode;
+    /**
+     * 内容，非函数式调用下使用
+     * @en content of message
+     */
+    children?: React.ReactNode;
+    /**
+     * 默认是否显示
+     * @en whether the message is visible in default
+     * @defaultValue false
+     */
+    defaultVisible?: boolean;
+    /**
+     * 当前是否显示
+     * @en whether the message is visible currently
+     */
+    visible?: boolean;
+    /**
+     * 显示的图标类型，会覆盖内部设置的IconType，传false不显示图标
+     * @en type of icon, overriding the internally type of icon
+     */
+    iconType?: string | false;
+    /**
+     * 显示关闭按钮
+     * @en whether to show the close button
+     * @defaultValue false
+     */
+    closeable?: boolean;
+    /**
+     * 关闭按钮的回调
+     * @en callback function triggered when close
+     * @defaultValue () =\> \{\}
+     */
+    onClose?: () => void;
+    /**
+     * 关闭之后调用的函数
+     * @en callback function triggered after closed
+     * @defaultValue () =\> \{\}
+     */
+    afterClose?: () => void;
+    /**
+     * 是否开启展开收起动画
+     * @en whether to enable expand and collapse animation
+     * @defaultValue true
+     */
+    animation?: boolean;
+}
+/**
+ * @api Message.show
+ * @remarks Message.show(props) 提供一个单例的调用方式，配置参数如下（继承 Overlay 的配置）：
+ *
+ * ```js
+ * Message.show({
+ *  type: 'error',
+ *  title: '错误',
+ *  content: '请联系相关人员反馈！',
+ *  hasMask: true
+ * });
+ * ```
+ * -
+ * `Message.show(props)` provides a singleton call with the following configuration parameters (inheriting `Overlay` configuration):
+ * ```js
+ * Message.show({
+ *  type: 'error',
+ *  title: 'Error',
+ *  content: 'Please contact admin feedback!',
+ *  hasMask: true
+ * });
+ * ```
+ */
+export interface MessageQuickProps extends Omit<HTMLAttributesWeak, 'content'> {
+    /**
+     * 反馈类型
+     * @en type of message
+     * @defaultValue 'success'
+     */
+    type?: 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading';
+    /**
+     * 反馈大小
+     * @en size of message
+     * @defaultValue 'medium'
+     */
+    size?: 'medium' | 'large';
+    /**
+     * 标题
+     * @en title of message
+     */
+    title?: React.ReactNode;
+    /**
+     * 内容，函数式调用下使用
+     * @en content of message
+     */
+    content?: React.ReactNode;
+    /**
+     * 弹层对齐方式，详情见 Overlay align
+     * @en alignment reference Overlay
+     * @defaultValue 'tc tc'
+     */
+    align?: string | boolean;
+    /**
+     * 弹层相对于参照元素定位的微调
+     * @en offset after positioned
+     * @defaultValue [0, 0]
+     */
+    offset?: Array<number>;
+    /**
+     * 是否显示遮罩
+     * @en whether to have a mask
+     * @defaultValue false
+     */
+    hasMask?: boolean;
+    /**
+     * 显示持续时间，0表示一直存在，以毫秒为单位
+     * @en show duration, 0 means always present, in milliseconds
+     * @defaultValue 3000
+     */
+    duration?: number;
+    /**
+     * @skip
+     */
+    timeoutId?: string;
+    /**
+     * 显示关闭按钮
+     * @en whether to show the close button
+     * @defaultValue false
+     */
+    closeable?: boolean;
+    /**
+     * 关闭按钮的回调
+     * @en callback function triggered when close
+     * @defaultValue () =\> \{\}
+     */
+    onClose?: () => void;
+    /**
+     * 关闭之后调用的函数
+     * @en callback function triggered after closed
+     * @defaultValue () =\> \{\}
+     */
+    afterClose?: () => void;
+    /**
+     * 是否开启展开收起动画
+     * @en whether to enable expand and collapse animation
+     * @defaultValue true
+     */
+    animation?: boolean;
+    /**
+     * 透传到弹层组件的属性对象
+     * @en props of Overlay
+     */
+    overlayProps?: OverlayProps;
+    /**
+     * @skip
+     */
+    contextConfig?: ConsumerState;
+}
+export type OpenProps = string | React.ReactElement | MessageQuickProps;
+export interface MessageWrapperItem extends MessageQuickProps {
+    timer?: ReturnType<typeof setTimeout>;
+    key: string;
+}
+export interface MessageWrapperProps {
+    prefix?: MessageQuickProps['prefix'];
+    dataSource: Array<MessageWrapperItem>;
+}
+export {};

package/es/tab/main.scss

@@ -0,0 +1,10 @@
+@import "@alifd/next/variables.scss";
+@import "../core/variables.scss";
+
+.#{$prefix}tabs {
+  &.#{$css-prefix}tabs-pure {
+    .#{$css-prefix}tabs-bar {
+      border-color: transparent;
+    }
+  }
+}