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

package/lib/collapse/main.scss

@@ -0,0 +1,97 @@
+@import '../core/variables.scss';
+
+.#{$prefix}collapse.next-collapse {
+  border: none;
+
+  &.next-collapse {
+    .next-collapse-panel-icon {
+      width: 18px;
+      height: auto;
+      transform: none;
+      margin-right: var(--s-2, 8px);
+      left: 2px;
+      top: 1px;
+      font-size: 16px;
+      line-height: 24px;
+
+      &:before {
+        content: "";
+        display: inline-block;
+        width: 18px;
+        height: 18px;
+        background-image: url('https://img.alicdn.com/imgextra/i2/O1CN01NIpvEr1Hw4EsvCARb_!!6000000000821-2-tps-36-36.png');
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        vertical-align: middle;
+      }
+    }
+
+    .next-collapse-panel {
+      border: none;
+
+      &:first-child {
+        .next-collapse-panel-title {
+          padding-top: 0;
+          margin-top: 0;
+        }
+      }
+
+      &:last-child {
+        .next-collapse-panel-content {
+          padding-bottom: 0;
+        }
+      }
+    }
+
+    .next-collapse-panel-expanded .next-collapse-panel-icon {
+
+      &:before {
+        transform: rotate(90deg);
+        transform-origin: 50% 50%;
+      }
+    }
+
+    .next-collapse-panel-hidden {
+      .next-collapse-panel-content {
+        display: none;
+      }
+    }
+
+    .next-collapse-panel-content,
+    .next-collapse-panel-title {
+      background-color: transparent;
+      padding-top: 0px;
+      padding-bottom: 0;
+      padding-left: 24px;
+      padding-right: 0;
+      margin-top: var(--s-2, 8px);
+    }
+
+    .next-collapse-panel-content {
+      padding-top: 0px;
+      margin-top: var(--s-2, 8px);
+      padding-bottom: var(--s-1, 4px);
+    }
+
+    .next-collapse-panel-title {
+      font-weight: 600;
+      position: relative;
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        line-height: 24px;
+        margin-bottom: 0;
+      }
+
+      &:hover {
+        font-weight: 600;
+      }
+    }
+  }
+}

package/lib/collapse/style.d.ts

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

package/lib/collapse/style.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@alifd/next/lib/collapse/style2");
+require("./main.scss");

package/lib/collapse/types.d.ts

@@ -0,0 +1,82 @@
+import type { HTMLAttributes } from 'react';
+import type { CommonProps } from '@alifd/next';
+/**
+ * @api
+ */
+export type KeyType = string | number;
+/**
+ * @api
+ */
+export interface DataItem {
+    id?: string;
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    disabled?: boolean;
+    key?: KeyType;
+    onClick?: (key: KeyType) => void;
+    [propName: string]: unknown;
+}
+/**
+ * @api Collapse
+ */
+export interface CollapseProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    /**
+     * 使用数据模型构建
+     * @en Use data model to build
+     */
+    dataSource?: Array<DataItem>;
+    /**
+     * 默认展开 keys
+     * @en Default expanded keys
+     */
+    defaultExpandedKeys?: KeyType[];
+    /**
+     * 受控展开 keys
+     * @en Controlled expanded keys
+     * @skip
+     */
+    expandedKeys?: KeyType[];
+    /**
+     * 展开状态发升变化时候的回调
+     * @en Callback when the expanded state changes
+     * @skip
+     */
+    onExpand?: (expandedKeys: KeyType | KeyType[]) => void;
+    /**
+     * 所有禁用
+     * @en All disabled
+     */
+    disabled?: boolean;
+    /**
+     * 手风琴模式，一次只能打开一个
+     * @en Accordion mode, only one can be opened at a time
+     * @defaultValue false
+     */
+    accordion?: boolean;
+}
+/**
+ * @api Collapse.Panel
+ */
+export interface PanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onClick'>, CommonProps {
+    /**
+     * 是否禁止用户操作
+     * @en Whether to disable user actions
+     */
+    disabled?: boolean;
+    /**
+     * 标题
+     * @en Title
+     */
+    title?: React.ReactNode;
+    /**
+     * 是否展开
+     * @en Whether to expand
+     * @defaultValue false
+     */
+    isExpanded?: boolean;
+    /**
+     * 点击回调函数
+     * @en Click callback function
+     */
+    onClick?: ((e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void) | null;
+}

package/lib/collapse/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+;

package/lib/core/variables.scss

@@ -19,18 +19,18 @@ $shadow-2: 2px 4px 16px 0px rgba(0, 0, 0, 0.12) !default;
 
 $font-size-display-3: var(--font-size-display-3, 56px) !default;
 $font-size-display-2: var(--font-size-display-2, 48px) !default;
-$s-1: var(---s-1, 4px) !default;
-$s-2: var(---s-2, 8px) !default;
-$s-3: var(---s-3, 12px) !default;
-$s-4: var(---s-4, 16px) !default;
-$s-5: var(---s-5, 20px) !default;
-$s-6: var(---s-6, 24px) !default;
-$s-7: var(---s-7, 28px) !default;
-$s-8: var(---s-8, 32px) !default;
-$s-9: var(---s-9, 36px) !default;
-$s-10: var(---s-10, 40px) !default;
-$s-12: var(---s-12, 48px) !default;
-$s-15: var(---s-15, 60px) !default;
+$s-1: var(--s-1, 4px) !default;
+$s-2: var(--s-2, 8px) !default;
+$s-3: var(--s-3, 12px) !default;
+$s-4: var(--s-4, 16px) !default;
+$s-5: var(--s-5, 20px) !default;
+$s-6: var(--s-6, 24px) !default;
+$s-7: var(--s-7, 28px) !default;
+$s-8: var(--s-8, 32px) !default;
+$s-9: var(--s-9, 36px) !default;
+$s-10: var(--s-10, 40px) !default;
+$s-12: var(--s-12, 48px) !default;
+$s-15: var(--s-15, 60px) !default;
 
 $font-size-headline: var(--font-size-headline, 24px) !default;
 $font-size-title: var(--font-size-title, 20px) !default;
@@ -99,3 +99,18 @@ $color-bg-1: var(--color-bg-1, #ffffff) !default; // ?
 $color-error-3: var(--color-error-3, rgb(255, 82, 25)) !default;
 
 $color-success-3: var(--color-success-3, #00b042) !default;
+
+:root {
+  --form-element-medium-height: 34px;
+  --form-element-medium-line-height: 18px;
+
+  --common-text-font-size: 14px;
+  --common-text-line-height: 20px;
+
+  --btn-size-xs-padding: 8px;
+  
+  // Input control positioning variables
+  --input-control-right: 0px;
+  --input-control-top: 10px;
+  --input-control-padding-right: 20px;
+}

package/lib/date-picker/DatePicker.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DatePicker2 as NextDatePicker2 } from '@alifd/next';
+import type { DatePickerProps } from './types';
+declare const DatePicker: React.ForwardRefExoticComponent<Pick<DatePickerProps & React.RefAttributes<NextDatePicker2> & import("../utils").WithLabelProps, "defaultValue" | "className" | "placeholder" | "style" | "onFocus" | "onBlur" | "onChange" | "size" | "key" | "state" | "label" | "labelLayout" | "disabled" | "required" | "readOnly" | "labelWidth" | "value" | "format" | "showTime" | "timePanelProps"> & React.RefAttributes<any>>;
+export default DatePicker;

package/lib/date-picker/DatePicker.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const next_1 = require("@alifd/next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const withLabel_1 = require("../utils/hoc/withLabel");
+// 基础DatePicker组件
+const BaseDatePicker = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, size = 'medium', format = 'YYYY-MM-DD', showTime, timePanelProps } = _a, props = tslib_1.__rest(_a, ["className", "size", "format", "showTime", "timePanelProps"]);
+    return (react_1.default.createElement(next_1.DatePicker2, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}date-picker2`, className), size: size, format: format, hasBorder: false, showTime: showTime, timePanelProps: timePanelProps, ref: ref })));
+});
+BaseDatePicker.displayName = 'BaseDatePicker';
+// 带Label的DatePicker组件
+const DatePicker = (0, withLabel_1.withLabel)(BaseDatePicker);
+exports.default = DatePicker;

package/lib/date-picker/MonthPicker.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { MonthPickerProps } from './types';
+declare const MonthPicker: React.ForwardRefExoticComponent<Pick<MonthPickerProps & React.RefAttributes<import("@alifd/next/types/date-picker2").MonthPicker> & import("../utils").WithLabelProps, "defaultValue" | "className" | "placeholder" | "style" | "onFocus" | "onBlur" | "onChange" | "size" | "key" | "state" | "label" | "labelLayout" | "disabled" | "required" | "readOnly" | "labelWidth" | "value" | "format"> & React.RefAttributes<any>>;
+export default MonthPicker;

package/lib/date-picker/MonthPicker.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const next_1 = require("@alifd/next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const withLabel_1 = require("../utils/hoc/withLabel");
+// 基础MonthPicker组件
+const BaseMonthPicker = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, size = 'medium', format = 'YYYY-MM' } = _a, props = tslib_1.__rest(_a, ["className", "size", "format"]);
+    return (react_1.default.createElement(next_1.DatePicker2.MonthPicker, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}date-picker2`, className), size: size, format: format, hasBorder: false, ref: ref })));
+});
+BaseMonthPicker.displayName = 'BaseMonthPicker';
+// 带Label的MonthPicker组件
+const MonthPicker = (0, withLabel_1.withLabel)(BaseMonthPicker);
+exports.default = MonthPicker;

package/lib/date-picker/RangePicker.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { RangePickerProps } from './types';
+declare const RangePicker: React.ForwardRefExoticComponent<Pick<RangePickerProps & React.RefAttributes<import("@alifd/next/types/date-picker2").RangePicker> & import("../utils").WithLabelProps, "defaultValue" | "className" | "placeholder" | "style" | "onFocus" | "onBlur" | "onChange" | "size" | "key" | "state" | "label" | "labelLayout" | "disabled" | "required" | "readOnly" | "labelWidth" | "value" | "format" | "mode" | "showTime" | "timePanelProps"> & React.RefAttributes<any>>;
+export default RangePicker;

package/lib/date-picker/RangePicker.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const next_1 = require("@alifd/next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const withLabel_1 = require("../utils/hoc/withLabel");
+// 基础RangePicker组件
+const BaseRangePicker = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, size = 'medium', format = 'YYYY-MM-DD', mode = 'date', showTime, timePanelProps } = _a, props = tslib_1.__rest(_a, ["className", "size", "format", "mode", "showTime", "timePanelProps"]);
+    return (react_1.default.createElement(next_1.DatePicker2.RangePicker
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    , Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}date-picker2`, className), size: size, format: format, mode: mode, hasBorder: false, showTime: showTime, timePanelProps: timePanelProps, ref: ref })));
+});
+BaseRangePicker.displayName = 'BaseRangePicker';
+// 带Label的RangePicker组件
+const RangePicker = (0, withLabel_1.withLabel)(BaseRangePicker);
+exports.default = RangePicker;

package/lib/date-picker/YearPicker.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { YearPickerProps } from './types';
+declare const YearPicker: React.ForwardRefExoticComponent<Pick<YearPickerProps & React.RefAttributes<import("@alifd/next/types/date-picker2").YearPicker> & import("../utils").WithLabelProps, "defaultValue" | "className" | "placeholder" | "style" | "onFocus" | "onBlur" | "onChange" | "size" | "key" | "state" | "label" | "labelLayout" | "disabled" | "required" | "readOnly" | "labelWidth" | "value" | "format"> & React.RefAttributes<any>>;
+export default YearPicker;

package/lib/date-picker/YearPicker.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const next_1 = require("@alifd/next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const withLabel_1 = require("../utils/hoc/withLabel");
+// 基础YearPicker组件
+const BaseYearPicker = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, size = 'medium', format = 'YYYY' } = _a, props = tslib_1.__rest(_a, ["className", "size", "format"]);
+    return (react_1.default.createElement(next_1.DatePicker2.YearPicker, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}date-picker2`, className), size: size, format: format, hasBorder: false, ref: ref })));
+});
+BaseYearPicker.displayName = 'BaseYearPicker';
+// 带Label的YearPicker组件
+const YearPicker = (0, withLabel_1.withLabel)(BaseYearPicker);
+exports.default = YearPicker;

package/lib/date-picker/index.d.ts

@@ -1,24 +1,6 @@
-/**
- * @component 日期选择器
- * @en DatePicker
- * @type 通用 - General
- * @remarks 同 Next DatePicker，按钮用于开始一个即时操作。- Same as Next.Button, Button used to trigger an action.
- * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Buttons are used for emphasizing important functions on your page.
- * @others
- * ## 无障碍键盘操作指南
- * | 按键    | 说明          |
- * | :---- | :---------- |
- * | Enter | 触发 onClick 事件 |
- * | SPACE | 触发 onClick 事件 |
- * @othersEn
- * ## ARIA and KeyBoard
- * | KeyBoard          | Description                              |
- * | :---------- | :------------------------------ |
- * | Enter       | Trigger the onClick event    |
- * | SPACE       | Trigger the onClick event    |
- */
-import React from 'react';
-import { DatePicker2 as NextDatePicker2 } from '@alifd/next';
-export * from './types';
-declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<Pick<any, string | number | symbol> & React.RefAttributes<NextDatePicker2>, string | number | symbol> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, NextDatePicker2, {}>;
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<any, string | number | symbol> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, unknown, {}> & {
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+};
 export default _default;

package/lib/date-picker/index.js

@@ -1,35 +1,18 @@
 "use strict";
-/**
- * @component 日期选择器
- * @en DatePicker
- * @type 通用 - General
- * @remarks 同 Next DatePicker，按钮用于开始一个即时操作。- Same as Next.Button, Button used to trigger an action.
- * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Buttons are used for emphasizing important functions on your page.
- * @others
- * ## 无障碍键盘操作指南
- * | 按键    | 说明          |
- * | :---- | :---------- |
- * | Enter | 触发 onClick 事件 |
- * | SPACE | 触发 onClick 事件 |
- * @othersEn
- * ## ARIA and KeyBoard
- * | KeyBoard          | Description                              |
- * | :---------- | :------------------------------ |
- * | Enter       | Trigger the onClick event    |
- * | SPACE       | Trigger the onClick event    |
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
 const next_1 = require("@alifd/next");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const utils_1 = require("../utils");
-const DatePicker = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, size = 'medium' } = _a, props = tslib_1.__rest(_a, ["className", "size"]);
-    return (react_1.default.createElement(next_1.DatePicker2, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}date-picker2`, className), size: size, ref: ref })));
-});
-const DatePickerWithSub = (0, utils_1.assignSubComponent)(DatePicker, {
+const DatePicker_1 = tslib_1.__importDefault(require("./DatePicker"));
+const RangePicker_1 = tslib_1.__importDefault(require("./RangePicker"));
+const YearPicker_1 = tslib_1.__importDefault(require("./YearPicker"));
+const MonthPicker_1 = tslib_1.__importDefault(require("./MonthPicker"));
+// 组装组件
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const DatePickerWithSub = (0, utils_1.assignSubComponent)(DatePicker_1.default, {
     displayName: 'DatePicker',
+    RangePicker: RangePicker_1.default,
+    YearPicker: YearPicker_1.default,
+    MonthPicker: MonthPicker_1.default,
 });
-tslib_1.__exportStar(require("./types"), exports);
 exports.default = next_1.ConfigProvider.config(DatePickerWithSub);

package/lib/date-picker/main.scss

@@ -2,5 +2,27 @@
 @import "../core/variables.scss";
 
 .#{$prefix}date-picker2 {
-  
+  &.next-date-picker2 {
+    width: 100%;
+    position: relative;
+    padding-right: var(--input-control-padding-right, 22px);
+  }
+
+  .next-input-control {
+    position: absolute;
+    right: var(--input-control-right, 2px);
+    top: var(--input-control-top, 10px);
+  }
+
+  .next-date-picker2-input-separator {
+    color: var(--color-text1-2, #A0A3A8);
+  }
+
+  .next-date-picker2-input {
+    background-color: transparent;
+
+    input {
+      width: 100%;
+    }
+  }
 }

package/lib/date-picker/style.d.ts

@@ -1 +1,2 @@
 import '@alifd/next/lib/date-picker2/style2';
+import './main.scss';

package/lib/date-picker/style.js

@@ -1,3 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 require("@alifd/next/lib/date-picker2/style2");
+require("./main.scss");