diff --git a/content/feedback/banner/index-en-US.md b/content/feedback/banner/index-en-US.md index ce92b46dc0..5265ce994e 100644 --- a/content/feedback/banner/index-en-US.md +++ b/content/feedback/banner/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 73 +order: 74 category: Feedback title: Banner subTitle: Banner diff --git a/content/feedback/banner/index.md b/content/feedback/banner/index.md index 85f96fa619..97746620c4 100644 --- a/content/feedback/banner/index.md +++ b/content/feedback/banner/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 73 +order: 74 category: 反馈类 title: Banner 通知横幅 icon: doc-banner diff --git a/content/feedback/notification/index-en-US.md b/content/feedback/notification/index-en-US.md index 9519fa5730..1ad4fe0201 100644 --- a/content/feedback/notification/index-en-US.md +++ b/content/feedback/notification/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 74 +order: 75 category: Feedback title: Notification subTitle: Notification diff --git a/content/feedback/notification/index.md b/content/feedback/notification/index.md index efb53b337a..f6524cde1c 100644 --- a/content/feedback/notification/index.md +++ b/content/feedback/notification/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 74 +order: 75 category: 反馈类 title: Notification 通知 icon: doc-notification diff --git a/content/feedback/popconfirm/index-en-US.md b/content/feedback/popconfirm/index-en-US.md index 97ba0724db..3e6618fdbb 100644 --- a/content/feedback/popconfirm/index-en-US.md +++ b/content/feedback/popconfirm/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 75 +order: 76 category: Feedback title: Popconfirm subTitle: Popconfirm diff --git a/content/feedback/popconfirm/index.md b/content/feedback/popconfirm/index.md index 60637fed23..4aefc75d85 100644 --- a/content/feedback/popconfirm/index.md +++ b/content/feedback/popconfirm/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 75 +order: 76 category: 反馈类 title: Popconfirm 气泡确认框 icon: doc-popconfirm diff --git a/content/feedback/progress/index-en-US.md b/content/feedback/progress/index-en-US.md index 3ed719f390..3de67b7e7f 100644 --- a/content/feedback/progress/index-en-US.md +++ b/content/feedback/progress/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 76 +order: 77 category: Feedback title: Progress subTitle: Progress diff --git a/content/feedback/progress/index.md b/content/feedback/progress/index.md index e3766b2153..336e891e7d 100644 --- a/content/feedback/progress/index.md +++ b/content/feedback/progress/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 76 +order: 77 category: 反馈类 title: Progress 进度条 icon: doc-progress diff --git a/content/feedback/skeleton/index-en-US.md b/content/feedback/skeleton/index-en-US.md index 6610c20534..2034d45bfa 100644 --- a/content/feedback/skeleton/index-en-US.md +++ b/content/feedback/skeleton/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 77 +order: 78 category: Feedback title: Skeleton subTitle: Skeleton diff --git a/content/feedback/skeleton/index.md b/content/feedback/skeleton/index.md index 91c0294687..7fd38d3b39 100644 --- a/content/feedback/skeleton/index.md +++ b/content/feedback/skeleton/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 77 +order: 78 category: 反馈类 title: Skeleton 骨架屏 icon: doc-skeleton diff --git a/content/feedback/spin/index-en-US.md b/content/feedback/spin/index-en-US.md index befb621190..9a5bd50995 100644 --- a/content/feedback/spin/index-en-US.md +++ b/content/feedback/spin/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 78 +order: 79 category: Feedback title: Spin subTitle: Spin diff --git a/content/feedback/spin/index.md b/content/feedback/spin/index.md index c830409f24..f08c7a262b 100644 --- a/content/feedback/spin/index.md +++ b/content/feedback/spin/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 78 +order: 79 category: 反馈类 title: Spin 加载器 icon: doc-spin diff --git a/content/feedback/toast/index-en-US.md b/content/feedback/toast/index-en-US.md index f86945569b..e408cac3bc 100644 --- a/content/feedback/toast/index-en-US.md +++ b/content/feedback/toast/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 79 +order: 80 category: Feedback title: Toast subTitle: Toast diff --git a/content/feedback/toast/index.md b/content/feedback/toast/index.md index 8ed91bef04..ba9a268492 100644 --- a/content/feedback/toast/index.md +++ b/content/feedback/toast/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 79 +order: 80 category: 反馈类 title: Toast 提示 icon: doc-toast diff --git a/content/input/colorpicker/index-en-US.md b/content/input/colorpicker/index-en-US.md new file mode 100644 index 0000000000..2002d1346a --- /dev/null +++ b/content/input/colorpicker/index-en-US.md @@ -0,0 +1,143 @@ +--- +localeCode: en-US +order: 27 +category: Input +title: ColorPicker +icon: doc-colorPlatteNew +brief: Quickly and easily select colors, and provide a dropper tool to pick colors +--- + + + +## Demos + +### How to import + + +```jsx import +import { ColorPicker } from '@douyinfe/semi-ui'; +``` + + +### Basic Use + +#### In portal + +```jsx live=true +import { ColorPicker, Button } from '@douyinfe/semi-ui'; +function Demo(){ + return
+ {console.log(value)}} usePopover={true}/> + +
+
自定义 trigger
+ + {console.log(value)}} usePopover={true}> + + + +
+} + +``` + +#### Normal display +```jsx live=true +import { ColorPicker } from '@douyinfe/semi-ui'; +function Demo(){ + return {console.log(value)}}/> +} + +``` + +### Eyedropper Color Picker + +Use `eyeDropper={true}` to enable the eyedropper function, which supports picking colors from the browser or external software screen. + + +To enable this function, the current web page must be deployed in a secure context such as HTTPS or localhost domain name, otherwise it will have no effect. The user's browser version must be Chromium > 95 + + + +```jsx live=true +import { ColorPicker } from '@douyinfe/semi-ui'; +function Demo(){ + return {console.log(value)}}/> +} + +``` + +### Default Value + +When converting between various color representation formats, there are theoretical errors between some formats, so the value returned to you by onChange is an object containing color values ​​in three formats: hsva, hex, and rgba. + +The defaultValue (uncontrolled) and value (controlled) you pass in should also be objects containing the same three formats. + +We provide a static tool function `colorStringToValue` on the component class to convert common color strings to this object, supporting direct passing of strings such as rgb(57,197,187) #39c5bb and hsv(176,71,77). + +```jsx live=true +import { ColorPicker } from '@douyinfe/semi-ui'; +function Demo(){ + return
+ { + console.log(value) + }} className={""} alpha={true}/> +
+ +} + +``` + +### Controlled + +Controlled use by passing in value + +```jsx live=true +import { ColorPicker } from '@douyinfe/semi-ui'; +function Demo(){ + const [value,setValue] = useState(ColorPicker.colorStringToValue("#39c5bb")); + console.log(value); + return
+ { + setValue(value) + }} className={""} alpha={true}/> +
+ +} + +``` + + +### Rendering additional elements at the top and bottom + +Use `topSlot` and `bottomSlot` to render additional elements at the top and bottom + +```jsx live=true +import { ColorPicker } from '@douyinfe/semi-ui'; +function Demo(){ + return + TopSlot + } bottomSlot={
Bottom Slot
} alpha={true} onChange={value=>{console.log(value)}}/> +} + +``` + +### API Table + +| Parameter | Description | Type | Default value | +|---------------|------------|---------------|------| +| onChange | User selected color callback | (value)=>void | - | +| alpha | Whether to enable transparency selection | boolean | true | +| bottomSlot | Bottom rendering additional elements | ReactNode | - | +| className | Class name | string | - | +| defaultFormat | Default format for manual input | rgba hex hsva | hex | +| defaultValue | Default value | Object | - | +| eyeDropper | Whether to enable the eyedropper color picker | boolean | true | +| height | Height | number | 280 | +| style | Style | CSSProperties | - | +| topSlot | Top rendering additional elements | ReactNode | - | +| width | Width | number | 280 | +| usePopover | Whether to put in Popover rendering | boolean | false | +| popoverProps | When placing a Popover, the props passed to the Popover | Popover Props | - | diff --git a/content/input/colorpicker/index.md b/content/input/colorpicker/index.md new file mode 100644 index 0000000000..36d9ca78c2 --- /dev/null +++ b/content/input/colorpicker/index.md @@ -0,0 +1,143 @@ +--- +localeCode: zh-CN +order: 27 +category: 输入类 +title: ColorPicker 颜色选择器 +icon: doc-colorPlatteNew +brief: 快速便捷地选择颜色，并提供滴管工具取色 +--- + + + +## 代码演示 + +### 如何引入 + + +```jsx import +import { ColorPicker } from '@douyinfe/semi-ui'; +``` + + +### 基本用法 + +#### 放在弹层 + +```jsx live=true +import { ColorPicker, Button } from '@douyinfe/semi-ui'; +function Demo(){ + return
+ {console.log(value)}} usePopover={true}/> + +
+
自定义 trigger
+ + {console.log(value)}} usePopover={true}> + + + +
+} + +``` + +#### 正常展示 +```jsx live=true +import { ColorPicker } from '@douyinfe/semi-ui'; +function Demo(){ + return {console.log(value)}}/> +} + +``` + +### 滴管取色器 + +使用 `eyeDropper={true}` 开启滴管功能，支持从浏览器内或外部软件屏幕取色。 + + +开启此功能需要当前网页部署在 HTTPS 或 localhost 域名等安全 context 下，否则无效果。需用户浏览器版本 Chromium > 95 + + + +```jsx live=true +import { ColorPicker } from '@douyinfe/semi-ui'; +function Demo(){ + return {console.log(value)}}/> +} + +``` + +### 默认值 +在进行各种颜色表示格式之间相互转换时，部分格式之间存在理论误差，因此 onChange 返回给你的值是同时包含了 hsva hex rgba 三种格式的色值的对象。 + +你传入的 defaultValue(非受控) 和 value(受控) 也应当是同样包含三种格式的对象。 + +我们在组件类上提供了静态工具函数 `colorStringToValue`，用于将常见颜色字符串转换为该对象，支持 rgb(57,197,187) #39c5bb hsv(176,71,77) 等字符串直接传入。 + +```jsx live=true +import { ColorPicker } from '@douyinfe/semi-ui'; +function Demo(){ + return
+ { + console.log(value) + }} className={""} alpha={true}/> +
+ +} + +``` + +### 受控 + +通过传入 value 来受控使用 + +```jsx live=true +import { ColorPicker } from '@douyinfe/semi-ui'; +function Demo(){ + const [value,setValue] = useState(ColorPicker.colorStringToValue("#39c5bb")); + console.log(value); + return
+ { + setValue(value) + }} className={""} alpha={true}/> +
+ +} + +``` + + +### 顶部和底部渲染额外元素 + +使用 `topSlot` 和 `bottomSlot` 在顶部和底部渲染额外元素 + +```jsx live=true +import { ColorPicker } from '@douyinfe/semi-ui'; +function Demo(){ + return + TopSlot + } bottomSlot={
Bottom Slot
} alpha={true} onChange={value=>{console.log(value)}}/> +} + +``` + +### API 参考 + +| 参数 | 说明 | 类型 | 默认值 | +|---------------|------------|---------------|------| +| onChange | 用户选中颜色的回调 | (value)=>void | - | +| alpha | 是否开启透明度选择 | boolean | true | +| bottomSlot | 底部渲染额外元素 | ReactNode | - | +| className | 类名 | string | - | +| defaultFormat | 默认手动输入时的格式 | rgba hex hsva | hex | +| defaultValue | 默认值 | Object | - | +| eyeDropper | 是否开启滴管拾色器 | boolean | true | +| height | 高度 | number | 280 | +| style | 样式 | CSSProperties | - | +| topSlot | 顶部渲染额外元素 | ReactNode | - | +| width | 宽度 | number | 280 | +| usePopover | 是否放入Popover渲染 | boolean | false | +| popoverProps | 放入 Popover 时，Popover 传入的 props | Popover Props | - | + diff --git a/content/input/datepicker/index-en-US.md b/content/input/datepicker/index-en-US.md index 1f6a59d814..ec649becfb 100644 --- a/content/input/datepicker/index-en-US.md +++ b/content/input/datepicker/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 27 +order: 28 category: Input title: DatePicker subTitle: Date Selector diff --git a/content/input/datepicker/index.md b/content/input/datepicker/index.md index 1f9382072e..e21c83ff0a 100644 --- a/content/input/datepicker/index.md +++ b/content/input/datepicker/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 27 +order: 28 category: 输入类 title: DatePicker 日期选择器 icon: doc-datepicker diff --git a/content/input/form/index-en-US.md b/content/input/form/index-en-US.md index 8520600e3b..dc373fdf50 100644 --- a/content/input/form/index-en-US.md +++ b/content/input/form/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 28 +order: 29 category: Input title: Form subTitle: Form diff --git a/content/input/form/index.md b/content/input/form/index.md index 88643ab062..3d7b6b90b5 100644 --- a/content/input/form/index.md +++ b/content/input/form/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 28 +order: 29 category: 输入类 title: Form 表单 icon: doc-form diff --git a/content/input/input/index-en-US.md b/content/input/input/index-en-US.md index 8252194760..323a19aac6 100644 --- a/content/input/input/index-en-US.md +++ b/content/input/input/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 29 +order: 30 category: Input title: Input subTitle: Input diff --git a/content/input/input/index.md b/content/input/input/index.md index 93d6873394..8595b48440 100644 --- a/content/input/input/index.md +++ b/content/input/input/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 29 +order: 30 category: 输入类 title: Input 输入框 icon: doc-input diff --git a/content/input/inputnumber/index-en-US.md b/content/input/inputnumber/index-en-US.md index 393fc21cb7..fe46f82e67 100644 --- a/content/input/inputnumber/index-en-US.md +++ b/content/input/inputnumber/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 30 +order: 31 category: Input title: InputNumber subTitle: InputNumber diff --git a/content/input/inputnumber/index.md b/content/input/inputnumber/index.md index 8737529a5e..a7da3bbd43 100644 --- a/content/input/inputnumber/index.md +++ b/content/input/inputnumber/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 30 +order: 31 category: 输入类 title: InputNumber 数字输入框 icon: doc-inputnumber diff --git a/content/input/pincode/index-en-US.md b/content/input/pincode/index-en-US.md index 1c734f38d2..4a4ed45b70 100644 --- a/content/input/pincode/index-en-US.md +++ b/content/input/pincode/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 31 +order: 32 category: Input title: PinCode icon: doc-pincode diff --git a/content/input/pincode/index.md b/content/input/pincode/index.md index 004b7e8b0c..539dd8a284 100644 --- a/content/input/pincode/index.md +++ b/content/input/pincode/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 31 +order: 32 category: 输入类 title: PinCode 验证码输入 icon: doc-pincode diff --git a/content/input/radio/index-en-US.md b/content/input/radio/index-en-US.md index 031a1da31b..55be3d7fc1 100644 --- a/content/input/radio/index-en-US.md +++ b/content/input/radio/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 32 +order: 33 category: Input title: Radio subTitle: Radio diff --git a/content/input/radio/index.md b/content/input/radio/index.md index beb6fc6260..5cdda7bd63 100644 --- a/content/input/radio/index.md +++ b/content/input/radio/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 32 +order: 33 category: 输入类 title: Radio 单选框 icon: doc-radio diff --git a/content/input/rating/index-en-US.md b/content/input/rating/index-en-US.md index 5bf2536bed..db13c3b981 100644 --- a/content/input/rating/index-en-US.md +++ b/content/input/rating/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 33 +order: 34 category: Input title: Rating subTitle: Rating diff --git a/content/input/rating/index.md b/content/input/rating/index.md index ea8a27b85a..947ac59592 100644 --- a/content/input/rating/index.md +++ b/content/input/rating/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 33 +order: 34 category: 输入类 title: Rating 评分 icon: doc-rating diff --git a/content/input/select/index-en-US.md b/content/input/select/index-en-US.md index 5f6a0bc471..2b708b8d15 100644 --- a/content/input/select/index-en-US.md +++ b/content/input/select/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 34 +order: 35 category: Input title: Select subTitle: Select diff --git a/content/input/select/index.md b/content/input/select/index.md index a412317ab2..2345cf424a 100644 --- a/content/input/select/index.md +++ b/content/input/select/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 34 +order: 35 category: 输入类 title: Select 选择器 icon: doc-select diff --git a/content/input/slider/index-en-US.md b/content/input/slider/index-en-US.md index f221a10bc0..8692d911f3 100644 --- a/content/input/slider/index-en-US.md +++ b/content/input/slider/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 35 +order: 36 category: Input title: Slider subTitle: Slider diff --git a/content/input/slider/index.md b/content/input/slider/index.md index aecc9555bb..f43c431c93 100644 --- a/content/input/slider/index.md +++ b/content/input/slider/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 35 +order: 36 category: 输入类 title: Slider 滑动选择器 icon: doc-slider diff --git a/content/input/switch/index-en-US.md b/content/input/switch/index-en-US.md index 00da07265e..9afbc9f58c 100644 --- a/content/input/switch/index-en-US.md +++ b/content/input/switch/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 36 +order: 37 category: Input title: Switch subTitle: Switch diff --git a/content/input/switch/index.md b/content/input/switch/index.md index 1dcc6ef08d..6d9f002caf 100644 --- a/content/input/switch/index.md +++ b/content/input/switch/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 36 +order: 37 category: 输入类 title: Switch 开关 icon: doc-switch diff --git a/content/input/taginput/index-en-US.md b/content/input/taginput/index-en-US.md index 7fba0b0614..906f7f0ebb 100644 --- a/content/input/taginput/index-en-US.md +++ b/content/input/taginput/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 37 +order: 38 category: Input title: TagInput subTitle: TagInput diff --git a/content/input/taginput/index.md b/content/input/taginput/index.md index 13c71fd4d6..0928dc0233 100644 --- a/content/input/taginput/index.md +++ b/content/input/taginput/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 37 +order: 38 category: 输入类 title: TagInput 标签输入框 icon: doc-tagInput diff --git a/content/input/timepicker/index-en-US.md b/content/input/timepicker/index-en-US.md index a891c24c3b..d6b91e1808 100644 --- a/content/input/timepicker/index-en-US.md +++ b/content/input/timepicker/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 38 +order: 39 category: Input title: TimePicker subTitle: TimePicker diff --git a/content/input/timepicker/index.md b/content/input/timepicker/index.md index cc0e101787..166f0b7fe3 100644 --- a/content/input/timepicker/index.md +++ b/content/input/timepicker/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 38 +order: 39 category: 输入类 title: TimePicker 时间选择器 icon: doc-timepicker diff --git a/content/input/transfer/index-en-US.md b/content/input/transfer/index-en-US.md index 3cce67b663..e265329221 100644 --- a/content/input/transfer/index-en-US.md +++ b/content/input/transfer/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 39 +order: 40 category: Input title: Transfer icon: doc-transfer diff --git a/content/input/transfer/index.md b/content/input/transfer/index.md index de178a8a06..d4ec82efb4 100644 --- a/content/input/transfer/index.md +++ b/content/input/transfer/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 39 +order: 40 category: 输入类 title: Transfer 穿梭框 icon: doc-transfer diff --git a/content/input/treeselect/index-en-US.md b/content/input/treeselect/index-en-US.md index e273b211b9..82118be34a 100644 --- a/content/input/treeselect/index-en-US.md +++ b/content/input/treeselect/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 40 +order: 41 category: Input title: TreeSelect subTitle: TreeSelect diff --git a/content/input/treeselect/index.md b/content/input/treeselect/index.md index 7b83a99f0b..cd303e4bb3 100644 --- a/content/input/treeselect/index.md +++ b/content/input/treeselect/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 40 +order: 41 category: 输入类 title: TreeSelect 树选择器 icon: doc-treeselect diff --git a/content/input/upload/index-en-US.md b/content/input/upload/index-en-US.md index bbf3301d24..6d59d08135 100644 --- a/content/input/upload/index-en-US.md +++ b/content/input/upload/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 41 +order: 42 category: Input title: Upload icon: doc-upload diff --git a/content/input/upload/index.md b/content/input/upload/index.md index fba5a16af7..12e01aff8d 100644 --- a/content/input/upload/index.md +++ b/content/input/upload/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 41 +order: 42 category: 输入类 title: Upload 上传 icon: doc-upload diff --git a/content/navigation/anchor/index-en-US.md b/content/navigation/anchor/index-en-US.md index c52d81ac13..b16178e177 100644 --- a/content/navigation/anchor/index-en-US.md +++ b/content/navigation/anchor/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 42 +order: 43 category: Navigation title: Anchor subTitle: Anchor diff --git a/content/navigation/anchor/index.md b/content/navigation/anchor/index.md index 8fbc0daec3..772fe8a938 100644 --- a/content/navigation/anchor/index.md +++ b/content/navigation/anchor/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 42 +order: 43 category: 导航类 title: Anchor 锚点 icon: doc-anchor diff --git a/content/navigation/backtop/index-en-US.md b/content/navigation/backtop/index-en-US.md index e67e6e4ac6..d4093de2dd 100644 --- a/content/navigation/backtop/index-en-US.md +++ b/content/navigation/backtop/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 43 +order: 44 category: Navigation title: BackTop subTitle: BackTop diff --git a/content/navigation/backtop/index.md b/content/navigation/backtop/index.md index 2b32bf1558..3a470d0d39 100644 --- a/content/navigation/backtop/index.md +++ b/content/navigation/backtop/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 43 +order: 44 category: 导航类 title: BackTop 回到顶部 icon: doc-backtop diff --git a/content/navigation/breadcrumb/index-en-US.md b/content/navigation/breadcrumb/index-en-US.md index 6ff5a5f842..014f9c0a26 100644 --- a/content/navigation/breadcrumb/index-en-US.md +++ b/content/navigation/breadcrumb/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 44 +order: 45 category: Navigation title: Breadcrumb subTitle: Breadcrumb diff --git a/content/navigation/breadcrumb/index.md b/content/navigation/breadcrumb/index.md index cd4d826735..93522de3df 100644 --- a/content/navigation/breadcrumb/index.md +++ b/content/navigation/breadcrumb/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 44 +order: 45 category: 导航类 title: Breadcrumb 面包屑 icon: doc-breadcrumb diff --git a/content/navigation/navigation/index-en-US.md b/content/navigation/navigation/index-en-US.md index 4e70b1f873..6ca3e07849 100644 --- a/content/navigation/navigation/index-en-US.md +++ b/content/navigation/navigation/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 45 +order: 46 category: Navigation title: Navigation subTitle: Navigation diff --git a/content/navigation/navigation/index.md b/content/navigation/navigation/index.md index 392d0977b9..0e5b9deb44 100644 --- a/content/navigation/navigation/index.md +++ b/content/navigation/navigation/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 45 +order: 46 category: 导航类 title: Navigation 导航 icon: doc-navigation diff --git a/content/navigation/pagination/index-en-US.md b/content/navigation/pagination/index-en-US.md index 133beb689b..8917466d18 100644 --- a/content/navigation/pagination/index-en-US.md +++ b/content/navigation/pagination/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 46 +order: 47 category: Navigation title: Pagination subTitle: Pagination diff --git a/content/navigation/pagination/index.md b/content/navigation/pagination/index.md index 5b0a019532..2580c4ec14 100644 --- a/content/navigation/pagination/index.md +++ b/content/navigation/pagination/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 46 +order: 47 category: 导航类 title: Pagination 翻页器 icon: doc-pagination diff --git a/content/navigation/steps/index-en-US.md b/content/navigation/steps/index-en-US.md index fdbcb479c4..35cb082f57 100644 --- a/content/navigation/steps/index-en-US.md +++ b/content/navigation/steps/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 47 +order: 48 category: Navigation title: Steps subTitle: Steps diff --git a/content/navigation/steps/index.md b/content/navigation/steps/index.md index 17c05af3e9..5554f9469d 100644 --- a/content/navigation/steps/index.md +++ b/content/navigation/steps/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 47 +order: 48 category: 导航类 title: Steps 步骤 icon: doc-steps diff --git a/content/navigation/tabs/index-en-US.md b/content/navigation/tabs/index-en-US.md index b8ad73c5f5..75416c35f4 100644 --- a/content/navigation/tabs/index-en-US.md +++ b/content/navigation/tabs/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 48 +order: 49 category: Navigation title: Tabs subTitle: Tabs diff --git a/content/navigation/tabs/index.md b/content/navigation/tabs/index.md index 8a3ac9ae13..f0dff2d265 100644 --- a/content/navigation/tabs/index.md +++ b/content/navigation/tabs/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 48 +order: 49 category: 导航类 title: Tabs 标签栏 icon: doc-tabs diff --git a/content/navigation/tree/index-en-US.md b/content/navigation/tree/index-en-US.md index dba0c9463d..002fd51622 100644 --- a/content/navigation/tree/index-en-US.md +++ b/content/navigation/tree/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 49 +order: 50 category: Navigation title: Tree subTitle: Tree diff --git a/content/navigation/tree/index.md b/content/navigation/tree/index.md index f23fbe7ab5..7d8a0b6ad4 100644 --- a/content/navigation/tree/index.md +++ b/content/navigation/tree/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 49 +order: 50 category: 导航类 title: Tree 树形控件 icon: doc-tree diff --git a/content/order.js b/content/order.js index 77de606c50..276b125443 100644 --- a/content/order.js +++ b/content/order.js @@ -25,6 +25,7 @@ const order = [ 'autocomplete', 'cascader', 'checkbox', + 'colorpicker', 'datepicker', 'form', 'input', diff --git a/content/other/configprovider/index-en-US.md b/content/other/configprovider/index-en-US.md index 4c9548ecd8..9c97928b95 100644 --- a/content/other/configprovider/index-en-US.md +++ b/content/other/configprovider/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 80 +order: 81 category: Other title: ConfigProvider icon: doc-configprovider diff --git a/content/other/configprovider/index.md b/content/other/configprovider/index.md index 653123a70b..a03e8fc16f 100644 --- a/content/other/configprovider/index.md +++ b/content/other/configprovider/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 80 +order: 81 category: 其他 title: ConfigProvider 全局配置 icon: doc-configprovider diff --git a/content/other/locale/index-en-US.md b/content/other/locale/index-en-US.md index e93cc6b21e..affafc5751 100644 --- a/content/other/locale/index-en-US.md +++ b/content/other/locale/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 81 +order: 82 category: Other title: LocaleProvider subTitle: LocaleProvider diff --git a/content/other/locale/index.md b/content/other/locale/index.md index 2231a7f04d..845fbf54c8 100644 --- a/content/other/locale/index.md +++ b/content/other/locale/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 81 +order: 82 category: 其他 title: LocaleProvider 多语言 icon: doc-i18n diff --git a/content/show/avatar/index-en-US.md b/content/show/avatar/index-en-US.md index c4dde53bba..73785a519e 100644 --- a/content/show/avatar/index-en-US.md +++ b/content/show/avatar/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 50 +order: 51 category: Show title: Avatar subTitle: avatar diff --git a/content/show/avatar/index.md b/content/show/avatar/index.md index 2c17e7bd5e..8e5fb8cadf 100644 --- a/content/show/avatar/index.md +++ b/content/show/avatar/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 50 +order: 51 category: 展示类 title: Avatar 头像 icon: doc-avatar diff --git a/content/show/badge/index-en-US.md b/content/show/badge/index-en-US.md index 754a85e66c..d47d34fe29 100644 --- a/content/show/badge/index-en-US.md +++ b/content/show/badge/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 51 +order: 52 category: Show title: Badge subTitle: Badge diff --git a/content/show/badge/index.md b/content/show/badge/index.md index 822f904028..bcb345ced6 100644 --- a/content/show/badge/index.md +++ b/content/show/badge/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 51 +order: 52 category: 展示类 title: Badge 徽章 icon: doc-badge diff --git a/content/show/calendar/index-en-US.md b/content/show/calendar/index-en-US.md index 2b1f664002..dbea337cda 100644 --- a/content/show/calendar/index-en-US.md +++ b/content/show/calendar/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 52 +order: 53 category: Show title: Calendar subTitle: Calendar diff --git a/content/show/calendar/index.md b/content/show/calendar/index.md index 273c7d3500..85a3dc4548 100644 --- a/content/show/calendar/index.md +++ b/content/show/calendar/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 52 +order: 53 category: 展示类 title: Calendar 日历 icon: doc-calendar diff --git a/content/show/card/index-en-US.md b/content/show/card/index-en-US.md index 2361326ae4..27ea526e6f 100644 --- a/content/show/card/index-en-US.md +++ b/content/show/card/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 53 +order: 54 category: Show title: Card subTitle: Card diff --git a/content/show/card/index.md b/content/show/card/index.md index 318c205709..abdd90e04f 100644 --- a/content/show/card/index.md +++ b/content/show/card/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 53 +order: 54 category: 展示类 title: Card 卡片 subTitle: 卡片 diff --git a/content/show/carousel/index-en-US.md b/content/show/carousel/index-en-US.md index 333f8fb5ed..21cf27e033 100644 --- a/content/show/carousel/index-en-US.md +++ b/content/show/carousel/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 54 +order: 55 category: Show title: Carousel subTitle: Carousel diff --git a/content/show/carousel/index.md b/content/show/carousel/index.md index 9e395f6bbf..bfc6b9bd95 100644 --- a/content/show/carousel/index.md +++ b/content/show/carousel/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 54 +order: 55 category: 展示类 title: Carousel 轮播图 icon: doc-carousel diff --git a/content/show/chart/index-en-US.md b/content/show/chart/index-en-US.md index 9ad0446804..6b5ad874e8 100644 --- a/content/show/chart/index-en-US.md +++ b/content/show/chart/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 72 +order: 73 category: Show title: Data Visualization icon: doc-vchart diff --git a/content/show/chart/index.md b/content/show/chart/index.md index ce3dafb084..ab2f6aef23 100644 --- a/content/show/chart/index.md +++ b/content/show/chart/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 72 +order: 73 category: 展示类 title: Data Visualization 数据可视化 icon: doc-vchart diff --git a/content/show/collapse/index-en-US.md b/content/show/collapse/index-en-US.md index 9b4be85cf7..0fbfaf23a2 100644 --- a/content/show/collapse/index-en-US.md +++ b/content/show/collapse/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 55 +order: 56 category: Show title: Collapse subTitle: Collapse diff --git a/content/show/collapse/index.md b/content/show/collapse/index.md index 702ca36648..ed88dee5a0 100644 --- a/content/show/collapse/index.md +++ b/content/show/collapse/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 55 +order: 56 category: 展示类 title: Collapse 折叠面板 icon: doc-accordion diff --git a/content/show/collapsible/index-en-US.md b/content/show/collapsible/index-en-US.md index 84055896ed..915117ce52 100644 --- a/content/show/collapsible/index-en-US.md +++ b/content/show/collapsible/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 56 +order: 57 category: Show title: Collapsible subTitle: Collapsible diff --git a/content/show/collapsible/index.md b/content/show/collapsible/index.md index 5a5127facc..ef1b28ff51 100644 --- a/content/show/collapsible/index.md +++ b/content/show/collapsible/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 56 +order: 57 category: 展示类 title: Collapsible 折叠 icon: doc-collapsible diff --git a/content/show/descriptions/index-en-US.md b/content/show/descriptions/index-en-US.md index 18eb32bd1e..3297e6d35d 100644 --- a/content/show/descriptions/index-en-US.md +++ b/content/show/descriptions/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 57 +order: 58 category: Show title: Description subTitle: Descriptions diff --git a/content/show/descriptions/index.md b/content/show/descriptions/index.md index fca8089b71..cbbd83cb17 100644 --- a/content/show/descriptions/index.md +++ b/content/show/descriptions/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 57 +order: 58 category: 展示类 title: Descriptions 描述列表 icon: doc-descriptions diff --git a/content/show/dropdown/index-en-US.md b/content/show/dropdown/index-en-US.md index 978324f754..d0f00cdbbf 100644 --- a/content/show/dropdown/index-en-US.md +++ b/content/show/dropdown/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 58 +order: 59 category: Show title: Dropdown subTitle: Dropdown diff --git a/content/show/dropdown/index.md b/content/show/dropdown/index.md index c6c1997a67..e5bc2b564a 100644 --- a/content/show/dropdown/index.md +++ b/content/show/dropdown/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 58 +order: 59 category: 展示类 title: Dropdown 下拉框 icon: doc-dropdown diff --git a/content/show/empty/index-en-US.md b/content/show/empty/index-en-US.md index b43c7ddf9c..98235b3278 100644 --- a/content/show/empty/index-en-US.md +++ b/content/show/empty/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 59 +order: 60 category: Show title: Empty subTitle: Empty diff --git a/content/show/empty/index.md b/content/show/empty/index.md index 54e4cf1013..c0fe5a45fa 100644 --- a/content/show/empty/index.md +++ b/content/show/empty/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 59 +order: 60 category: 展示类 title: Empty 空状态 icon: doc-empty diff --git a/content/show/highlight/index-en-US.md b/content/show/highlight/index-en-US.md index 0ee1749480..940332cfac 100644 --- a/content/show/highlight/index-en-US.md +++ b/content/show/highlight/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 60 +order: 61 category: Show title: Highlight icon: doc-highlight diff --git a/content/show/highlight/index.md b/content/show/highlight/index.md index d7e2077abb..b8f27b5496 100644 --- a/content/show/highlight/index.md +++ b/content/show/highlight/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 60 +order: 61 category: 展示类 title: Highlight 高亮文本 icon: doc-highlight diff --git a/content/show/image/index-en-US.md b/content/show/image/index-en-US.md index ec865f4ff2..cbfb150368 100644 --- a/content/show/image/index-en-US.md +++ b/content/show/image/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 61 +order: 62 category: Show title: Image icon: doc-image diff --git a/content/show/image/index.md b/content/show/image/index.md index ba8e020a12..eeb3f1f4b2 100644 --- a/content/show/image/index.md +++ b/content/show/image/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 61 +order: 62 category: 展示类 title: Image 图片 icon: doc-image diff --git a/content/show/list/index-en-US.md b/content/show/list/index-en-US.md index 39c7b6d697..27162f9c9e 100644 --- a/content/show/list/index-en-US.md +++ b/content/show/list/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 62 +order: 63 category: Show title: List subTitle: List diff --git a/content/show/list/index.md b/content/show/list/index.md index 50ed4ffd74..c751efc237 100644 --- a/content/show/list/index.md +++ b/content/show/list/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 62 +order: 63 category: 展示类 title: List 列表 icon: doc-list diff --git a/content/show/modal/index-en-US.md b/content/show/modal/index-en-US.md index 587fdb247d..fe304ec863 100644 --- a/content/show/modal/index-en-US.md +++ b/content/show/modal/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 63 +order: 64 category: Show title: Modal subTitle: Modal diff --git a/content/show/modal/index.md b/content/show/modal/index.md index 14240f7a57..f2217c4a39 100644 --- a/content/show/modal/index.md +++ b/content/show/modal/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 63 +order: 64 category: 展示类 title: Modal 模态对话框 icon: doc-modal diff --git a/content/show/overflowlist/index-en-US.md b/content/show/overflowlist/index-en-US.md index 060809b88d..967e35550a 100644 --- a/content/show/overflowlist/index-en-US.md +++ b/content/show/overflowlist/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 64 +order: 65 category: Show title: OverflowList subTitle: OverflowList diff --git a/content/show/overflowlist/index.md b/content/show/overflowlist/index.md index 96ce3e8869..ea0696566f 100644 --- a/content/show/overflowlist/index.md +++ b/content/show/overflowlist/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 64 +order: 65 category: 展示类 title: OverflowList 折叠列表 icon: doc-overflowList diff --git a/content/show/popover/index-en-US.md b/content/show/popover/index-en-US.md index 2709b635c2..41fa7e32cd 100644 --- a/content/show/popover/index-en-US.md +++ b/content/show/popover/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 65 +order: 66 category: Show title: Popover subTitle: Popover diff --git a/content/show/popover/index.md b/content/show/popover/index.md index f247b06ba0..85839f98bf 100644 --- a/content/show/popover/index.md +++ b/content/show/popover/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 65 +order: 66 category: 展示类 title: Popover 气泡卡片 icon: doc-popover diff --git a/content/show/scrolllist/index-en-US.md b/content/show/scrolllist/index-en-US.md index 4561f03e88..0f8a25a1af 100644 --- a/content/show/scrolllist/index-en-US.md +++ b/content/show/scrolllist/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 66 +order: 67 category: Show title: ScrollList subTitle: ScrollList diff --git a/content/show/scrolllist/index.md b/content/show/scrolllist/index.md index 4cd4d474ac..ee60a27690 100644 --- a/content/show/scrolllist/index.md +++ b/content/show/scrolllist/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 66 +order: 67 category: 展示类 title: ScrollList 滚动列表 icon: doc-scrolllist diff --git a/content/show/sidesheet/index-en-US.md b/content/show/sidesheet/index-en-US.md index 4ca5e5cc27..fa24cdbd0e 100644 --- a/content/show/sidesheet/index-en-US.md +++ b/content/show/sidesheet/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 67 +order: 68 category: Show title: SideSheet subTitle: SideSheet diff --git a/content/show/sidesheet/index.md b/content/show/sidesheet/index.md index ff68aa82f7..64357ed4b0 100644 --- a/content/show/sidesheet/index.md +++ b/content/show/sidesheet/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 67 +order: 68 category: 展示类 title: SideSheet 滑动侧边栏 icon: doc-sidesheet diff --git a/content/show/table/index-en-US.md b/content/show/table/index-en-US.md index dc26565217..de18f7ac90 100644 --- a/content/show/table/index-en-US.md +++ b/content/show/table/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 68 +order: 69 category: Show title: Table subTitle: Table diff --git a/content/show/table/index.md b/content/show/table/index.md index a9a57202ff..3371c71f70 100644 --- a/content/show/table/index.md +++ b/content/show/table/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 68 +order: 69 category: 展示类 title: Table 表格 icon: doc-table diff --git a/content/show/tag/index-en-US.md b/content/show/tag/index-en-US.md index 8cc31515b6..e4598bc46c 100644 --- a/content/show/tag/index-en-US.md +++ b/content/show/tag/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 69 +order: 70 category: Show title: Tag subTitle: Tag diff --git a/content/show/tag/index.md b/content/show/tag/index.md index 6e937c62e2..bb67fd0ec2 100644 --- a/content/show/tag/index.md +++ b/content/show/tag/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 69 +order: 70 category: 展示类 title: Tag 标签 icon: doc-tag diff --git a/content/show/timeline/index-en-US.md b/content/show/timeline/index-en-US.md index ccbe1f782d..24ee66329d 100644 --- a/content/show/timeline/index-en-US.md +++ b/content/show/timeline/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 70 +order: 71 category: Show title: Timeline subTitle: Timeline diff --git a/content/show/timeline/index.md b/content/show/timeline/index.md index c07bd884b7..f0427f2867 100644 --- a/content/show/timeline/index.md +++ b/content/show/timeline/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 70 +order: 71 category: 展示类 title: Timeline 时间轴 icon: doc-timeline diff --git a/content/show/tooltip/index-en-US.md b/content/show/tooltip/index-en-US.md index e03d6527bb..5fb2f7bc80 100644 --- a/content/show/tooltip/index-en-US.md +++ b/content/show/tooltip/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 71 +order: 72 category: Show title: Tooltip subTitle: Tooltip diff --git a/content/show/tooltip/index.md b/content/show/tooltip/index.md index 0d5d14f336..14ced11b06 100644 --- a/content/show/tooltip/index.md +++ b/content/show/tooltip/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 71 +order: 72 category: 展示类 title: Tooltip 工具提示 icon: doc-tooltip diff --git a/content/start/changelog/index-en-US.md b/content/start/changelog/index-en-US.md index 7e18b4c0d9..fe47d1a5ca 100644 --- a/content/start/changelog/index-en-US.md +++ b/content/start/changelog/index-en-US.md @@ -16,6 +16,17 @@ Version：Major.Minor.Patch (follow the **Semver** specification) --- +#### 🎉 2.64.0-beta.0 (2024-08-05) +- 【Feat】 + - Events with exactly the same start and end times in Calendar day view are displayed side by side without covering each other + - Added the ColorPicker component, which allows users to quickly select colors and supports eyedropper screen color selection. +- 【Fix】 + - Fixed an issue where after the mouse wheel zoomed the picture, dragging the picture would reset to the center position after zooming again.[@l123wx](https://github.com/l123wx) [#2293](https://github.com/DouyinFE/semi-design/pull/2293) + - fix modal 'document not defined' in ssr. (Bug version 2.62.0~2.63.0) + - fixed DatePicker selected value is not reset after close panel [#2387](https://github.com/DouyinFE/semi-design/issues/2387) + - When the searchRender of the Tree is false, remove the excess height at the top + - Fixed the issue that onChange, onError, and onSuccess callbacks may still be triggered by asynchronous upload requests after the component is uninstalled + #### 🎉 2.63.0 (2024-07-26) - 【Fix】 - fix the issue that when TimePicker selects a later time first, the invalid time value will be caused when onChangeWithDateFirst is false [#2376](https://github.com/DouyinFE/semi-design/pull/2376) diff --git a/content/start/changelog/index.md b/content/start/changelog/index.md index 42d8f1d44f..1bcf32328c 100644 --- a/content/start/changelog/index.md +++ b/content/start/changelog/index.md @@ -13,6 +13,16 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本 - 修订版本号（patch）：仅会进行 bugfix，发布时间不限 - 不同版本间的详细关系，可查阅 [FAQ](/zh-CN/start/faq) +#### 🎉 2.64.0-beta.0 (2024-08-05) +- 【Feat】 + - Calendar 日视图中起止时间完全相同的事件支持并排显示，不互相遮盖 [#2393](https://github.com/DouyinFE/semi-design/pull/2393) + - 新增颜色选择器 ColorPicker 组件，用户快速选择颜色，支持滴管屏幕取色 +- 【Fix】 + - 修复鼠标滚轮缩放图片后，拖动了图片，再次缩放后会重置回中心位置的问题 [@l123wx](https://github.com/l123wx) [#2293](https://github.com/DouyinFE/semi-design/pull/2293) + - 修复 Modal 在 SSR 时 document 不存在的问题 （影响范围 2.62.0~2.63.0） [#2395](https://github.com/DouyinFE/semi-design/pull/2395) + - 修复 DatePicker 选中日期在关闭面板后未重置问题 [#2387](https://github.com/DouyinFE/semi-design/issues/2387) [#2388](https://github.com/DouyinFE/semi-design/pull/2388) + - 当 Tree 的 searchRender 为 false 时 ，去除顶部多余的高度. [#2386](https://github.com/DouyinFE/semi-design/pull/2386) + - 修复 Upload 在组件卸载后，仍然可能因为上传异步请求触发 onChange、onError、onSuccess回调的问题 [#2391](https://github.com/DouyinFE/semi-design/pull/2391) #### 🎉 2.63.0 (2024-07-26) - 【Fix】 diff --git a/lerna.json b/lerna.json index 94fdfc1ada..f5da8a4b79 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { "useWorkspaces": true, "npmClient": "yarn", - "version": "2.63.1" + "version": "2.64.0-beta.0" } \ No newline at end of file diff --git a/packages/semi-animation-react/package.json b/packages/semi-animation-react/package.json index e8f537d326..34c94c49b6 100644 --- a/packages/semi-animation-react/package.json +++ b/packages/semi-animation-react/package.json @@ -1,6 +1,6 @@ { "name": "@douyinfe/semi-animation-react", - "version": "2.63.1", + "version": "2.64.0-beta.0", "description": "motion library for semi-ui-react", "keywords": [ "motion", @@ -25,8 +25,8 @@ "prepublishOnly": "npm run build:lib" }, "dependencies": { - "@douyinfe/semi-animation": "2.63.1", - "@douyinfe/semi-animation-styled": "2.63.1", + "@douyinfe/semi-animation": "2.64.0-beta.0", + "@douyinfe/semi-animation-styled": "2.64.0-beta.0", "classnames": "^2.2.6" }, "devDependencies": { diff --git a/packages/semi-animation-styled/package.json b/packages/semi-animation-styled/package.json index 75e27e5bc3..ac65e980ec 100644 --- a/packages/semi-animation-styled/package.json +++ b/packages/semi-animation-styled/package.json @@ -1,6 +1,6 @@ { "name": "@douyinfe/semi-animation-styled", - "version": "2.63.1", + "version": "2.64.0-beta.0", "description": "semi styled animation", "keywords": [ "semi", diff --git a/packages/semi-animation/package.json b/packages/semi-animation/package.json index 3da79e8941..b9f188b1b1 100644 --- a/packages/semi-animation/package.json +++ b/packages/semi-animation/package.json @@ -1,6 +1,6 @@ { "name": "@douyinfe/semi-animation", - "version": "2.63.1", + "version": "2.64.0-beta.0", "description": "animation base library for semi-ui", "keywords": [ "animation", diff --git a/packages/semi-eslint-plugin/package.json b/packages/semi-eslint-plugin/package.json index a157f08f6a..8b8080f115 100644 --- a/packages/semi-eslint-plugin/package.json +++ b/packages/semi-eslint-plugin/package.json @@ -1,6 +1,6 @@ { "name": "eslint-plugin-semi-design", - "version": "2.63.1", + "version": "2.64.0-beta.0", "description": "semi ui eslint plugin", "keywords": [ "semi", diff --git a/packages/semi-foundation/calendar/foundation.ts b/packages/semi-foundation/calendar/foundation.ts index 490a3af0fa..eb258e42fe 100644 --- a/packages/semi-foundation/calendar/foundation.ts +++ b/packages/semi-foundation/calendar/foundation.ts @@ -248,7 +248,27 @@ export default class CalendarFoundation

, S = Record renderDailyEvent(item)); + // 将 startPos & endPos 完全相同的事件编为一组 + const sameTimeRangeGroup = parsed.day.reduce((acc, item) => { + const key = `${item.startPos}-${item.endPos}`; + if (!acc[key]) { + acc[key] = []; + } + acc[key].push(item); + return acc; + }, {}); + + // 计算每个 item 的 left 值， + const eventCountMap = {}; + parsed.day = parsed.day.map(item => { + const key = `${item.startPos}-${item.endPos}`; + let curCount = eventCountMap[key]; + eventCountMap[key] = curCount === undefined ? 0 : ++curCount; + item.left = curCount !== 0 ? `${(curCount / sameTimeRangeGroup[key].length * 100)}%` : 0; + return item; + }); return parsed; } diff --git a/packages/semi-foundation/colorPicker/AlphaSliderFoundation.ts b/packages/semi-foundation/colorPicker/AlphaSliderFoundation.ts new file mode 100644 index 0000000000..e7137752c6 --- /dev/null +++ b/packages/semi-foundation/colorPicker/AlphaSliderFoundation.ts @@ -0,0 +1,62 @@ +import BaseFoundation, { DefaultAdapter } from "../base/foundation"; +import ColorPickerFoundation, { ColorPickerAdapter, ColorPickerProps, ColorPickerState } from "./foundation"; +import { HsvaColor } from "./interface"; + +export interface AlphaSliderBaseProps { + width: number; + height: number; + hsva: HsvaColor; + handleSize: number; + foundation: ColorPickerFoundation +} + +export interface AlphaSliderBaseState { + handlePosition: number; + isHandleGrabbing: boolean +} + + +export interface AlphaSliderAdapter

, S = Record> extends DefaultAdapter { + handleMouseDown: (e: any) => void; + handleMouseUp: (e: any) => void; + getColorPickerFoundation: () => ColorPickerFoundation; + getDOM: () => HTMLDivElement +} + + +class AlphaSliderFoundation extends BaseFoundation, AlphaSliderBaseProps, AlphaSliderBaseState> { + + constructor(adapter: AlphaSliderAdapter) { + super({ + ...adapter + }); + } + + handleMouseDown = (e: any) => { + this._adapter.handleMouseDown(e); + } + + + handleMouseUp = (e: any) => { + this._adapter.handleMouseUp(e); + } + + + setHandlePositionByMousePosition = (e: MouseEvent) => { + const rect = this._adapter.getDOM()?.getBoundingClientRect(); + if (!rect) { + return; + } + const { width, handleSize } = this._adapter.getProps(); + const colorPickerFoundation = this._adapter.getColorPickerFoundation(); + const mousePosition = e.clientX - rect.x; + const handlePosition = colorPickerFoundation.getAlphaHandlePositionByMousePosition(mousePosition, width, handleSize); + colorPickerFoundation.handleAlphaChangeByHandle({ a: Number((Math.min(Math.max(mousePosition / width, 0), 1)).toFixed(2)) }); + this.setState({ handlePosition }); + } + + +} + + +export default AlphaSliderFoundation; \ No newline at end of file diff --git a/packages/semi-foundation/colorPicker/ColorChooseAreaFoundation.ts b/packages/semi-foundation/colorPicker/ColorChooseAreaFoundation.ts new file mode 100644 index 0000000000..db717a3594 --- /dev/null +++ b/packages/semi-foundation/colorPicker/ColorChooseAreaFoundation.ts @@ -0,0 +1,86 @@ +import BaseFoundation, { DefaultAdapter } from "../base/foundation"; +import ColorPickerFoundation from "./foundation"; +import { HsvaColor } from "./interface"; + + +export interface ColorChooseAreaBaseProps { + hsva: HsvaColor; + onChange: (newColor: { s: number; v: number }) => void; + handleSize: number; + width: number; + height: number; + foundation: ColorPickerFoundation +} + +export interface ColorChooseAreaBaseState { + handlePosition: { x: number; y: number }; + isHandleGrabbing: boolean +} + + +export interface ColorChooseAreaAdapter

, S = Record> extends DefaultAdapter { + getColorPickerFoundation: () => ColorPickerFoundation; + handleMouseDown: (e: any) => void; + handleMouseUp: (e: any) => void; + getDOM: () => HTMLDivElement; + notifyChange: (newColor: { s: number; v: number }) => void +} + + +class ColorChooseAreaFoundation extends BaseFoundation, ColorChooseAreaBaseProps, ColorChooseAreaBaseState> { + + constructor(adapter: ColorChooseAreaAdapter) { + super({ + ...adapter + }); + } + + getHandlePositionByHSVA = () => { + const { hsva, width, height, handleSize } = this.getProps(); + + return this._adapter.getColorPickerFoundation().getHandlePositionByHSVA(hsva, { + width: width, + height: height + }, handleSize); + + } + + handleMouseDown = (e: any) => { + this._adapter.handleMouseDown(e); + } + + handleMouseUp = (e: any) => { + this._adapter.handleMouseUp(e); + } + + + setHandlePositionByMousePosition = (e: globalThis.MouseEvent) => { + const rect = this._adapter.getDOM()?.getBoundingClientRect(); + if (!rect) { + return; + } + const mousePosition = { + x: e.clientX - rect.x, + y: e.clientY - rect.y + }; + const { width, height, handleSize } = this.getProps(); + const colorPickerFoundation = this._adapter.getColorPickerFoundation(); + const handlePosition = colorPickerFoundation.getHandlePositionByMousePosition(mousePosition, { + width, + height + }, handleSize); + if (handlePosition) { + this.setState({ handlePosition }); + this._adapter.notifyChange({ + s: Math.round(mousePosition.x / width * 100), + v: Math.round(100 - (Math.min(Math.max(mousePosition.y / height, 0), 1)) * 100), + }); + } + + } + + +} + + +export default ColorChooseAreaFoundation; diff --git a/packages/semi-foundation/colorPicker/ColorSliderFoundation.ts b/packages/semi-foundation/colorPicker/ColorSliderFoundation.ts new file mode 100644 index 0000000000..ca3b6f40fc --- /dev/null +++ b/packages/semi-foundation/colorPicker/ColorSliderFoundation.ts @@ -0,0 +1,61 @@ +import BaseFoundation, { DefaultAdapter } from "../base/foundation"; +import ColorPickerFoundation from "./foundation"; + +export interface ColorSliderBaseProps { + width: number; + height: number; + hue: number; + handleSize: number; + foundation: ColorPickerFoundation +} + +export interface ColorSliderBaseState { + handlePosition: number; + isHandleGrabbing: boolean +} + + +export interface ColorSliderAdapter

, S = Record> extends DefaultAdapter { + handleMouseDown: (e: any) => void; + handleMouseUp: (e: any) => void; + getColorPickerFoundation: () => ColorPickerFoundation; + getDOM: () => HTMLDivElement +} + + +class ColorSliderFoundation extends BaseFoundation, ColorSliderBaseProps, ColorSliderBaseState> { + + constructor(adapter: ColorSliderAdapter) { + super({ + ...adapter + }); + } + + handleMouseDown = (e: any) => { + this._adapter.handleMouseDown(e); + } + + + handleMouseUp = (e: any) => { + this._adapter.handleMouseUp(e); + } + + + setHandlePositionByMousePosition = (e: MouseEvent) => { + const rect = this._adapter.getDOM()?.getBoundingClientRect(); + if (!rect) { + return; + } + const { width, handleSize } = this._adapter.getProps(); + const colorPickerFoundation = this._adapter.getColorPickerFoundation(); + const mousePosition = e.clientX - rect.x; + colorPickerFoundation.handleColorChangeByHandle({ h: Math.round(Math.min(Math.max(mousePosition / width, 0), 1) * 360) }); + const handlePosition = colorPickerFoundation.getColorHandlePositionByMousePosition(mousePosition, width, handleSize); + this.setState({ handlePosition }); + } + + +} + + +export default ColorSliderFoundation; \ No newline at end of file diff --git a/packages/semi-foundation/colorPicker/DataPartFoundation.ts b/packages/semi-foundation/colorPicker/DataPartFoundation.ts new file mode 100644 index 0000000000..5aaa622b1c --- /dev/null +++ b/packages/semi-foundation/colorPicker/DataPartFoundation.ts @@ -0,0 +1,113 @@ +import BaseFoundation, { DefaultAdapter } from "../base/foundation"; +import ColorPickerFoundation, { ColorPickerProps } from "./foundation"; +import split from "./utils/split"; +import { HsvaColor, RgbaColor } from "./interface"; + + +type Value = ColorPickerProps['value'] + +export interface DataPartBaseProps { + currentColor: Value; + defaultFormat: 'hex' | 'rgba' | 'hsva'; + width: number; + alpha?: boolean; + foundation: ColorPickerFoundation; + eyeDropper: boolean +} + +export interface DataPartBaseState { + format: 'hex' | 'rgba' | 'hsva'; + inputValue: string +} + + +export interface DataPartAdapter

, S = Record> extends DefaultAdapter { + getColorPickerFoundation: () => ColorPickerFoundation +} + + +class DataPartFoundation extends BaseFoundation, DataPartBaseProps, DataPartBaseState> { + + constructor(adapter: DataPartAdapter) { + super({ + ...adapter + }); + } + + getInputValue = () => { + const { currentColor } = this._adapter.getProps(); + const { format } = this._adapter.getStates(); + const rgba = currentColor.rgba; + const hsva = currentColor.hsva; + const hex = currentColor.hex; + if (format === 'rgba') { + return `${rgba.r},${rgba.g},${rgba.b}`; + } else if (format === 'hsva') { + return `${hsva.h},${hsva.s},${hsva.v}`; + } else { + return hex.slice(0, 7); + } + } + + getValueByInputValue = (value: string) => { + const { format } = this.getStates(); + if (format === 'rgba') { + const result = split(value, format); + if (result) { + return result as RgbaColor; + } + + } else if (format === 'hsva') { + const result = split(value, format); + if (result) { + return result as HsvaColor; + } + } else if (format === 'hex') { + // hack chrome bug, format mismatch with w3c. + if (!value.startsWith('#')) { + value = '#' + value; + } + if (/#[\d\w]{6,8}/.test(value)) { + return value; + } + } + return false; + } + + handlePickValueWithStraw = async () => { + const colorPickerFoundation = this._adapter.getColorPickerFoundation(); + if (!window['EyeDropper']) { + return; + } + //@ts-ignore + const eyeDropper = new EyeDropper(); + + try { + const result = await eyeDropper.open(); + const color = result['sRGBHex']; + if (color.startsWith("#")) { + colorPickerFoundation.handleChange(color, 'hex'); + } else if (color.startsWith('rgba')) { + const rgba = ColorPickerFoundation.rgbaStringToRgba(color); + rgba.a = 1; + colorPickerFoundation.handleChange(rgba, 'rgba'); + } + } catch (e) { + + } + } + + + handleInputValueChange = (value: string) => { + this._adapter.setState({ inputValue: value }); + } + + handleFormatChange = (format: DataPartBaseState['format']) => { + this._adapter.setState({ format }); + } + + +} + + +export default DataPartFoundation; diff --git a/packages/semi-foundation/colorPicker/colorPicker.scss b/packages/semi-foundation/colorPicker/colorPicker.scss new file mode 100644 index 0000000000..7aa9d24e7b --- /dev/null +++ b/packages/semi-foundation/colorPicker/colorPicker.scss @@ -0,0 +1,113 @@ +@import "./variables.scss"; + + +$module: #{$prefix}-colorPicker; + + +.#{$module} { + + &-colorChooseArea{ + + /** + * Referrer from https://github.com/web-padawan/vanilla-colorful/blob/5d219ee360ae2f29534864b28ca9e6074233b9ce/src/lib/styles/saturation.css + */ + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); + position: relative; + flex-grow: 1; + border-color: transparent; + border-radius: $radius-colorPicker-topLeft $radius-colorPicker-topRight $radius-colorPicker-bottomLeft $radius-colorPicker-bottomRight; + background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + } + + + &-handle{ + border-radius: $radius-colorPicker-handle; + border: $width-colorPicker_handle-border solid $color-colorPicker_handle-border; + position: absolute; + box-sizing: border-box; + cursor: grab; + } + + + + + &-alphaSlider{ + position: relative; + cursor: pointer; + margin-top: $spacing-colorPicker_slider-marginTop; + border-radius: $radius-colorPicker-handle; + background: url('data:image/svg+xml,'); + + + .#{$module}-alphaSliderInner{ + width: 100%; + height: 100%; + border-radius: $radius-colorPicker-alphaSliderInner; + } + + .#{$module}-alphaHandle{ + background: url('data:image/svg+xml,'); + border-radius: $radius-colorPicker-handle; + border: $width-colorPicker_handle-border solid $color-colorPicker_handle-border; + position: absolute; + box-sizing: border-box; + cursor: grab; + + } + + } + + &-colorSlider{ + position: relative; + cursor: pointer; + margin-top: $spacing-colorPicker_slider-marginTop; + border-radius: $radius-colorPicker-handle; + background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); + } + + + + &-dataPart{ + margin-top: $spacing-colorPicker_dataPart-marginTop; + display: flex; + align-items: center; + .#{$module}-colorDemoBlock{ + border-radius: $radius-colorPicker-demoBlock; + } + .#{$module}-inputGroup{ + margin-left: $spacing-colorPicker_inputGroup-marginLeft; + width: 100%; + flex:1; + flex-wrap: nowrap; + .#{$module}-colorPickerInput{ + flex: 1; + } + .#{$module}-colorPickerInputNumber{ + width: $width-colorPicker-colorPickerInputNumber; + .#{$module}-inputNumberSuffix{ + font-size: $font-colorPicker_inputNumberSuffix-fontSize; + padding: $spacing-colorPicker_inputNumberSuffix-vertical $spacing-colorPicker_inputNumberSuffix-horizontal; + } + } + } + .#{$module}-formatSelect{ + width: $width-colorPicker-formatSelect; + } + } + + + &-popover{ + padding: $spacing-colorPicker_popover-padding; + + &-defaultChildren{ + width:$width-colorPicker-defaultTrigger; + height: $width-colorPicker-defaultTrigger; + border-radius: $radius-colorPicker-defaultTrigger; + cursor: pointer; + } + + } + + + +} diff --git a/packages/semi-foundation/colorPicker/constants.ts b/packages/semi-foundation/colorPicker/constants.ts new file mode 100644 index 0000000000..70b58629ee --- /dev/null +++ b/packages/semi-foundation/colorPicker/constants.ts @@ -0,0 +1,11 @@ +import { BASE_CLASS_PREFIX } from '../base/constants'; + +const cssClasses = { + PREFIX: `${BASE_CLASS_PREFIX}-colorPicker`, +}; + +const strings = { + +}; + +export { cssClasses }; diff --git a/packages/semi-foundation/colorPicker/foundation.ts b/packages/semi-foundation/colorPicker/foundation.ts new file mode 100644 index 0000000000..6c70d55f4b --- /dev/null +++ b/packages/semi-foundation/colorPicker/foundation.ts @@ -0,0 +1,206 @@ +import { HsvaColor, RgbaColor } from './interface'; +import BaseFoundation, { DefaultAdapter } from '../base/foundation'; +import { + hexToHsva, + hexToRgba, + hsvaToHex, + hsvaToHslaString, + hsvaToHslString, + hsvaToRgba, rgbaStringToHsva, rgbaStringToRgba, + rgbaToHex, + rgbaToHsva, +} from './utils/convert'; + + +export type ColorValue = { + hsva: HsvaColor; + rgba: RgbaColor; + hex: string +} +export interface ColorPickerProps { + eyeDropper?: boolean; + defaultValue?: ColorValue; + value?: ColorValue; + onChange: (value: ColorValue) => void; + alpha: boolean; + width?: number; + height?: number; + defaultFormat: 'hex' | 'rgba' | 'hsva' +} + +export interface ColorPickerState { + currentColor: ColorValue +} + + +export interface ColorPickerAdapter

, S = Record> extends DefaultAdapter { + notifyChange: (value: ColorValue) => void +} + + +class ColorPickerFoundation extends BaseFoundation, ColorPickerProps, ColorPickerState> { + + constructor(adapter: ColorPickerAdapter) { + super({ + ...adapter + }); + } + + static hsvaToRgba = hsvaToRgba + static rgbaToHsva = rgbaToHsva + static rgbaToHex = rgbaToHex + static hsvaToHex = hsvaToHex + static hexToRgba = hexToRgba + static hexToHsva = hexToHsva + static hsvaToHslaString = hsvaToHslaString + static hsvaToHslString = hsvaToHslString + static rgbaStringToHsva = rgbaStringToHsva + static rgbaStringToRgba = rgbaStringToRgba + + + handleChangeH = (currentColor: ColorValue, newH: number) => { + + const hsva = { + ...currentColor.hsva, + h: newH + }; + const rgba = hsvaToRgba(hsva); + const hex = hsvaToHex(hsva); + + const newCurrentColor = { + rgba, + hsva, + hex + }; + + this._adapter.notifyChange(newCurrentColor); + if (!this.getProp("value")) { + this._adapter.setState({ currentColor: newCurrentColor }); + } + + } + + + handleChangeA = (currentColor: ColorValue, newAlpha: number) => { + let alpha = this._adapter.getProp('alpha'); + if (!alpha) { + newAlpha = 1; + } + const rgba = { + ...currentColor.rgba, + a: newAlpha + }; + const hex = rgbaToHex(rgba); + currentColor = { + rgba, + hex: alpha ? hex : hex.slice(0, 7), + hsva: { + ...currentColor.hsva, + a: newAlpha + } + }; + this._adapter.notifyChange(currentColor); + if (!this.getProp("value")) { + this._adapter.setState({ currentColor: currentColor }); + } + + } + + getCurrentColor = ()=>{ + + const value = this.getProp("value"); + const currentColor = this.getState("currentColor"); + return value || currentColor; + } + + handleChange = (color: HsvaColor|RgbaColor|string, format: 'hex'|'rgba'|'hsva')=>{ + let currentColor; + + if (format === 'hsva') { + currentColor = { + hsva: color as HsvaColor, + rgba: ColorPickerFoundation.hsvaToRgba(color as HsvaColor), + hex: ColorPickerFoundation.hsvaToHex(color as HsvaColor) + }; + } else if (format === 'rgba') { + currentColor = { + rgba: color as RgbaColor, + hsva: ColorPickerFoundation.rgbaToHsva(color as RgbaColor), + hex: ColorPickerFoundation.rgbaToHex(color as RgbaColor) + }; + } else if (format === 'hex') { + currentColor = { + hex: color as string, + hsva: ColorPickerFoundation.hexToHsva(color as string), + rgba: ColorPickerFoundation.hexToRgba(color as string) + }; + } else { + throw new Error('format error'); + } + + this._adapter.notifyChange(currentColor); + if (!this.getProp("value")) { + this._adapter.setState({ currentColor: currentColor }); + } + + } + + + handleAlphaChangeByHandle = (newAlpha: {a: number})=>{ + this.handleChangeA(this.getCurrentColor(), newAlpha.a); + } + + handleColorChangeByHandle = (newHue: {h: number})=>{ + this.handleChangeH(this.getCurrentColor(), newHue.h); + } + + + getHandlePositionByHSVA = (hsva: HsvaColor, { width, height }: {width: number;height: number}, handleSize: number)=>{ + + const defaultColorPosition = { x: hsva.s / 100 * width, y: (1 - hsva.v / 100) * height }; + return { x: defaultColorPosition.x - handleSize / 2, y: defaultColorPosition.y - handleSize / 2 }; + } + + getHandlePositionByMousePosition = (mousePosition: {x: number;y: number}, { width, height }: {width: number;height: number}, handleSize: number)=>{ + if (mousePosition.x > width || mousePosition.x < 0) { + return null; + } + + if (mousePosition.y > height || mousePosition.y < 0) { + return null; + } + + const handlePosition = { + x: mousePosition.x - handleSize / 2, + y: mousePosition.y - handleSize / 2 + }; + + return handlePosition; + } + + + getAlphaHandlePositionByMousePosition = (mousePosition: number, width: number, handleSize: number)=>{ + if (mousePosition < 0 || mousePosition > width) { + return null; + } + return mousePosition - handleSize / 2; + } + + getColorHandlePositionByMousePosition = (mousePosition: number, width: number, handleSize: number)=>{ + if (mousePosition < 0 || mousePosition > width) { + return null; + } + + return mousePosition - handleSize / 2; + } + + + + + + + +} + +export default ColorPickerFoundation; + diff --git a/packages/semi-foundation/colorPicker/interface.ts b/packages/semi-foundation/colorPicker/interface.ts new file mode 100644 index 0000000000..4b47ab13bf --- /dev/null +++ b/packages/semi-foundation/colorPicker/interface.ts @@ -0,0 +1,51 @@ +export interface HsvColor { + h: number; + s: number; + v: number +} + +export interface HsvaColor extends HsvColor { + a: number +} + + +export interface RgbColor { + r: number; + g: number; + b: number +} + +export interface RgbaColor extends RgbColor { + a: number +} + +export interface HslColor { + h: number; + s: number; + l: number +} + +export interface HslaColor extends HslColor { + a: number +} + +export interface HsvColor { + h: number; + s: number; + v: number +} + +export interface HsvaColor extends HsvColor { + a: number +} + +export type ObjectColor = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor; + +export type AnyColor = string | ObjectColor; + +export interface ColorModel { + defaultColor: T; + toHsva: (defaultColor: T) => HsvaColor; + fromHsva: (hsva: HsvaColor) => T; + equal: (first: T, second: T) => boolean +} diff --git a/packages/semi-foundation/colorPicker/utils/convert.ts b/packages/semi-foundation/colorPicker/utils/convert.ts new file mode 100644 index 0000000000..347995044c --- /dev/null +++ b/packages/semi-foundation/colorPicker/utils/convert.ts @@ -0,0 +1,228 @@ +import { round } from "./round"; +import { RgbaColor, RgbColor, HslaColor, HslColor, HsvaColor, HsvColor } from "../interface"; +/** + * Valid CSS units. + * https://developer.mozilla.org/en-US/docs/Web/CSS/angle + */ + +/** + * Referrer from https://github.com/web-padawan/vanilla-colorful/blob/master/src/lib/utils/convert.ts + */ +const angleUnits: Record = { + grad: 360 / 400, + turn: 360, + rad: 360 / (Math.PI * 2), +}; + +export const hexToHsva = (hex: string): HsvaColor => rgbaToHsva(hexToRgba(hex)); + +export const hexToRgba = (hex: string): RgbaColor => { + if (hex[0] === "#") hex = hex.substring(1); + + const hexToPercent = (str: string) => { + const decimal = parseInt(str, 16); + if (!isNaN(decimal)) { + const percent = decimal / 255; + return percent; + } + return 1; + }; + + + return { + r: parseInt(hex.substring(0, 2), 16), + g: parseInt(hex.substring(2, 4), 16), + b: parseInt(hex.substring(4, 6), 16), + a: hexToPercent(hex.substring(6, 8)), + }; +}; + +export const parseHue = (value: string, unit = "deg"): number => { + return Number(value) * (angleUnits[unit] || 1); +}; + +export const hslaStringToHsva = (hslString: string): HsvaColor => { + const matcher = /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i; + const match = matcher.exec(hslString); + + if (!match) return { h: 0, s: 0, v: 0, a: 1 }; + + return hslaToHsva({ + h: parseHue(match[1], match[2]), + s: Number(match[3]), + l: Number(match[4]), + a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1), + }); +}; + +export const hslStringToHsva = hslaStringToHsva; + +export const hslaToHsva = ({ h, s, l, a }: HslaColor): HsvaColor => { + s *= (l < 50 ? l : 100 - l) / 100; + + return { + h: h, + s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0, + v: l + s, + a, + }; +}; + +export const hsvaToHex = (hsva: HsvaColor): string => rgbaToHex(hsvaToRgba(hsva)); + +export const hsvaToHsla = ({ h, s, v, a }: HsvaColor): HslaColor => { + const hh = ((200 - s) * v) / 100; + + return { + h: round(h), + s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0), + l: round(hh / 2), + a: round(a, 2), + }; +}; + +export const hsvaToHslString = (hsva: HsvaColor): string => { + const { h, s, l } = hsvaToHsla(hsva); + return `hsl(${h}, ${s}%, ${l}%)`; +}; + +export const hsvaToHsvString = (hsva: HsvaColor): string => { + const { h, s, v } = roundHsva(hsva); + return `hsv(${h}, ${s}%, ${v}%)`; +}; + +export const hsvaToHsvaString = (hsva: HsvaColor): string => { + const { h, s, v, a } = roundHsva(hsva); + return `hsva(${h}, ${s}%, ${v}%, ${a})`; +}; + +export const hsvaToHslaString = (hsva: HsvaColor): string => { + const { h, s, l, a } = hsvaToHsla(hsva); + return `hsla(${h}, ${s}%, ${l}%, ${a})`; +}; + +export const hsvaToRgba = ({ h, s, v, a }: HsvaColor): RgbaColor => { + + + h = (h / 360) * 6; + s = s / 100; + v = v / 100; + + const hh = Math.floor(h), + b = v * (1 - s), + c = v * (1 - (h - hh) * s), + d = v * (1 - (1 - h + hh) * s), + module = hh % 6; + + return { + r: round([v, c, b, b, d, v][module] * 255), + g: round([d, v, v, c, b, b][module] * 255), + b: round([b, b, d, v, v, c][module] * 255), + a: round(a, 2), + }; +}; + +export const hsvaToRgbString = (hsva: HsvaColor): string => { + const { r, g, b } = hsvaToRgba(hsva); + return `rgb(${r}, ${g}, ${b})`; +}; + +export const hsvaToRgbaString = (hsva: HsvaColor): string => { + const { r, g, b, a } = hsvaToRgba(hsva); + return `rgba(${r}, ${g}, ${b}, ${a})`; +}; + +export const hsvaStringToHsva = (hsvString: string): HsvaColor => { + const matcher = /hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i; + const match = matcher.exec(hsvString); + + if (!match) return { h: 0, s: 0, v: 0, a: 1 }; + + return roundHsva({ + h: parseHue(match[1], match[2]), + s: Number(match[3]), + v: Number(match[4]), + a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1), + }); +}; + +export const hsvStringToHsva = hsvaStringToHsva; + +export const rgbaStringToHsva = (rgbaString: string): HsvaColor => { + return rgbaToHsva(rgbaStringToRgba(rgbaString)); +}; + +export const rgbaStringToRgba = (rgbaString: string): RgbaColor => { + const matcher = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i; + const match = matcher.exec(rgbaString); + + if (!match) return { r: 0, g: 0, b: 0, a: 1 }; + + return { + r: Number(match[1]) / (match[2] ? 100 / 255 : 1), + g: Number(match[3]) / (match[4] ? 100 / 255 : 1), + b: Number(match[5]) / (match[6] ? 100 / 255 : 1), + a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1), + }; +}; +export const rgbStringToRgba = rgbaStringToRgba; + +export const rgbStringToHsva = rgbaStringToHsva; + +const format = (number: number) => { + const hex = number.toString(16); + return hex.length < 2 ? "0" + hex : hex; +}; + +export const rgbaToHex = ({ r, g, b, a }: RgbaColor): string => { + const percentToHex = (p) => { + //const percent = Math.max(0, Math.min(100, p)); // bound percent from 0 to 100 + const intValue = Math.round(p / 100 * 255); // map percent to nearest integer (0 - 255) + const hexValue = intValue.toString(16); // get hexadecimal representation + return hexValue.padStart(2, '0').toLowerCase(); // format with leading 0 and upper case characters + }; + if (a === undefined || a === 1) { + return "#" + format(r) + format(g) + format(b); + } else { + return "#" + format(r) + format(g) + format(b) + percentToHex(a * 100); + } + +}; + +export const rgbaToHsva = ({ r, g, b, a }: RgbaColor): HsvaColor => { + + const max = Math.max(r, g, b); + const delta = max - Math.min(r, g, b); + + // prettier-ignore + const hh = delta + ? max === r + ? (g - b) / delta + : max === g + ? 2 + (b - r) / delta + : 4 + (r - g) / delta + : 0; + + return { + h: round(60 * (hh < 0 ? hh + 6 : hh)), + s: round(max ? (delta / max) * 100 : 0), + v: round((max / 255) * 100), + a, + }; +}; + +export const roundHsva = (hsva: HsvaColor): HsvaColor => ({ + h: round(hsva.h), + s: round(hsva.s), + v: round(hsva.v), + a: round(hsva.a, 2), +}); + +export const rgbaToRgb = ({ r, g, b }: RgbaColor): RgbColor => ({ r, g, b }); + +export const hslaToHsl = ({ h, s, l }: HslaColor): HslColor => ({ h, s, l }); + +export const hsvaToHsv = (hsva: HsvaColor): HsvColor => { + const { h, s, v } = roundHsva(hsva); + return { h, s, v }; +}; diff --git a/packages/semi-foundation/colorPicker/utils/round.ts b/packages/semi-foundation/colorPicker/utils/round.ts new file mode 100644 index 0000000000..90c971a060 --- /dev/null +++ b/packages/semi-foundation/colorPicker/utils/round.ts @@ -0,0 +1,3 @@ +export const round = (number: number, digits = 0, base = Math.pow(10, digits)): number => { + return Math.round(base * number) / base; +}; diff --git a/packages/semi-foundation/colorPicker/utils/split.ts b/packages/semi-foundation/colorPicker/utils/split.ts new file mode 100644 index 0000000000..5702b24f17 --- /dev/null +++ b/packages/semi-foundation/colorPicker/utils/split.ts @@ -0,0 +1,40 @@ +const split = (str: string, mode: 'rgba' | 'hsva') => { + // 12,32,43 => [12,32,43] + const reg = /^\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,?\s*([\d.]*)\s*$/; + const res = str.match(reg); + const result: number[] = []; + result[0] = Number(res?.[1]); + result[1] = Number(res?.[2]); + result[2] = Number(res?.[3]); + result[3] = Number((res?.[4] === undefined || res?.[4] === '') ? 1 : res?.[4]); + + const check = (a: number, max: number) => { + return !(isNaN(a) || a < 0 || a > max); + }; + + const ok = check(result[0], mode === 'rgba' ? 255 : 360) + && check(result[1], mode === 'rgba' ? 255 : 100) + && check(result[2], mode === 'rgba' ? 255 : 100) + && check(result[3], 1); + if (ok) { + if (mode === 'rgba') { + return { + r: result[0], + g: result[1], + b: result[2], + a: result[3] + }; + } else { + return { + h: result[0], + s: result[1], + v: result[2], + a: result[3] + }; + } + } else { + return false; + } +}; + +export default split; diff --git a/packages/semi-foundation/colorPicker/variables.scss b/packages/semi-foundation/colorPicker/variables.scss new file mode 100644 index 0000000000..3bcae5a505 --- /dev/null +++ b/packages/semi-foundation/colorPicker/variables.scss @@ -0,0 +1,28 @@ +$radius-colorPicker-topLeft:8px; // 圆角 - 左上 +$radius-colorPicker-topRight:8px; // 圆角 - 右上 +$radius-colorPicker-bottomLeft:0px; // 圆角 - 左下 +$radius-colorPicker-bottomRight:0px; // 圆角 - 右下 +$radius-colorPicker-handle:var(--semi-border-radius-full); // 圆角 - 拖拽把手 +$radius-colorPicker-alphaSliderInner:4px; // 圆角 - 透明度 Slider +$radius-colorPicker-demoBlock: 4px; // 圆角 - 颜色手动输入区域左侧当前选中颜色色块 +$radius-colorPicker-defaultTrigger:4px; // 默认 trigger 圆角 + + +$width-colorPicker_handle-border: 2px; // 把手宽度 +$width-colorPicker-colorPickerInputNumber:58px; // 数组输入器宽度 +$width-colorPicker-formatSelect:80px; // 格式选择下拉 Select 宽度 +$width-colorPicker-defaultTrigger: 24px; // 默认 trigger 大小 + +$color-colorPicker_handle-border:var(--semi-color-white); // 把手边框颜色 + + +$spacing-colorPicker_inputNumberSuffix-horizontal:4px; // 数字输入框后百分比水平距离 +$spacing-colorPicker_inputGroup-marginLeft:4px; // 颜色手动输入区域 左侧距离色块距离 +$spacing-colorPicker_popover-padding:8px; // 弹层模式时整体内边距 +$spacing-colorPicker_inputNumberSuffix-vertical:4px; // 数字输入框后百分比垂直距离 +$spacing-colorPicker_slider-marginTop:6px; // 滑动选择器上边距 +$spacing-colorPicker_dataPart-marginTop:8px; // 颜色手动输入区域 上边距 + + +$font-colorPicker_inputNumberSuffix-fontSize:14px; // 颜色手动输入区域百分比字体大小 + diff --git a/packages/semi-foundation/package.json b/packages/semi-foundation/package.json index 72a7d6df1e..b5c659ce51 100644 --- a/packages/semi-foundation/package.json +++ b/packages/semi-foundation/package.json @@ -1,13 +1,13 @@ { "name": "@douyinfe/semi-foundation", - "version": "2.63.1", + "version": "2.64.0-beta.0", "description": "", "scripts": { "build:lib": "node ./scripts/compileLib.js", "prepublishOnly": "npm run build:lib" }, "dependencies": { - "@douyinfe/semi-animation": "2.63.1", + "@douyinfe/semi-animation": "2.64.0-beta.0", "@mdx-js/mdx": "^3.0.1", "async-validator": "^3.5.0", "classnames": "^2.2.6", diff --git a/packages/semi-foundation/tooltip/foundation.ts b/packages/semi-foundation/tooltip/foundation.ts index 5300c19fcc..eb4e14a946 100644 --- a/packages/semi-foundation/tooltip/foundation.ts +++ b/packages/semi-foundation/tooltip/foundation.ts @@ -337,7 +337,7 @@ export default class Tooltip

, S = Record> e if (trigger==="hover") { const checkTriggerIsHover = () => { const triggerDOM = this._adapter.getTriggerDOM(); - if (trigger && !triggerDOM.matches(":hover")) { + if (trigger && !triggerDOM?.matches?.(":hover")) { this.hide(); } this._adapter.off("portalInserted", checkTriggerIsHover); diff --git a/packages/semi-foundation/upload/foundation.ts b/packages/semi-foundation/upload/foundation.ts index 560c19e0f5..2b442c972b 100644 --- a/packages/semi-foundation/upload/foundation.ts +++ b/packages/semi-foundation/upload/foundation.ts @@ -94,6 +94,7 @@ export interface UploadAdapter

, S = Record> } class UploadFoundation

, S = Record> extends BaseFoundation, P, S> { + destroyState: boolean = false; constructor(adapter: UploadAdapter) { super({ ...adapter }); } @@ -111,6 +112,7 @@ class UploadFoundation

, S = Record> extends if (!disabled) { this.unbindPastingHandler(); } + this.destroyState = true; } getError({ action, xhr, message, fileName }: { action: string;xhr: XMLHttpRequest;message?: string;fileName: string }): XhrError { @@ -569,13 +571,27 @@ class UploadFoundation

, S = Record> extends } if (xhr.upload) { - xhr.upload.onprogress = (e: ProgressEvent): void => this.handleProgress({ e, fileInstance }); + xhr.upload.onprogress = (e: ProgressEvent): void => { + if (!this.destroyState) { + this.handleProgress({ e, fileInstance }); + } else { + xhr.abort(); + } + }; } // Callback function after upload is completed - xhr.onload = (e: ProgressEvent): void => this.handleOnLoad({ e, xhr, fileInstance }); + xhr.onload = (e: ProgressEvent): void => { + if (!this.destroyState) { + this.handleOnLoad({ e, xhr, fileInstance }); + } + }; - xhr.onerror = (e: ProgressEvent): void => this.handleError({ e, xhr, fileInstance }); + xhr.onerror = (e: ProgressEvent): void => { + if (!this.destroyState) { + this.handleError({ e, xhr, fileInstance }); + } + }; // add headers let headers = option.headers || {}; diff --git a/packages/semi-icons-lab/package.json b/packages/semi-icons-lab/package.json index 759127b833..da6efcae1a 100644 --- a/packages/semi-icons-lab/package.json +++ b/packages/semi-icons-lab/package.json @@ -1,6 +1,6 @@ { "name": "@douyinfe/semi-icons-lab", - "version": "2.63.1", + "version": "2.64.0-beta.0", "description": "semi icons lab", "keywords": [ "semi", diff --git a/packages/semi-icons-lab/src/svgs/anchor.svg b/packages/semi-icons-lab/src/svgs/anchor.svg index 3f9a5358d7..0928da69f2 100644 --- a/packages/semi-icons-lab/src/svgs/anchor.svg +++ b/packages/semi-icons-lab/src/svgs/anchor.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/packages/semi-icons/package.json b/packages/semi-icons/package.json index 9831f3f32b..45ee580227 100644 --- a/packages/semi-icons/package.json +++ b/packages/semi-icons/package.json @@ -1,6 +1,6 @@ { "name": "@douyinfe/semi-icons", - "version": "2.63.1", + "version": "2.64.0-beta.0", "description": "semi icons", "keywords": [ "semi", diff --git a/packages/semi-icons/src/icons/IconEyedropper.tsx b/packages/semi-icons/src/icons/IconEyedropper.tsx new file mode 100644 index 0000000000..dc662d074f --- /dev/null +++ b/packages/semi-icons/src/icons/IconEyedropper.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import { convertIcon } from '../components/Icon'; +function SvgComponent(props: React.SVGProps) { + return ( + + + + ); +} +const IconComponent = convertIcon(SvgComponent, 'eyedropper'); +export default IconComponent; diff --git a/packages/semi-icons/src/icons/IconStorysStroked.tsx b/packages/semi-icons/src/icons/IconStorysStroked.tsx new file mode 100644 index 0000000000..77a891b84d --- /dev/null +++ b/packages/semi-icons/src/icons/IconStorysStroked.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import { convertIcon } from '../components/Icon'; +function SvgComponent(props: React.SVGProps) { + return ( + + + + ); +} +const IconComponent = convertIcon(SvgComponent, 'storys_stroked'); +export default IconComponent; diff --git a/packages/semi-icons/src/icons/index.ts b/packages/semi-icons/src/icons/index.ts index d059613083..d31d779bf5 100644 --- a/packages/semi-icons/src/icons/index.ts +++ b/packages/semi-icons/src/icons/index.ts @@ -144,6 +144,7 @@ export { default as IconExternalOpen } from './IconExternalOpen'; export { default as IconExternalOpenStroked } from './IconExternalOpenStroked'; export { default as IconEyeClosed } from './IconEyeClosed'; export { default as IconEyeClosedSolid } from './IconEyeClosedSolid'; +export { default as IconEyedropper } from "./IconEyedropper"; export { default as IconEyeOpened } from './IconEyeOpened'; export { default as IconFacebook } from './IconFacebook'; export { default as IconFaceuLogo } from './IconFaceuLogo'; @@ -441,4 +442,4 @@ export { default as IconWifi } from './IconWifi'; export { default as IconWindowAdaptionStroked } from './IconWindowAdaptionStroked'; export { default as IconWrench } from './IconWrench'; export { default as IconXiguaLogo } from './IconXiguaLogo'; -export { default as IconYoutube } from './IconYoutube'; \ No newline at end of file +export { default as IconYoutube } from './IconYoutube'; diff --git a/packages/semi-icons/src/svgs/eye_opened.svg b/packages/semi-icons/src/svgs/eye_opened.svg index 8d7d4991f4..d8597947ca 100644 --- a/packages/semi-icons/src/svgs/eye_opened.svg +++ b/packages/semi-icons/src/svgs/eye_opened.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/packages/semi-icons/src/svgs/eyedropper.svg b/packages/semi-icons/src/svgs/eyedropper.svg new file mode 100644 index 0000000000..607f802a26 --- /dev/null +++ b/packages/semi-icons/src/svgs/eyedropper.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/semi-illustrations/package.json b/packages/semi-illustrations/package.json index 55e736317b..e70f22d87b 100644 --- a/packages/semi-illustrations/package.json +++ b/packages/semi-illustrations/package.json @@ -1,6 +1,6 @@ { "name": "@douyinfe/semi-illustrations", - "version": "2.63.1", + "version": "2.64.0-beta.0", "description": "semi illustrations", "keywords": [ "semi", diff --git a/packages/semi-next/package.json b/packages/semi-next/package.json index 048712d9de..5e7dc7d696 100644 --- a/packages/semi-next/package.json +++ b/packages/semi-next/package.json @@ -1,6 +1,6 @@ { "name": "@douyinfe/semi-next", - "version": "2.63.1", + "version": "2.64.0-beta.0", "description": "Plugin that support Semi Design in Next.js", "author": "伍浩威 ", "homepage": "", @@ -22,7 +22,7 @@ "typescript": "^4" }, "dependencies": { - "@douyinfe/semi-webpack-plugin": "2.63.1" + "@douyinfe/semi-webpack-plugin": "2.64.0-beta.0" }, "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a" } diff --git a/packages/semi-rspack/package.json b/packages/semi-rspack/package.json index 435b7755fa..988bb4d9ee 100644 --- a/packages/semi-rspack/package.json +++ b/packages/semi-rspack/package.json @@ -1,6 +1,6 @@ { "name": "@douyinfe/semi-rspack-plugin", - "version": "2.63.1", + "version": "2.64.0-beta.0", "description": "", "homepage": "", "license": "MIT", diff --git a/packages/semi-scss-compile/package.json b/packages/semi-scss-compile/package.json index fc73cc619e..7174a2a2dd 100644 --- a/packages/semi-scss-compile/package.json +++ b/packages/semi-scss-compile/package.json @@ -1,6 +1,6 @@ { "name": "@douyinfe/semi-scss-compile", - "version": "2.63.1", + "version": "2.64.0-beta.0", "description": "compile semi scss to css", "author": "daiqiang@bytedance.com", "license": "MIT", diff --git a/packages/semi-scss-compile/src/utils/writeFile.ts b/packages/semi-scss-compile/src/utils/writeFile.ts index 348327406d..ba41b78a78 100644 --- a/packages/semi-scss-compile/src/utils/writeFile.ts +++ b/packages/semi-scss-compile/src/utils/writeFile.ts @@ -73,19 +73,19 @@ const preProcessScssMap = (scssMapOrigin: ReturnType) => const componentNames = Object.keys(scssMap['components']); const orderList = ['tooltip', 'anchor', 'autoComplete', 'avatar', 'backtop', 'badge', 'banner', 'breadcrumb', 'button', 'calendar', 'card', 'carousel', 'cascader', 'checkbox', 'collapse', 'collapsible', 'datePicker', 'descriptions', 'divider', 'dropdown', 'empty', 'form', 'grid', 'highlight', 'image', 'input', 'inputNumber', 'list', 'modal', 'navigation', 'notification', 'pagination', 'popconfirm', 'popover', 'progress', 'radio', 'rating', 'scrollList', 'select', 'sideSheet', 'skeleton', 'slider', 'space', 'spin', 'steps', 'switch', 'table', 'tabs', 'tag', 'tagInput', 'timePicker', 'timeline', 'toast', 'transfer', 'tree', 'treeSelect', 'typography', 'upload']; - componentNames.sort((a,b)=>{ + componentNames.sort((a, b)=>{ return orderList.indexOf(a) - orderList.indexOf(b); }); for (const componentName of componentNames) { if (scssMap['components'][componentName]['variables.scss']) { - allCustomRaw+= scssMap['components'][componentName]['variables.scss']+'\n'; + allCustomRaw += scssMap['components'][componentName]['variables.scss'] + '\n'; } } - allCustomRaw+= themeLocalRaw || ""; - allCustomRaw+="\n"; - allCustomRaw+=`body:not(:not(body)){${customScssRaw}};`+"\n"; - scssMap.theme['index.scss'] += '\n'+allCustomRaw; + allCustomRaw += themeLocalRaw || ""; + allCustomRaw += "\n"; + allCustomRaw += `body:not(:not(body)){${customScssRaw}};` + "\n"; + scssMap.theme['index.scss'] += '\n' + allCustomRaw; } //----- inject end ----- diff --git a/packages/semi-theme-default/package.json b/packages/semi-theme-default/package.json index 0edb0a9b17..fba28e8314 100644 --- a/packages/semi-theme-default/package.json +++ b/packages/semi-theme-default/package.json @@ -1,6 +1,6 @@ { "name": "@douyinfe/semi-theme-default", - "version": "2.63.1", + "version": "2.64.0-beta.0", "description": "semi-theme-default", "keywords": [ "semi-theme", diff --git a/packages/semi-ui/calendar/_story/calendar.stories.jsx b/packages/semi-ui/calendar/_story/calendar.stories.jsx index 5fc2fc6d49..06286c2482 100644 --- a/packages/semi-ui/calendar/_story/calendar.stories.jsx +++ b/packages/semi-ui/calendar/_story/calendar.stories.jsx @@ -758,6 +758,88 @@ export const DayEventMinHeight = () => { const displayValue = new Date(2019, 6, 23, 8, 32, 0); + return ( + <> + {setMode(e.target.value)}} value={mode}> + 日视图 + 周视图 + 多日视图 + +
+
+ + + ) +} + + +export const TestDemo = () => { + + const [mode, setMode] = useState('day'); + + const dailyEventStyle = { + borderRadius: '3px', + boxSizing: 'border-box', + border: 'var(--semi-color-primary) 1px solid', + padding: '10px', + backgroundColor: 'var(--semi-color-primary-light-default)', + height: '100%', + overflow: 'hidden', + }; + + const events = [ + { + key: '1', + start: new Date(2019, 6, 23, 8, 22, 0), + end: new Date(2019, 6, 23, 8, 23, 0), + children:

7月23日 8:32
, + }, + { + key: '2', + start: new Date(2019, 6, 23, 8, 22, 0), + end: new Date(2019, 6, 23, 8, 23, 0), + children:
7月23日 8:32 重复
, + }, + { + key: '3', + start: new Date(2019, 6, 23, 8, 22, 0), + end: new Date(2019, 6, 23, 8, 23, 0), + children:
7月23日 8:32 重复
, + }, + { + key: '4', + start: new Date(2019, 6, 23, 8, 22, 0), + end: new Date(2019, 6, 23, 8, 23, 0), + children:
7月23日 8:32 重复
, + }, + { + key: '5', + start: new Date(2019, 6, 23, 8, 55, 0), + end: new Date(2019, 6, 23, 9, 30, 0), + children:
7月23日 8:50
, + }, + { + key: '6', + start: new Date(2019, 6, 23, 10, 55, 0), + end: new Date(2019, 6, 23, 11, 30, 0), + children:
7月23日 10:55
, + }, + { + key: '7', + start: new Date(2019, 6, 23, 10, 55, 0), + end: new Date(2019, 6, 23, 11, 30, 0), + children:
7月23日 10:55
, + }, + ]; + + const displayValue = new Date(2019, 6, 23, 8, 32, 0); + return ( <> {setMode(e.target.value)}} value={mode}> diff --git a/packages/semi-ui/calendar/dayCol.tsx b/packages/semi-ui/calendar/dayCol.tsx index 9997cd94a2..91a1618f06 100644 --- a/packages/semi-ui/calendar/dayCol.tsx +++ b/packages/semi-ui/calendar/dayCol.tsx @@ -80,12 +80,13 @@ export default class DayCol extends BaseComponent { renderEvents = () => { const { events, scrollHeight, minEventHeight } = this.props; const list = events.map((event, ind) => { - const { startPos, endPos, children, key } = event; + const { startPos, endPos, children, key, left = 0 } = event; const top = startPos * scrollHeight; const height = (endPos - startPos) * scrollHeight; const style = { top: `${top}px`, height: `${Math.max(minEventHeight, height)}px`, + left: left }; return (
  • diff --git a/packages/semi-ui/colorPicker/AlphaSlider/index.tsx b/packages/semi-ui/colorPicker/AlphaSlider/index.tsx new file mode 100644 index 0000000000..a37a6dd53c --- /dev/null +++ b/packages/semi-ui/colorPicker/AlphaSlider/index.tsx @@ -0,0 +1,97 @@ +import React, { CSSProperties, PropsWithChildren } from 'react'; +import { hsvaToHslaString, hsvaToRgbaString } from "@douyinfe/semi-foundation/colorPicker/utils/convert"; +import { round } from "@douyinfe/semi-foundation/colorPicker/utils/round"; +import { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants'; +import BaseComponent from "../../_base/baseComponent"; +import AlphaSliderFoundation, { + AlphaSliderAdapter, + AlphaSliderBaseProps, + AlphaSliderBaseState +} from "@douyinfe/semi-foundation/colorPicker/AlphaSliderFoundation"; + +export interface AlphaSliderProps extends AlphaSliderBaseProps { + className?: string; + style?: CSSProperties +} + +export interface AlphaSliderState extends AlphaSliderBaseState { + +} + +class AlphaSlider extends BaseComponent, AlphaSliderState> { + private ref: React.RefObject; + + constructor(props) { + super(props); + this.foundation = new AlphaSliderFoundation(this.adapter); + this.state = { + handlePosition: props.hsva.a * props.width - props.handleSize / 2, + isHandleGrabbing: false + }; + this.ref = React.createRef(); + } + + get adapter(): AlphaSliderAdapter { + return { + ...super.adapter, + handleMouseDown: (e: any) => { + this.setState({ isHandleGrabbing: true }); + window.addEventListener('mousemove', this.foundation.setHandlePositionByMousePosition); + window.addEventListener('mouseup', this.foundation.handleMouseUp); + }, + handleMouseUp: (e: MouseEvent) => { + this.setState({ isHandleGrabbing: false }); + window.removeEventListener('mousemove', this.foundation.setHandlePositionByMousePosition); + window.removeEventListener('mouseup', this.foundation.handleMouseUp); + }, + getColorPickerFoundation: () => this.props.foundation, + getDOM: () => this.ref.current + }; + } + + componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any) { + if (prevProps.hsva.a !== this.props.hsva.a) { + this.setState({ handlePosition: this.props.hsva.a * this.props.width - this.props.handleSize / 2 }); + } + } + + handleClick = (e: React.MouseEvent) => { + this.foundation.setHandlePositionByMousePosition(e); + this.foundation.handleMouseDown(e); + } + + render() { + const colorFrom = hsvaToHslaString({ ...this.props.hsva, a: 0 }); + const colorTo = hsvaToHslaString({ ...this.props.hsva, a: 1 }); + + const alphaSliderBackground = `linear-gradient(90deg, ${colorFrom}, ${colorTo})`; + return
    +
    +
    this.foundation.handleMouseDown(e)}> +
    +
    + + +
    ; + } + +} + +export default AlphaSlider; diff --git a/packages/semi-ui/colorPicker/ColorChooseArea/index.tsx b/packages/semi-ui/colorPicker/ColorChooseArea/index.tsx new file mode 100644 index 0000000000..dd79696f63 --- /dev/null +++ b/packages/semi-ui/colorPicker/ColorChooseArea/index.tsx @@ -0,0 +1,109 @@ +import React, { CSSProperties, PropsWithChildren } from 'react'; +import { hsvaToHslString, hsvaToRgba } from "@douyinfe/semi-foundation/colorPicker/utils/convert"; +import { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants'; +import cls from 'classnames'; +import ColorChooseAreaFoundation, { + ColorChooseAreaAdapter, + ColorChooseAreaBaseProps, + ColorChooseAreaBaseState +} from "@douyinfe/semi-foundation/colorPicker/ColorChooseAreaFoundation"; +import BaseComponent from "../../_base/baseComponent"; +import { round } from "@douyinfe/semi-foundation/colorPicker/utils/round"; + + + + +export interface ColorChooseAreaProps extends ColorChooseAreaBaseProps{ + className?: string; + style?: CSSProperties +} + +export interface ColorChooseAreaState extends ColorChooseAreaBaseState{ + +} + +class ColorChooseArea extends BaseComponent, ColorChooseAreaState> { + ref: React.RefObject; + + constructor(props) { + super(props); + this.foundation = new ColorChooseAreaFoundation(this.adapter); + this.state = { + handlePosition: this.foundation.getHandlePositionByHSVA(), + isHandleGrabbing: false, + }; + this.ref = React.createRef(); + } + + get adapter(): ColorChooseAreaAdapter { + return { + ...super.adapter, + getColorPickerFoundation: ()=>this.props.foundation, + handleMouseDown: (e: React.MouseEvent) => { + this.setState({ isHandleGrabbing: true }); + this.ref.current.addEventListener('mousemove', this.foundation.setHandlePositionByMousePosition); + window.addEventListener('mouseup', this.foundation.handleMouseUp); + }, + handleMouseUp: () => { + this.ref.current.removeEventListener('mousemove', this.foundation.setHandlePositionByMousePosition); + window.removeEventListener('mouseup', this.foundation.handleMouseUp); + this.setState({ isHandleGrabbing: false }); + }, + getDOM: ()=>this.ref.current, + notifyChange: (newColor)=>this.props.onChange(newColor) + + }; + } + + + componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any) { + if (JSON.stringify(prevProps.hsva) !== JSON.stringify(this.props.hsva)) { + this.setState({ handlePosition: this.foundation.getHandlePositionByHSVA() }); + } + } + + + + + + handleClick = (e: React.MouseEvent)=>{ + this.foundation.setHandlePositionByMousePosition(e); + this.foundation.handleMouseDown(e); + } + + + + + render() { + const areaBgStyle = hsvaToHslString({ h: this.props.hsva.h, s: 100, v: 100, a: 1 }); + const currentColor = hsvaToRgba(this.props.hsva); + return
    +
    this.foundation.handleMouseDown(e)}> + +
    +
    ; + } + +} + +export default ColorChooseArea; diff --git a/packages/semi-ui/colorPicker/ColorSlider/index.tsx b/packages/semi-ui/colorPicker/ColorSlider/index.tsx new file mode 100644 index 0000000000..d828b03097 --- /dev/null +++ b/packages/semi-ui/colorPicker/ColorSlider/index.tsx @@ -0,0 +1,91 @@ +import React, { CSSProperties, PropsWithChildren } from 'react'; +import ColorPickerFoundation from '@douyinfe/semi-foundation/colorPicker/foundation'; +import { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants'; +import cls from 'classnames'; +import ColorSliderFoundation, { + ColorSliderAdapter, + ColorSliderBaseProps, + ColorSliderBaseState +} from "@douyinfe/semi-foundation/colorPicker/ColorSliderFoundation"; +import BaseComponent from "../../_base/baseComponent"; + +export interface ColorSliderProps extends ColorSliderBaseProps { + className?: string; + style?: CSSProperties +} + +export interface ColorSliderState extends ColorSliderBaseState { + +} + +class ColorSlider extends BaseComponent, ColorSliderState> { + private readonly ref: React.RefObject; + + constructor(props: ColorSliderProps) { + super(props); + this.foundation = new ColorSliderFoundation(this.adapter); + this.state = { + handlePosition: props.hue / 360 * props.width - props.handleSize / 2, + isHandleGrabbing: false + }; + this.ref = React.createRef(); + } + + get adapter(): ColorSliderAdapter { + return { + ...super.adapter, + handleMouseDown: (e: any) => { + this.setState({ isHandleGrabbing: true }); + window.addEventListener('mousemove', this.foundation.setHandlePositionByMousePosition); + window.addEventListener('mouseup', this.foundation.handleMouseUp); + }, + handleMouseUp: (e: MouseEvent) => { + this.setState({ isHandleGrabbing: false }); + window.removeEventListener('mousemove', this.foundation.setHandlePositionByMousePosition); + window.removeEventListener('mouseup', this.foundation.handleMouseUp); + }, + getColorPickerFoundation: () => this.props.foundation, + getDOM: () => this.ref.current + }; + } + + componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any) { + if (prevProps.hue !== this.props.hue) { + this.setState({ handlePosition: this.props.hue / 360 * this.props.width - this.props.handleSize / 2 }); + } + } + + + handleClick = (e: React.MouseEvent) => { + this.foundation.setHandlePositionByMousePosition(e); + this.foundation.handleMouseDown(e); + } + + + render() { + return
    + +
    this.foundation.handleMouseDown(e)}> +
    + +
    ; + } + +} + +export default ColorSlider; diff --git a/packages/semi-ui/colorPicker/DataPart/index.tsx b/packages/semi-ui/colorPicker/DataPart/index.tsx new file mode 100644 index 0000000000..c533c5d8e3 --- /dev/null +++ b/packages/semi-ui/colorPicker/DataPart/index.tsx @@ -0,0 +1,119 @@ +import React, { PropsWithChildren, ReactNode } from 'react'; +import { HsvaColor, RgbaColor } from '@douyinfe/semi-foundation/colorPicker/interface'; +import Input from "../../input"; +import InputGroup from "../../input/inputGroup"; +import InputNumber from "../../inputNumber"; +import Select from "../../select"; +import Button from "../../button"; +import ColorPickerFoundation, { ColorPickerProps } from '@douyinfe/semi-foundation/colorPicker/foundation'; +import { isEqual } from 'lodash'; +import { IconEyedropper } from '@douyinfe/semi-icons'; +import { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants'; +import BaseComponent from "../../_base/baseComponent"; +import DataPartFoundation, { + DataPartAdapter, + DataPartBaseProps, + DataPartBaseState +} from "@douyinfe/semi-foundation/colorPicker/DataPartFoundation"; + + +export interface DataPartProps extends DataPartBaseProps { + +} + +export interface DataPartState extends DataPartBaseState { + +} + + +class DataPart extends BaseComponent, DataPartState> { + + constructor(props: DataPartProps) { + super(props); + this.foundation = new DataPartFoundation(this.adapter); + this.state = { + format: this.props.defaultFormat, + inputValue: '' + }; + } + + get adapter(): DataPartAdapter { + return { + ...super.adapter, + + getColorPickerFoundation: () => this.props.foundation, + }; + } + + componentDidMount() { + this.foundation.handleInputValueChange(this.foundation.getInputValue()); + } + + componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any) { + if (!isEqual(prevProps.currentColor, this.props.currentColor) || prevState.format !== this.state.format) { + this.foundation.handleInputValueChange(this.foundation.getInputValue()); + } + } + + + handleChange = (newColor: RgbaColor | HsvaColor | string) => { + this.props.foundation.handleChange(newColor, this.state.format); + } + + + render() { + const rgba = this.props.currentColor.rgba; + return
    +
    +
    + + { + const value = this.foundation.getValueByInputValue(v); + if (value) { + this.handleChange(value); + } + this.foundation.handleInputValueChange(v); + }} + /> + { + this.props.alpha && { + if (this.state.format === 'rgba') { + this.handleChange({ ...this.props.currentColor.rgba, a: Number((v / 100).toFixed(2)) }); + } else if (this.state.format === 'hex') { + const rgba = { ...this.props.currentColor.rgba, a: Number((v / 100).toFixed(2)) }; + const hex = ColorPickerFoundation.rgbaToHex(rgba); + this.handleChange(hex); + } else if (this.state.format === 'hsva') { + const rgba = { ...this.props.currentColor.hsva, a: Number((v / 100).toFixed(2)) }; + this.handleChange(rgba); + } + }} + suffix={%} hideButtons={true}/> + } +