@alifd/chat 0.3.40-beta.0 → 0.3.40-beta.2

package/es/utils/github-dark.scss

@@ -0,0 +1,137 @@
+.ct-hljs-dark {
+  pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em
+  }
+
+  code.hljs {
+    padding: 3px 5px
+  }
+
+  /*!
+    Theme: GitHub Dark
+    Description: Dark theme as seen on github.com
+    Author: github.com
+    Maintainer: @Hirse
+    Updated: 2021-05-15
+  
+    Outdated base version: https://github.com/primer/github-syntax-dark
+    Current colors taken from GitHub's CSS
+  */
+  .hljs {
+    color: #c9d1d9;
+    background: #0d1117
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #ff7b72
+  }
+
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #d2a8ff
+  }
+
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-operator,
+  .hljs-variable,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #79c0ff
+  }
+
+  .hljs-regexp,
+  .hljs-string,
+  .hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #a5d6ff
+  }
+
+  .hljs-built_in,
+  .hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #ffa657
+  }
+
+  .hljs-comment,
+  .hljs-code,
+  .hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #8b949e
+  }
+
+  .hljs-name,
+  .hljs-quote,
+  .hljs-selector-tag,
+  .hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #7ee787
+  }
+
+  .hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #c9d1d9
+  }
+
+  .hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #1f6feb;
+    font-weight: bold
+  }
+
+  .hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #f2cc60
+  }
+
+  .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #c9d1d9;
+    font-style: italic
+  }
+
+  .hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #c9d1d9;
+    font-weight: bold
+  }
+
+  .hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #aff5b4;
+    background-color: #033a16
+  }
+
+  .hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #ffdcd7;
+    background-color: #67060c
+  }
+
+  .hljs-char.escape_,
+  .hljs-link,
+  .hljs-params,
+  .hljs-property,
+  .hljs-punctuation,
+  .hljs-tag {
+    /* purposely ignored */
+
+  }
+}

package/es/utils/github.scss

@@ -0,0 +1,137 @@
+.ct-hljs-light {
+  pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em
+  }
+
+  code.hljs {
+    padding: 3px 5px
+  }
+
+  /*!
+    Theme: GitHub
+    Description: Light theme as seen on github.com
+    Author: github.com
+    Maintainer: @Hirse
+    Updated: 2021-05-15
+  
+    Outdated base version: https://github.com/primer/github-syntax-light
+    Current colors taken from GitHub's CSS
+  */
+  .hljs {
+    color: #24292e;
+    background: #ffffff
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #d73a49
+  }
+
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #6f42c1
+  }
+
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-operator,
+  .hljs-variable,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #005cc5
+  }
+
+  .hljs-regexp,
+  .hljs-string,
+  .hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #032f62
+  }
+
+  .hljs-built_in,
+  .hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #e36209
+  }
+
+  .hljs-comment,
+  .hljs-code,
+  .hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #6a737d
+  }
+
+  .hljs-name,
+  .hljs-quote,
+  .hljs-selector-tag,
+  .hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #22863a
+  }
+
+  .hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #24292e
+  }
+
+  .hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #005cc5;
+    font-weight: bold
+  }
+
+  .hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #735c0f
+  }
+
+  .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #24292e;
+    font-style: italic
+  }
+
+  .hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #24292e;
+    font-weight: bold
+  }
+
+  .hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #22863a;
+    background-color: #f0fff4
+  }
+
+  .hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #b31d28;
+    background-color: #ffeef0
+  }
+
+  .hljs-char.escape_,
+  .hljs-link,
+  .hljs-params,
+  .hljs-property,
+  .hljs-punctuation,
+  .hljs-tag {
+    /* purposely ignored */
+
+  }
+}

package/es/utils/hoc/main.scss

@@ -0,0 +1,166 @@
+@import "../../core/variables.scss";
+
+.#{$prefix}field-wrapper {
+  &-hover-enabled {
+    &:not(.#{$prefix}field-wrapper-disabled, .#{$prefix}field-wrapper-readonly) {
+
+      &.#{$prefix}field-wrapper-focused,
+      &:hover {
+        border-color: var(--input-focus-border-color, #5584FF);
+        background-color: var(--input-focus-bg-color, #FFFFFF);
+        box-shadow: 0 0 0 var(--input-focus-shadow-spread, 2px) var(--color-calculate-input-focus-shadow, rgba(85, 132, 255, 0.2));
+      }
+    }
+  }
+
+  &-style {
+    background: var(--color-fill1-1, #f6f8fc);
+    border-radius: var(--form-element-medium-corner, 3px);
+    border: var(--input-border-width, 1px) solid var(--color-fill1-1, #f6f8fc);
+  }
+
+  &-medium {
+    width: 100%;
+  }
+
+  /**
+   * 组件的整体布局
+   * horizontal: 水平布局
+   * vertical: 垂直布局
+  */
+  &-horizontal {
+    flex-direction: row;
+    align-items: center;
+    display: inline-flex;
+    width: 100%;
+    align-items: flex-start;
+
+    .#{$prefix}field-wrapper-content {
+      width: 100%;
+      position: relative;
+    }
+
+    .#{$prefix}label-required::before {
+      position: absolute;
+      left: 4px;
+    }
+
+    .#{$prefix}label {
+      max-width: 9em;
+      padding: var(--input-m-label-padding-left, 8px) 0;
+      padding-left: 12px;
+    }
+  }
+
+  &-vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    display: inline-flex;
+    width: 100%;
+
+    .#{$prefix}label {
+      padding-left: 0;
+      margin-left: 0;
+      color: var(--color-text1-3, #6A6C70);
+      margin-bottom: var(--s-2, 8px);
+      line-height: 20px;
+    }
+
+    .#{$prefix}field-wrapper-content {
+      width: 100%;
+    }
+
+    .#{$prefix}label-required::before {
+      display: none;
+    }
+    .#{$prefix}label-required::after {
+      content: "*";
+      color: var(--color-error-3, #F34810);
+      margin-left: 2px;
+      font-size: calc(var(--form-element-medium-font-size, 12px) - 2px);
+      display: inline;
+    }
+  }
+
+  .#{$prefix}label {
+    position: relative;
+    color: var(--input-label-color, #666);
+    display: inline-block;
+    flex-shrink: 0;
+    flex-grow: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--form-element-medium-font-size, 12px);
+    line-height: 17px;
+
+    &-text {
+      display: block;
+    }
+
+    &-required::before {
+      content: "*";
+      color: var(--color-error-3, #F34810);
+      margin-right: 2px;
+    }
+
+    &.#{$prefix}label-required::before {
+      font-size: calc(var(--form-element-medium-font-size, 12px) - 2px);
+    }
+  }
+
+  &-content {
+    min-width: 120px;
+    flex-grow: 1;
+    flex-shrink: 1;
+    align-items: stretch;
+    display: inline-flex;
+  }
+
+  &-error {
+    border-color: var(--input-feedback-error-border-color, #FF3000);
+    background-color: var(--input-feedback-error-bg-color, #FFFFFF);
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+    background-color: var(--input-disabled-bg-color, #F6F8FC);
+
+    .#{$prefix}label {
+      cursor: not-allowed;
+    }
+
+    .#{$prefix}content {
+      cursor: not-allowed;
+    }
+
+    ;
+  }
+
+  .next-input {
+    box-shadow: none !important;
+    background-color: transparent;
+    border: transparent !important;
+    width: 100%;
+  }
+
+  .next-date-picker2-input,
+  .next-time-picker2-input {
+    border: none !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+  }
+
+  .ct-date-picker2,
+  .ct-time-picker2 {
+    width: 100%;
+
+    .next-input {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .next-input-control {
+      width: 20px;
+    }
+  }
+}

package/es/utils/hoc/withLabel.d.ts

@@ -0,0 +1,94 @@
+import React from 'react';
+import './main.scss';
+export interface WithLabelProps {
+    /**
+     * 标签文本
+     * @en Label text
+     */
+    label?: React.ReactNode;
+    /**
+     * 标签布局方式
+     * @en Label layout mode
+     */
+    labelLayout?: 'horizontal' | 'vertical';
+    /**
+     * 组件尺寸
+     * @en Component size
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * 状态
+     * @en Component state
+     */
+    state?: 'error' | 'warning' | 'loading' | 'normal';
+    /**
+     * 是否禁用
+     * @en Whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * 包装器的类名
+     * @en Wrapper className
+     */
+    className?: string;
+    /**
+     * 包装器的样式
+     * @en Wrapper style
+     */
+    style?: React.CSSProperties;
+    /**
+     * 是否必填
+     * @en Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * 是否只读
+     * @en Whether the field is readonly
+     */
+    readOnly?: boolean;
+    /**
+     * 获取焦点时的回调
+     * @en Callback when component gets focus
+     */
+    onFocus?: (e: React.FocusEvent<any>) => void;
+    /**
+     * 失去焦点时的回调
+     * @en Callback when component loses focus
+     */
+    onBlur?: (e: React.FocusEvent<any>) => void;
+    /**
+     * label 宽度
+     */
+    labelWidth?: string;
+}
+type ComponentWithLabelProps<P> = P & WithLabelProps;
+interface WithLabelConfig {
+    /**
+     * 标签布局方式
+     * - horizontal: 水平布局
+     * - vertical: 垂直布局
+     * @defaultValue 'horizontal'
+     */
+    labelLayout?: 'horizontal' | 'vertical';
+    /**
+     * 使用默认样式
+     */
+    coverStyle?: boolean;
+    /**
+     * 是否启用悬停状态样式
+     * @defaultValue true
+     */
+    enableHoverState?: boolean;
+    /**
+     * 是否启用焦点状态样式
+     * @defaultValue true
+     */
+    enableFocusState?: boolean;
+    /**
+     * 是否启用禁用状态样式
+     * @defaultValue true
+     */
+    enableDisabledState?: boolean;
+}
+export declare function withLabel<P>(WrappedComponent: React.ComponentType<P>, defaultConfig?: WithLabelConfig): React.ForwardRefExoticComponent<React.PropsWithoutRef<ComponentWithLabelProps<P>> & React.RefAttributes<any>>;
+export {};

package/es/utils/hoc/withLabel.js

@@ -0,0 +1,57 @@
+import { __rest } from "tslib";
+import React from 'react';
+import cs from 'classnames';
+import { PREFIX_DEFAULT } from '../index';
+import './main.scss';
+export function withLabel(WrappedComponent, defaultConfig = {}) {
+    const WithLabel = React.forwardRef((props, ref) => {
+        var _a;
+        const { label, size = 'medium', state, disabled, className, style, required, readOnly: readonly, onFocus, onBlur, labelLayout: propsLabelLayout, labelWidth } = props, rest = __rest(props, ["label", "size", "state", "disabled", "className", "style", "required", "readOnly", "onFocus", "onBlur", "labelLayout", "labelWidth"]);
+        const { labelLayout: defaultLabelLayout, coverStyle = true, enableHoverState = true, enableFocusState = true, enableDisabledState = true } = defaultConfig;
+        // Use defaultConfig labelLayout as higher priority
+        const labelLayout = (_a = defaultLabelLayout !== null && defaultLabelLayout !== void 0 ? defaultLabelLayout : propsLabelLayout) !== null && _a !== void 0 ? _a : 'horizontal';
+        const [focused, setFocused] = React.useState(false);
+        const handleFocus = React.useCallback((e) => {
+            if (enableFocusState) {
+                setFocused(true);
+            }
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        }, [onFocus, enableFocusState]);
+        const handleBlur = React.useCallback((e) => {
+            if (enableFocusState) {
+                setFocused(false);
+            }
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        }, [onBlur, enableFocusState]);
+        const wrapperClassName = cs({
+            [`${PREFIX_DEFAULT}field-wrapper-style`]: coverStyle,
+            [`${PREFIX_DEFAULT}field-wrapper-${size}`]: size,
+            [`${PREFIX_DEFAULT}field-wrapper-${state}`]: coverStyle && state && state !== 'normal',
+            [`${PREFIX_DEFAULT}field-wrapper-disabled`]: enableDisabledState && disabled,
+            [`${PREFIX_DEFAULT}field-wrapper-readonly`]: enableDisabledState && readonly,
+            [`${PREFIX_DEFAULT}field-wrapper-focused`]: enableFocusState && focused && state !== 'error' && state !== 'warning',
+            [`${PREFIX_DEFAULT}field-wrapper-hover-enabled`]: enableHoverState && state !== 'error' && state !== 'warning',
+            [`${PREFIX_DEFAULT}field-wrapper-${labelLayout}`]: label,
+        }, className);
+        const labelElement = label ? (React.createElement("label", { className: cs({
+                [`${PREFIX_DEFAULT}label`]: true,
+                [`${PREFIX_DEFAULT}label-required`]: required
+            }) },
+            React.createElement("span", { className: `${PREFIX_DEFAULT}label-text`, style: {
+                    width: labelLayout === 'horizontal' && labelWidth ? labelWidth : 'auto',
+                } }, label))) : null;
+        if (labelLayout === 'vertical') {
+            return (React.createElement("div", { className: cs(`${PREFIX_DEFAULT}field-wrapper-vertical`, `${PREFIX_DEFAULT}field-wrapper`) },
+                labelElement,
+                React.createElement("div", { className: wrapperClassName, style: style },
+                    React.createElement("span", { className: `${PREFIX_DEFAULT}field-wrapper-content` },
+                        React.createElement(WrappedComponent, Object.assign({}, rest, { ref: ref, size: size, state: state, disabled: disabled, readonly: readonly, onFocus: handleFocus, onBlur: handleBlur }))))));
+        }
+        return (React.createElement("div", { className: cs(wrapperClassName, `${PREFIX_DEFAULT}field-wrapper`, `${PREFIX_DEFAULT}field-wrapper-horizontal`), style: style },
+            labelElement,
+            React.createElement("span", { className: `${PREFIX_DEFAULT}field-wrapper-content` },
+                React.createElement(WrappedComponent, Object.assign({}, rest, { ref: ref, size: size, state: state, disabled: disabled, readonly: readonly, onFocus: handleFocus, onBlur: handleBlur })))));
+    });
+    WithLabel.displayName = `WithLabel(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+    return WithLabel;
+}

package/es/utils/index.d.ts

@@ -2,6 +2,7 @@ export * from './consts';
 export * from './types';
 export * from './common';
 export * from './func';
+export * from './hoc/withLabel';
 export { useControlable } from './hooks/useControlable';
 export { useDebounce } from './hooks/useDebounce';
 export { useThrottle } from './hooks/useThrottle';

package/es/utils/index.js

@@ -2,6 +2,7 @@ export * from './consts';
 export * from './types';
 export * from './common';
 export * from './func';
+export * from './hoc/withLabel';
 export { useControlable } from './hooks/useControlable';
 export { useDebounce } from './hooks/useDebounce';
 export { useThrottle } from './hooks/useThrottle';

package/lib/ai-loading/types.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { type CommonProps } from '@alifd/next';
 /**
  * AI Loading 属性
+ * @api
  */
 export interface AILoadingProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
     className?: string;

package/lib/button/button.d.ts

@@ -2,8 +2,7 @@
  * @component 按钮
  * @en Button
  * @type 通用 - General
- * @remarks 同 Next Button，按钮用于开始一个即时操作。- Same as Next.Button, Button used to trigger an action.
- * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Buttons are used for emphasizing important functions on your page.
+ * @remarks [按钮组件] 是一个 [操作类] UI 组件，用于 [触发用户交互动作]，包括点击、悬停等行为，使用户能够 [执行命令、提交表单、切换状态等]。它在卡片中扮演 [核心操作入口] 的角色，通常用于 [表单提交、功能切换、数据操作等场景]。
  * @others
  * ## 无障碍键盘操作指南
  * | 按键    | 说明          |

package/lib/button/button.js

@@ -3,8 +3,7 @@
  * @component 按钮
  * @en Button
  * @type 通用 - General
- * @remarks 同 Next Button，按钮用于开始一个即时操作。- Same as Next.Button, Button used to trigger an action.
- * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Buttons are used for emphasizing important functions on your page.
+ * @remarks [按钮组件] 是一个 [操作类] UI 组件，用于 [触发用户交互动作]，包括点击、悬停等行为，使用户能够 [执行命令、提交表单、切换状态等]。它在卡片中扮演 [核心操作入口] 的角色，通常用于 [表单提交、功能切换、数据操作等场景]。
  * @others
  * ## 无障碍键盘操作指南
  * | 按键    | 说明          |
@@ -26,25 +25,20 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const utils_1 = require("../utils");
 const icon_1 = require("../icon");
 const Button = (0, react_1.forwardRef)((props, ref) => {
-    const { className, size = 'small', icon, type, children } = props, rest = tslib_1.__rest(props, ["className", "size", "icon", "type", "children"]);
-    const iconNode = (0, icon_1.renderCommonIcon)(icon, 'xs');
-    const getChatButtonType = (type) => {
-        if (type === 'secondary') {
-            return 'normal';
-        }
-        if (type === 'normal') {
-            return 'secondary';
-        }
-        return type;
+    const { className, size = 'small', icon, type = 'primary', children, text } = props, rest = tslib_1.__rest(props, ["className", "size", "icon", "type", "children", "text"]);
+    // 根据按钮大小设置对应的图标尺寸
+    const iconSizeMap = {
+        small: 'xs',
+        medium: 'xs',
+        large: 'small'
     };
-    // 目前会把secondary和text都设置为normal， 后续如果需要区分，需要后端配合
-    const validType = getChatButtonType(type);
-    return (react_1.default.createElement(next_1.Button, Object.assign({}, rest, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}button ${size} ${type}`, className), size: size, type: validType, ref: ref }),
+    const iconNode = (0, icon_1.renderCommonIcon)(icon, iconSizeMap[size]);
+    // 文字按钮，只有 Primary 类型
+    const buttonType = text ? 'primary' : type;
+    return (react_1.default.createElement(next_1.Button, Object.assign({}, rest, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}button`, size, buttonType, {
+            [`${utils_1.PREFIX_DEFAULT}button-with-icon`]: !!icon || rest.loading
+        }, className), size: size, type: buttonType, ref: ref, text: text }),
         iconNode,
         children));
 });
-// const ButtonWithSub = assignSubComponent(Button, {
-//     displayName: 'Button',
-// });
-// export * from './types';
 exports.default = next_1.ConfigProvider.config(Button);