@douyinfe/semi-foundation 2.28.2 → 2.29.0

package/datePicker/foundation.ts

@@ -168,7 +168,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     dateFnsLocale?: any;
     localeCode?: string;
     rangeSeparator?: string;
-    insetInput?: boolean;
+    insetInput?: DateInputFoundationProps['insetInput'];
     preventScroll?: boolean
 }
 

package/datePicker/inputFoundation.ts

@@ -38,9 +38,19 @@ export interface DateInputElementProps {
     prefix?: any
 }
 
+export interface InsetInputProps {
+    placeholder?: {
+        dateStart?: string;
+        dateEnd?: string;
+        timeStart?: string;
+        timeEnd?: string
+    }
+    // showClear?: boolean
+}
+
 export interface DateInputFoundationProps extends DateInputElementProps, DateInputEventHandlerProps {
     [x: string]: any;
-    value?: BaseValueType[];
+    value?: Date[];
     disabled?: boolean;
     type?: Type;
     showClear?: boolean;
@@ -51,7 +61,7 @@ export interface DateInputFoundationProps extends DateInputElementProps, DateInp
     prefixCls?: string;
     rangeSeparator?: string;
     panelType?: PanelType;
-    insetInput?: boolean;
+    insetInput?: boolean | InsetInputProps;
     insetInputValue?: InsetInputValue;
     density?: typeof strings.DENSITY_SET[number];
     defaultPickerValue?: ValueType
@@ -81,7 +91,7 @@ export interface InsetInputChangeProps {
     insetInputValue: InsetInputValue
 }
 
-export interface DateInputAdapter extends DefaultAdapter {
+export interface DateInputAdapter extends DefaultAdapter<DateInputFoundationProps, Record<string, any>> {
     updateIsFocusing: (isFocusing: boolean) => void;
     notifyClick: DateInputFoundationProps['onClick'];
     notifyChange: DateInputFoundationProps['onChange'];

package/datePicker/monthsGridFoundation.ts

@@ -20,7 +20,7 @@ import { includes, isSet, isEqual, isFunction } from 'lodash';
 import { zonedTimeToUtc } from '../utils/date-fns-extra';
 import { getDefaultFormatTokenByType } from './_utils/getDefaultFormatToken';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
-import { BaseValueType, PresetPosition, ValueType } from './foundation';
+import { BaseValueType, DateInputFoundationProps, PresetPosition, ValueType } from './foundation';
 import { MonthDayInfo } from './monthFoundation';
 import { ArrayElement } from '../utils/type';
 
@@ -90,7 +90,7 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     isAnotherPanelHasOpened?: (currentRangeInput: 'rangeStart' | 'rangeEnd') => boolean;
     focusRecordsRef?: any;
     triggerRender?: (props: Record<string, any>) => any;
-    insetInput: boolean;
+    insetInput: DateInputFoundationProps['insetInput'];
     presetPosition?: PresetPosition;
     renderQuickControls?: any;
     renderDateInput?: any

package/form/form.scss

@@ -257,11 +257,11 @@ $rating: #{$prefix}-rating;
         margin-bottom: 0;
         padding-top: $spacing-form_field_group_vertical-paddingTop;
         padding-bottom: $spacing-form_field_group_vertical-paddingBottom;
+        overflow: hidden;
     }
 }
 
 .#{$form}-field-group {
-
     &[x-label-pos="top"] {
     }
 

package/lib/cjs/datePicker/foundation.d.ts

@@ -136,7 +136,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     dateFnsLocale?: any;
     localeCode?: string;
     rangeSeparator?: string;
-    insetInput?: boolean;
+    insetInput?: DateInputFoundationProps['insetInput'];
     preventScroll?: boolean;
 }
 export interface DatePickerFoundationState {

package/lib/cjs/datePicker/inputFoundation.d.ts

@@ -19,9 +19,17 @@ export interface DateInputElementProps {
     insetLabel?: any;
     prefix?: any;
 }
+export interface InsetInputProps {
+    placeholder?: {
+        dateStart?: string;
+        dateEnd?: string;
+        timeStart?: string;
+        timeEnd?: string;
+    };
+}
 export interface DateInputFoundationProps extends DateInputElementProps, DateInputEventHandlerProps {
     [x: string]: any;
-    value?: BaseValueType[];
+    value?: Date[];
     disabled?: boolean;
     type?: Type;
     showClear?: boolean;
@@ -32,7 +40,7 @@ export interface DateInputFoundationProps extends DateInputElementProps, DateInp
     prefixCls?: string;
     rangeSeparator?: string;
     panelType?: PanelType;
-    insetInput?: boolean;
+    insetInput?: boolean | InsetInputProps;
     insetInputValue?: InsetInputValue;
     density?: typeof strings.DENSITY_SET[number];
     defaultPickerValue?: ValueType;
@@ -58,7 +66,7 @@ export interface InsetInputChangeProps {
     format: string;
     insetInputValue: InsetInputValue;
 }
-export interface DateInputAdapter extends DefaultAdapter {
+export interface DateInputAdapter extends DefaultAdapter<DateInputFoundationProps, Record<string, any>> {
     updateIsFocusing: (isFocusing: boolean) => void;
     notifyClick: DateInputFoundationProps['onClick'];
     notifyChange: DateInputFoundationProps['onChange'];

package/lib/cjs/datePicker/monthsGridFoundation.d.ts

@@ -1,7 +1,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
 import { WeekStartNumber } from './_utils/getMonthTable';
-import { PresetPosition, ValueType } from './foundation';
+import { DateInputFoundationProps, PresetPosition, ValueType } from './foundation';
 import { MonthDayInfo } from './monthFoundation';
 import { ArrayElement } from '../utils/type';
 declare type Type = ArrayElement<typeof strings.TYPE_SET>;
@@ -53,7 +53,7 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     isAnotherPanelHasOpened?: (currentRangeInput: 'rangeStart' | 'rangeEnd') => boolean;
     focusRecordsRef?: any;
     triggerRender?: (props: Record<string, any>) => any;
-    insetInput: boolean;
+    insetInput: DateInputFoundationProps['insetInput'];
     presetPosition?: PresetPosition;
     renderQuickControls?: any;
     renderDateInput?: any;

package/lib/cjs/form/form.css

@@ -173,6 +173,7 @@
   margin-bottom: 0;
   padding-top: 12px;
   padding-bottom: 12px;
+  overflow: hidden;
 }
 .semi-form-vertical .semi-form-field-group .semi-form-field {
   margin-top: 0;

package/lib/cjs/form/form.scss

@@ -257,11 +257,11 @@ $rating: #{$prefix}-rating;
         margin-bottom: 0;
         padding-top: $spacing-form_field_group_vertical-paddingTop;
         padding-bottom: $spacing-form_field_group_vertical-paddingBottom;
+        overflow: hidden;
     }
 }
 
 .#{$form}-field-group {
-
     &[x-label-pos="top"] {
     }
 

package/lib/cjs/slider/slider.css

@@ -2,8 +2,8 @@
 /* sizing */
 /* spacing */
 .semi-slider {
-  padding: 0 13px;
-  margin: 0;
+  padding: 0px 13px;
+  margin: 0px;
 }
 .semi-slider-wrapper {
   box-sizing: border-box;
@@ -15,8 +15,8 @@
 }
 .semi-slider-rail {
   box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+  margin: 0px;
+  padding: 0px;
   color: rgba(0, 0, 0, 0.65);
   font-size: 14px;
   font-variant: tabular-nums;
@@ -45,7 +45,7 @@
   border-radius: 50%;
   cursor: pointer;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
-  transform: scale(var(--semi-transform_scale-small));
+  transform: var(--semi-transform_scale-small) translateX(-50%) translateY(0px);
 }
 .semi-slider-handle:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);
@@ -81,6 +81,7 @@
   background-color: var(--semi-color-white);
   border-radius: 50%;
   cursor: pointer;
+  transform: translateX(0px);
 }
 .semi-slider-dot-active {
   background-color: var(--semi-color-white);
@@ -88,7 +89,7 @@
 .semi-slider-marks {
   position: absolute;
   top: 23px;
-  left: 0;
+  left: 0px;
   width: 100%;
   font-size: 14px;
 }
@@ -103,7 +104,7 @@
 .semi-slider-marks-reverse {
   position: absolute;
   top: 23px;
-  left: 0;
+  left: 0px;
   width: 100%;
   font-size: 14px;
 }
@@ -127,10 +128,10 @@
   display: inline-block;
 }
 .semi-slider-boundary-min {
-  left: 0;
+  left: 0px;
 }
 .semi-slider-boundary-max {
-  right: 0;
+  right: 0px;
 }
 .semi-slider-boundary-show {
   visibility: visible;
@@ -156,11 +157,15 @@
 .semi-slider-vertical-wrapper .semi-slider-rail {
   width: 4px;
   height: 100%;
-  top: 0;
+  top: 0px;
 }
 .semi-slider-vertical-wrapper .semi-slider-handle {
-  margin-top: 0;
+  margin-top: 0px;
   margin-left: -10px;
+  transform: var(--semi-transform_scale-small) translateY(-50%) translateX(0px);
+}
+.semi-slider-vertical-wrapper .semi-slider-dot {
+  transform: translateY(0px);
 }
 
 .semi-slider-disabled {

package/lib/cjs/slider/slider.scss

@@ -57,7 +57,7 @@ $module: #{$prefix}-slider;
         border-radius: 50%;
         cursor: pointer;
         transition: background-color $transition_duration_slider_handle-bg $transition_function-slider-handle-bg $transition_delay-slider_handle-bg;
-        transform: scale($transform_scale-slider_handle);
+        transform: $transform_scale-slider_handle translateX(-50%) translateY($spacing-slider_handle-translateY);
         &:focus-visible {
             outline: $width-slider_handle-focus solid $color-slider_handle-focus;
         }
@@ -101,6 +101,7 @@ $module: #{$prefix}-slider;
         //border: 1px solid $color-control-bg-default;
         border-radius: 50%;
         cursor: pointer;
+        transform: translateX($spacing-slider_dot-translateX);
     }
 
     &-dot-active {
@@ -196,6 +197,10 @@ $module: #{$prefix}-slider;
     .#{$module}-handle {
         margin-top: $spacing-slider_vertical_handle-marginTop;
         margin-left: $spacing-slider_vertical_handle-marginLeft;
+        transform: $transform_scale-slider_handle translateY(-50%) translateX($spacing-slider_vertical_handle-translateX);
+    }
+    .#{$module}-dot{
+        transform: translateY($spacing-slider_vertical_dot-translateY);
     }
 }
 

package/lib/cjs/slider/variables.scss

@@ -18,26 +18,30 @@ $color-slider_handle-focus: var(--semi-color-primary-light-active); // 圆形按
 
 // Spacing
 $spacing-slider-paddingX: 13px; // 滑动条整体水平内边距
-$spacing-slider-paddingY: 0; // 滑动条整体垂直内边距
-$spacing-slider-margin: 0; // 滑动条整体外边距
-$spacing-slider_rail-margin: 0; // 滑动条轨道外边距
-$spacing-slider_rail-padding: 0; // 滑动条轨道内边距
+$spacing-slider-paddingY: 0px; // 滑动条整体垂直内边距
+$spacing-slider-margin: 0px; // 滑动条整体外边距
+$spacing-slider_rail-margin: 0px; // 滑动条轨道外边距
+$spacing-slider_rail-padding: 0px; // 滑动条轨道内边距
 $spacing-slider_rail-top: 14px; // 滑动条未填充轨道顶部距离
 $spacing-slider_handle-marginTop: 4px; // 滑动条圆形按钮顶部外边距
 $spacing-slider_track-top: 14px; // 滑动条已填充轨道顶部距离
 $spacing-slider_tooltip-top: -40px; // 滑动条工具提示顶部距离
 $spacing-slider_dot-top: 14px; // 滑动条圆形刻度点顶部距离
 $spacing-slider_marks-top: 23px; // 滑动条刻度标签顶部距离
-$spacing-slider_marks-left: 0; // 滑动条刻度标签左侧距离
+$spacing-slider_marks-left: 0px; // 滑动条刻度标签左侧距离
 $spacing-slider_boundary-top: 30px;
-$spacing-slider_boundary_min-left: 0;
-$spacing-slider_boundary_max-right: 0;
+$spacing-slider_boundary_min-left: 0px;
+$spacing-slider_boundary_max-right: 0px;
 $spacing-slider_vertical_marks-marginTop: -30px; // 垂直滑动条刻度标签顶部外边距
 $spacing-slider_vertical_marks-marginLeft: 29px; // 垂直滑动条刻度标签左侧外边距
 $spacing-slider_vertical_marks-reverse-marginLeft: -26px; // 垂直滑动条刻度标签左侧外边距（标签在左侧时）
-$spacing-slider_vertical_rail-top: 0; // 垂直滑动条轨道顶部距离
-$spacing-slider_vertical_handle-marginTop: 0; // 垂直滑动条原型按钮顶部外边距
+$spacing-slider_vertical_rail-top: 0px; // 垂直滑动条轨道顶部距离
+$spacing-slider_vertical_handle-marginTop: 0px; // 垂直滑动条原型按钮顶部外边距
 $spacing-slider_vertical_handle-marginLeft: -10px; // 垂直滑动条原型按钮左侧外边距
+$spacing-slider_handle-translateY: 0px; //  水平滑动条原型按钮垂直偏移量
+$spacing-slider_vertical_handle-translateX: 0px; // 垂直滑动条原型按钮水平偏移量
+$spacing-slider_dot-translateX: 0px; //  水平滑动条圆形刻度点水平偏移量
+$spacing-slider_vertical_dot-translateY: 0px; // 垂直滑动条圆形刻度点垂直偏移量
 
 // Radius
 $radius-slider_rail: var(--semi-border-radius-small); // 滚动条未填充轨道圆角

package/lib/es/datePicker/foundation.d.ts

@@ -136,7 +136,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     dateFnsLocale?: any;
     localeCode?: string;
     rangeSeparator?: string;
-    insetInput?: boolean;
+    insetInput?: DateInputFoundationProps['insetInput'];
     preventScroll?: boolean;
 }
 export interface DatePickerFoundationState {

package/lib/es/datePicker/inputFoundation.d.ts

@@ -19,9 +19,17 @@ export interface DateInputElementProps {
     insetLabel?: any;
     prefix?: any;
 }
+export interface InsetInputProps {
+    placeholder?: {
+        dateStart?: string;
+        dateEnd?: string;
+        timeStart?: string;
+        timeEnd?: string;
+    };
+}
 export interface DateInputFoundationProps extends DateInputElementProps, DateInputEventHandlerProps {
     [x: string]: any;
-    value?: BaseValueType[];
+    value?: Date[];
     disabled?: boolean;
     type?: Type;
     showClear?: boolean;
@@ -32,7 +40,7 @@ export interface DateInputFoundationProps extends DateInputElementProps, DateInp
     prefixCls?: string;
     rangeSeparator?: string;
     panelType?: PanelType;
-    insetInput?: boolean;
+    insetInput?: boolean | InsetInputProps;
     insetInputValue?: InsetInputValue;
     density?: typeof strings.DENSITY_SET[number];
     defaultPickerValue?: ValueType;
@@ -58,7 +66,7 @@ export interface InsetInputChangeProps {
     format: string;
     insetInputValue: InsetInputValue;
 }
-export interface DateInputAdapter extends DefaultAdapter {
+export interface DateInputAdapter extends DefaultAdapter<DateInputFoundationProps, Record<string, any>> {
     updateIsFocusing: (isFocusing: boolean) => void;
     notifyClick: DateInputFoundationProps['onClick'];
     notifyChange: DateInputFoundationProps['onChange'];

package/lib/es/datePicker/monthsGridFoundation.d.ts

@@ -1,7 +1,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
 import { WeekStartNumber } from './_utils/getMonthTable';
-import { PresetPosition, ValueType } from './foundation';
+import { DateInputFoundationProps, PresetPosition, ValueType } from './foundation';
 import { MonthDayInfo } from './monthFoundation';
 import { ArrayElement } from '../utils/type';
 declare type Type = ArrayElement<typeof strings.TYPE_SET>;
@@ -53,7 +53,7 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     isAnotherPanelHasOpened?: (currentRangeInput: 'rangeStart' | 'rangeEnd') => boolean;
     focusRecordsRef?: any;
     triggerRender?: (props: Record<string, any>) => any;
-    insetInput: boolean;
+    insetInput: DateInputFoundationProps['insetInput'];
     presetPosition?: PresetPosition;
     renderQuickControls?: any;
     renderDateInput?: any;

package/lib/es/form/form.css

@@ -173,6 +173,7 @@
   margin-bottom: 0;
   padding-top: 12px;
   padding-bottom: 12px;
+  overflow: hidden;
 }
 .semi-form-vertical .semi-form-field-group .semi-form-field {
   margin-top: 0;

package/lib/es/form/form.scss

@@ -257,11 +257,11 @@ $rating: #{$prefix}-rating;
         margin-bottom: 0;
         padding-top: $spacing-form_field_group_vertical-paddingTop;
         padding-bottom: $spacing-form_field_group_vertical-paddingBottom;
+        overflow: hidden;
     }
 }
 
 .#{$form}-field-group {
-
     &[x-label-pos="top"] {
     }
 

package/lib/es/slider/slider.css

@@ -2,8 +2,8 @@
 /* sizing */
 /* spacing */
 .semi-slider {
-  padding: 0 13px;
-  margin: 0;
+  padding: 0px 13px;
+  margin: 0px;
 }
 .semi-slider-wrapper {
   box-sizing: border-box;
@@ -15,8 +15,8 @@
 }
 .semi-slider-rail {
   box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+  margin: 0px;
+  padding: 0px;
   color: rgba(0, 0, 0, 0.65);
   font-size: 14px;
   font-variant: tabular-nums;
@@ -45,7 +45,7 @@
   border-radius: 50%;
   cursor: pointer;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
-  transform: scale(var(--semi-transform_scale-small));
+  transform: var(--semi-transform_scale-small) translateX(-50%) translateY(0px);
 }
 .semi-slider-handle:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);
@@ -81,6 +81,7 @@
   background-color: var(--semi-color-white);
   border-radius: 50%;
   cursor: pointer;
+  transform: translateX(0px);
 }
 .semi-slider-dot-active {
   background-color: var(--semi-color-white);
@@ -88,7 +89,7 @@
 .semi-slider-marks {
   position: absolute;
   top: 23px;
-  left: 0;
+  left: 0px;
   width: 100%;
   font-size: 14px;
 }
@@ -103,7 +104,7 @@
 .semi-slider-marks-reverse {
   position: absolute;
   top: 23px;
-  left: 0;
+  left: 0px;
   width: 100%;
   font-size: 14px;
 }
@@ -127,10 +128,10 @@
   display: inline-block;
 }
 .semi-slider-boundary-min {
-  left: 0;
+  left: 0px;
 }
 .semi-slider-boundary-max {
-  right: 0;
+  right: 0px;
 }
 .semi-slider-boundary-show {
   visibility: visible;
@@ -156,11 +157,15 @@
 .semi-slider-vertical-wrapper .semi-slider-rail {
   width: 4px;
   height: 100%;
-  top: 0;
+  top: 0px;
 }
 .semi-slider-vertical-wrapper .semi-slider-handle {
-  margin-top: 0;
+  margin-top: 0px;
   margin-left: -10px;
+  transform: var(--semi-transform_scale-small) translateY(-50%) translateX(0px);
+}
+.semi-slider-vertical-wrapper .semi-slider-dot {
+  transform: translateY(0px);
 }
 
 .semi-slider-disabled {

package/lib/es/slider/slider.scss

@@ -57,7 +57,7 @@ $module: #{$prefix}-slider;
         border-radius: 50%;
         cursor: pointer;
         transition: background-color $transition_duration_slider_handle-bg $transition_function-slider-handle-bg $transition_delay-slider_handle-bg;
-        transform: scale($transform_scale-slider_handle);
+        transform: $transform_scale-slider_handle translateX(-50%) translateY($spacing-slider_handle-translateY);
         &:focus-visible {
             outline: $width-slider_handle-focus solid $color-slider_handle-focus;
         }
@@ -101,6 +101,7 @@ $module: #{$prefix}-slider;
         //border: 1px solid $color-control-bg-default;
         border-radius: 50%;
         cursor: pointer;
+        transform: translateX($spacing-slider_dot-translateX);
     }
 
     &-dot-active {
@@ -196,6 +197,10 @@ $module: #{$prefix}-slider;
     .#{$module}-handle {
         margin-top: $spacing-slider_vertical_handle-marginTop;
         margin-left: $spacing-slider_vertical_handle-marginLeft;
+        transform: $transform_scale-slider_handle translateY(-50%) translateX($spacing-slider_vertical_handle-translateX);
+    }
+    .#{$module}-dot{
+        transform: translateY($spacing-slider_vertical_dot-translateY);
     }
 }
 

package/lib/es/slider/variables.scss

@@ -18,26 +18,30 @@ $color-slider_handle-focus: var(--semi-color-primary-light-active); // 圆形按
 
 // Spacing
 $spacing-slider-paddingX: 13px; // 滑动条整体水平内边距
-$spacing-slider-paddingY: 0; // 滑动条整体垂直内边距
-$spacing-slider-margin: 0; // 滑动条整体外边距
-$spacing-slider_rail-margin: 0; // 滑动条轨道外边距
-$spacing-slider_rail-padding: 0; // 滑动条轨道内边距
+$spacing-slider-paddingY: 0px; // 滑动条整体垂直内边距
+$spacing-slider-margin: 0px; // 滑动条整体外边距
+$spacing-slider_rail-margin: 0px; // 滑动条轨道外边距
+$spacing-slider_rail-padding: 0px; // 滑动条轨道内边距
 $spacing-slider_rail-top: 14px; // 滑动条未填充轨道顶部距离
 $spacing-slider_handle-marginTop: 4px; // 滑动条圆形按钮顶部外边距
 $spacing-slider_track-top: 14px; // 滑动条已填充轨道顶部距离
 $spacing-slider_tooltip-top: -40px; // 滑动条工具提示顶部距离
 $spacing-slider_dot-top: 14px; // 滑动条圆形刻度点顶部距离
 $spacing-slider_marks-top: 23px; // 滑动条刻度标签顶部距离
-$spacing-slider_marks-left: 0; // 滑动条刻度标签左侧距离
+$spacing-slider_marks-left: 0px; // 滑动条刻度标签左侧距离
 $spacing-slider_boundary-top: 30px;
-$spacing-slider_boundary_min-left: 0;
-$spacing-slider_boundary_max-right: 0;
+$spacing-slider_boundary_min-left: 0px;
+$spacing-slider_boundary_max-right: 0px;
 $spacing-slider_vertical_marks-marginTop: -30px; // 垂直滑动条刻度标签顶部外边距
 $spacing-slider_vertical_marks-marginLeft: 29px; // 垂直滑动条刻度标签左侧外边距
 $spacing-slider_vertical_marks-reverse-marginLeft: -26px; // 垂直滑动条刻度标签左侧外边距（标签在左侧时）
-$spacing-slider_vertical_rail-top: 0; // 垂直滑动条轨道顶部距离
-$spacing-slider_vertical_handle-marginTop: 0; // 垂直滑动条原型按钮顶部外边距
+$spacing-slider_vertical_rail-top: 0px; // 垂直滑动条轨道顶部距离
+$spacing-slider_vertical_handle-marginTop: 0px; // 垂直滑动条原型按钮顶部外边距
 $spacing-slider_vertical_handle-marginLeft: -10px; // 垂直滑动条原型按钮左侧外边距
+$spacing-slider_handle-translateY: 0px; //  水平滑动条原型按钮垂直偏移量
+$spacing-slider_vertical_handle-translateX: 0px; // 垂直滑动条原型按钮水平偏移量
+$spacing-slider_dot-translateX: 0px; //  水平滑动条圆形刻度点水平偏移量
+$spacing-slider_vertical_dot-translateY: 0px; // 垂直滑动条圆形刻度点垂直偏移量
 
 // Radius
 $radius-slider_rail: var(--semi-border-radius-small); // 滚动条未填充轨道圆角

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.28.2",
+    "version": "2.29.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "d9651593e39ad3333e0f138a678460e959d01bbd",
+    "gitHead": "cf2c6529fb778787c2d3f6cb826e64af358a5215",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/slider/slider.scss

@@ -57,7 +57,7 @@ $module: #{$prefix}-slider;
         border-radius: 50%;
         cursor: pointer;
         transition: background-color $transition_duration_slider_handle-bg $transition_function-slider-handle-bg $transition_delay-slider_handle-bg;
-        transform: scale($transform_scale-slider_handle);
+        transform: $transform_scale-slider_handle translateX(-50%) translateY($spacing-slider_handle-translateY);
         &:focus-visible {
             outline: $width-slider_handle-focus solid $color-slider_handle-focus;
         }
@@ -101,6 +101,7 @@ $module: #{$prefix}-slider;
         //border: 1px solid $color-control-bg-default;
         border-radius: 50%;
         cursor: pointer;
+        transform: translateX($spacing-slider_dot-translateX);
     }
 
     &-dot-active {
@@ -196,6 +197,10 @@ $module: #{$prefix}-slider;
     .#{$module}-handle {
         margin-top: $spacing-slider_vertical_handle-marginTop;
         margin-left: $spacing-slider_vertical_handle-marginLeft;
+        transform: $transform_scale-slider_handle translateY(-50%) translateX($spacing-slider_vertical_handle-translateX);
+    }
+    .#{$module}-dot{
+        transform: translateY($spacing-slider_vertical_dot-translateY);
     }
 }
 

package/slider/variables.scss

@@ -18,26 +18,30 @@ $color-slider_handle-focus: var(--semi-color-primary-light-active); // 圆形按
 
 // Spacing
 $spacing-slider-paddingX: 13px; // 滑动条整体水平内边距
-$spacing-slider-paddingY: 0; // 滑动条整体垂直内边距
-$spacing-slider-margin: 0; // 滑动条整体外边距
-$spacing-slider_rail-margin: 0; // 滑动条轨道外边距
-$spacing-slider_rail-padding: 0; // 滑动条轨道内边距
+$spacing-slider-paddingY: 0px; // 滑动条整体垂直内边距
+$spacing-slider-margin: 0px; // 滑动条整体外边距
+$spacing-slider_rail-margin: 0px; // 滑动条轨道外边距
+$spacing-slider_rail-padding: 0px; // 滑动条轨道内边距
 $spacing-slider_rail-top: 14px; // 滑动条未填充轨道顶部距离
 $spacing-slider_handle-marginTop: 4px; // 滑动条圆形按钮顶部外边距
 $spacing-slider_track-top: 14px; // 滑动条已填充轨道顶部距离
 $spacing-slider_tooltip-top: -40px; // 滑动条工具提示顶部距离
 $spacing-slider_dot-top: 14px; // 滑动条圆形刻度点顶部距离
 $spacing-slider_marks-top: 23px; // 滑动条刻度标签顶部距离
-$spacing-slider_marks-left: 0; // 滑动条刻度标签左侧距离
+$spacing-slider_marks-left: 0px; // 滑动条刻度标签左侧距离
 $spacing-slider_boundary-top: 30px;
-$spacing-slider_boundary_min-left: 0;
-$spacing-slider_boundary_max-right: 0;
+$spacing-slider_boundary_min-left: 0px;
+$spacing-slider_boundary_max-right: 0px;
 $spacing-slider_vertical_marks-marginTop: -30px; // 垂直滑动条刻度标签顶部外边距
 $spacing-slider_vertical_marks-marginLeft: 29px; // 垂直滑动条刻度标签左侧外边距
 $spacing-slider_vertical_marks-reverse-marginLeft: -26px; // 垂直滑动条刻度标签左侧外边距（标签在左侧时）
-$spacing-slider_vertical_rail-top: 0; // 垂直滑动条轨道顶部距离
-$spacing-slider_vertical_handle-marginTop: 0; // 垂直滑动条原型按钮顶部外边距
+$spacing-slider_vertical_rail-top: 0px; // 垂直滑动条轨道顶部距离
+$spacing-slider_vertical_handle-marginTop: 0px; // 垂直滑动条原型按钮顶部外边距
 $spacing-slider_vertical_handle-marginLeft: -10px; // 垂直滑动条原型按钮左侧外边距
+$spacing-slider_handle-translateY: 0px; //  水平滑动条原型按钮垂直偏移量
+$spacing-slider_vertical_handle-translateX: 0px; // 垂直滑动条原型按钮水平偏移量
+$spacing-slider_dot-translateX: 0px; //  水平滑动条圆形刻度点水平偏移量
+$spacing-slider_vertical_dot-translateY: 0px; // 垂直滑动条圆形刻度点垂直偏移量
 
 // Radius
 $radius-slider_rail: var(--semi-border-radius-small); // 滚动条未填充轨道圆角