Skip to content

Skeleton+Range: 适配V16 #3518

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kaxium wants to merge 3 commits into
base: feat_v4.x
Choose a base branch
from
Open

Skeleton+Range: 适配V16 #3518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c804f15
refactor(Skeleton): 适配v16
kaxium Aug 25, 2026
c7c2213
refactor(range): 适配V16
kaxium Sep 1, 2026
4c6c69a
Merge branch 'feat_v4.x' into v16/range
xiaoyatong Sep 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions src/packages/avatarcropper/__tests__/avatarcropper.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,7 @@ test('AvatarCropper: Select the image to open the crop window', async () => {
)

const input = container.querySelector('.nut-avatar-cropper-input') as
| Element
| Node
| Document
| Window
Element | Node | Document | Window
expect(input).toBeInTheDocument()

const smallFile = new File([new ArrayBuffer(100)], 'small.jpg')
Expand Down
3 changes: 3 additions & 0 deletions src/packages/configprovider/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,10 +463,12 @@ export type NutCSSVariables =
| 'nutuiRangeMargin'
| 'nutuiRangeInactiveColor'
| 'nutuiRangeActiveColor'
| 'nutuiRangeDisabledColor'
| 'nutuiRangeButtonBackground'
| 'nutuiRangeButtonWidth'
| 'nutuiRangeButtonHeight'
| 'nutuiRangeButtonBorder'
| 'nutuiRangeTickSize'
| 'nutuiSwiperIndicatorBottom'
| 'nutuiStepsBackgroundColor'
| 'nutuiStepsBaseHeadHeight'
Expand Down Expand Up @@ -856,6 +858,7 @@ export type NutCSSVariables =
| 'nutuiSkeletonLineNormalHeight'
| 'nutuiSkeletonLineLargeHeight'
| 'nutuiSkeletonLineBorderRadius'
| 'nutuiSkeletonAnimationColor'
| 'nutuiCardBorderRadius'
| 'nutuiGridBorderWidth'
| 'nutuiGridBorderColor'
Expand Down
8 changes: 1 addition & 7 deletions src/packages/formitem/formitem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,7 @@ import { SECRET } from '@/packages/form/useform'
import { WebFormItemProps } from '@/types'

type TextAlign =
| 'start'
| 'end'
| 'left'
| 'right'
| 'center'
| 'justify'
| 'match-parent'
'start' | 'end' | 'left' | 'right' | 'center' | 'justify' | 'match-parent'

const defaultProps = {
...ComponentDefaults,
Expand Down
12 changes: 9 additions & 3 deletions src/packages/range/__test__/__snapshots__/range.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,15 @@ exports[`range props test 1`] = `
>
<div
class="nut-range-button-number"
style="transform: translate(-50%,-100%);"
>
40
<div
class="nut-range-button-number-body"
>
40
</div>
<div
class="nut-range-button-number-arrow"
/>
</div>
</div>
</div>
Expand All @@ -45,4 +51,4 @@ exports[`range props test 1`] = `
</div>
`;

exports[`range test 1`] = `"<div><div class="nut-range-container"><div class="nut-range-min">0</div><div class="nut-range"><div class="nut-range-bar nut-range-bar-animate" style="width: 30%; left: 30%; transition: none;"><div class="nut-range-button-wrapper-left" style="transform: translate(-50%,-50%);"><div class="nut-range-button" style="transform: translate(-50%,-50%);"><div class="nut-range-button-number" style="transform: translate(-50%,-100%);">30</div></div></div><div class="nut-range-button-wrapper-right" style="transform: translate(-50%,-50%);"><div class="nut-range-button" style="transform: translate(-50%,-50%);"><div class="nut-range-button-number" style="transform: translate(-50%,-100%);">60</div></div></div></div></div><div class="nut-range-max">100</div></div></div>"`;
exports[`range test 1`] = `"<div><div class="nut-range-container"><div class="nut-range-min">0</div><div class="nut-range"><div class="nut-range-bar nut-range-bar-animate" style="width: 30%; left: 30%; transition: none;"><div class="nut-range-button-wrapper-left" style="transform: translate(-50%,-50%);"><div class="nut-range-button" style="transform: translate(-50%,-50%);"><div class="nut-range-button-number"><div class="nut-range-button-number-body">30</div><div class="nut-range-button-number-arrow"></div></div></div></div><div class="nut-range-button-wrapper-right" style="transform: translate(-50%,-50%);"><div class="nut-range-button" style="transform: translate(-50%,-50%);"><div class="nut-range-button-number"><div class="nut-range-button-number-body">60</div><div class="nut-range-button-number-arrow"></div></div></div></div></div></div><div class="nut-range-max">100</div></div></div>"`;
22 changes: 10 additions & 12 deletions src/packages/range/__test__/range.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,11 @@ test('range props test', () => {
expect(container.querySelector('.nut-range-container')).toHaveClass(
'test-range'
)
expect(container.querySelector('.nut-range-bar')).toHaveStyle({
background:
'linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%)',
})
expect(container.querySelector('.nut-range-bar')).toBeTruthy()

expect(container.querySelector('.nut-range-button-number')?.innerHTML).toBe(
'40'
)
expect(
container.querySelector('.nut-range-button-number-body')?.innerHTML
).toBe('40')

expect(container).toMatchSnapshot()
})
Expand Down Expand Up @@ -164,9 +161,9 @@ test('desc test', () => {
expect(container.querySelector('.nut-range-max')?.innerHTML).toBe(
state.maxDescription
)
expect(container.querySelector('.nut-range-button-number')?.innerHTML).toBe(
'40%'
)
expect(
container.querySelector('.nut-range-button-number-body')?.innerHTML
).toBe('40%')
})

test('range click test', () => {
Expand Down Expand Up @@ -213,7 +210,6 @@ test('range touch test', () => {
const { container } = render(<Range defaultValue={40} />)

const track = container.querySelector('.nut-range-button')
const button = container.querySelector('.nut-range-button-number')

if (track) {
fireEvent.touchStart(track, {
Expand All @@ -223,6 +219,8 @@ test('range touch test', () => {
touches: [{ clientX: 10 }],
})
fireEvent.touchEnd(track)
expect(button?.innerHTML).toBe('100')
expect(
container.querySelector('.nut-range-button-number-body')?.innerHTML
).toBe('100')
}
})
1 change: 1 addition & 0 deletions src/packages/range/demos/h5/demo10.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const Demo10 = () => {
nutuiRangeInactiveColor: 'rgba(163,184,255,1)',
nutuiRangeMargin: '20px',
nutuiRangeHeight: '6px',
nutuiRangeTickSize: '11px',
}}
>
<Range
Expand Down
9 changes: 7 additions & 2 deletions src/packages/range/demos/h5/demo11.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,18 @@ const Demo11 = () => {
<div
style={{
position: 'absolute',
width: '26px',
minWidth: '36px',
padding: '0 6px',
height: '20px',
color: 'white',
fontSize: '10px',
fontSize: '12px',
lineHeight: '18px',
textAlign: 'center',
backgroundColor: 'red',
border: '1px solid var(--nutui-color-background-overlay,#fff)',
borderRadius: '10px',
boxShadow:
'0 1px 10px 0 rgba(0, 0, 0, 0.05), 0 4px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12)',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
Expand Down
1 change: 1 addition & 0 deletions src/packages/range/demos/taro/demo10.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const Demo10 = () => {
nutuiRangeInactiveColor: 'rgba(163,184,255,1)',
nutuiRangeMargin: '20px',
nutuiRangeHeight: '6px',
nutuiRangeTickSize: '11px',
}}
>
<Range
Expand Down
11 changes: 8 additions & 3 deletions src/packages/range/demos/taro/demo11.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,14 @@ const Demo11 = () => {
style={{
position: 'absolute',
display: 'flex',
width: pxTransform(26),
minWidth: pxTransform(36),
padding: `0 ${pxTransform(6)}`,
height: pxTransform(20),
border: '1px solid var(--nutui-color-background-overlay,#fff)',
backgroundColor: 'red',
borderRadius: pxTransform(10),
boxShadow:
'0 1px 10px 0 rgba(0, 0, 0, 0.05), 0 4px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12)',
justifyContent: 'center',
top: '50%',
left: '50%',
Expand All @@ -52,15 +57,15 @@ const Demo11 = () => {
? {
height: pxTransform(18),
color: 'white',
fontSize: pxTransform(10),
fontSize: pxTransform(12),
lineHeight: 1,
textAlign: 'center',
paddingTop: pxTransform(4),
paddingBottom: pxTransform(4),
}
: {
color: 'white',
fontSize: pxTransform(10),
fontSize: pxTransform(12),
lineHeight: pxTransform(18),
textAlign: 'center',
}
Expand Down
14 changes: 8 additions & 6 deletions src/packages/range/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,13 +146,15 @@ The component provides the following CSS variables, which can be used to customi
| Name | Description | Default |
| --- | --- | --- |
| \--nutui-range-color | font color | `$color-title` |
| \--nutui-range-margin | margin | `15px` |
| \--nutui-range-margin | margin | `16px` |
| \--nutui-range-height | stroke width | `4px` |
| \--nutui-range-active-color | active color | `$color-primary` |
| \--nutui-range-inactive-color | inactive color | `#fa958c` |
| \--nutui-range-button-background | button background | `$white` |
| \--nutui-range-button-width | button width | `24px` |
| \--nutui-range-button-height | button height | `24px` |
| \--nutui-range-button-border | button border | `1px solid $color-primary` |
| \--nutui-range-disabled-color | disabled range color | `$color-primary-light-pressed` |
| \--nutui-range-inactive-color | inactive color | `$color-background-component` |
| \--nutui-range-button-background | button background | `$color-primary-text` |
| \--nutui-range-button-width | button width | `20px` |
| \--nutui-range-button-height | button height | `20px` |
| \--nutui-range-button-border | button border | `1px solid $color-border` |
| \--nutui-range-tick-size | tick dot size | `8px` |

<Contribution name="Range" />
14 changes: 8 additions & 6 deletions src/packages/range/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,13 +146,15 @@ import { Range } from '@nutui/nutui-react'
| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-range-color | 字体颜色 | `$color-title` |
| \--nutui-range-margin | 进度条外边距 | `15px` |
| \--nutui-range-margin | 进度条外边距 | `16px` |
| \--nutui-range-height | 进度条的宽度 | `4px` |
| \--nutui-range-active-color | 激活颜色 | `$color-primary` |
| \--nutui-range-inactive-color | 未激活颜色 | `#fa958c` |
| \--nutui-range-button-background | 按钮背景 | `$white` |
| \--nutui-range-button-width | 按钮宽度 | `24px` |
| \--nutui-range-button-height | 按钮高度 | `24px` |
| \--nutui-range-button-border | 按钮边框 | `1px solid $color-primary` |
| \--nutui-range-disabled-color | 禁用区间颜色 | `$color-primary-light-pressed` |
| \--nutui-range-inactive-color | 未激活颜色 | `$color-background-component` |
| \--nutui-range-button-background | 按钮背景 | `$color-primary-text` |
| \--nutui-range-button-width | 按钮宽度 | `20px` |
| \--nutui-range-button-height | 按钮高度 | `20px` |
| \--nutui-range-button-border | 按钮边框 | `1px solid $color-border` |
| \--nutui-range-tick-size | 刻度点宽高 | `8px` |

<Contribution name="Range" />
14 changes: 8 additions & 6 deletions src/packages/range/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,13 +146,15 @@ import { Range } from '@nutui/nutui-react-taro'
| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-range-color | 字体颜色 | `$color-title` |
| \--nutui-range-margin | 进度条外边距 | `15px` |
| \--nutui-range-margin | 进度条外边距 | `16px` |
| \--nutui-range-height | 进度条的宽度 | `4px` |
| \--nutui-range-active-color | 激活颜色 | `$color-primary` |
| \--nutui-range-inactive-color | 未激活颜色 | `#fa958c` |
| \--nutui-range-button-background | 按钮背景 | `$white` |
| \--nutui-range-button-width | 按钮宽度 | `24px` |
| \--nutui-range-button-height | 按钮高度 | `24px` |
| \--nutui-range-button-border | 按钮边框 | `1px solid $color-primary` |
| \--nutui-range-disabled-color | 禁用区间颜色 | `$color-primary-light-pressed` |
| \--nutui-range-inactive-color | 未激活颜色 | `$color-background-component` |
| \--nutui-range-button-background | 按钮背景 | `$color-primary-text` |
| \--nutui-range-button-width | 按钮宽度 | `20px` |
| \--nutui-range-button-height | 按钮高度 | `20px` |
| \--nutui-range-button-border | 按钮边框 | `1px solid $color-border` |
| \--nutui-range-tick-size | 刻度点宽高 | `8px` |

<Contribution name="Range" />
14 changes: 8 additions & 6 deletions src/packages/range/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,13 +146,15 @@ import { Range } from '@nutui/nutui-react'
| 名稱 | 說明 | 默認值 |
| --- | --- | --- |
| \--nutui-range-color | 字體顏色 | `$color-title` |
| \--nutui-range-margin | 進度條外邊距 | `15px` |
| \--nutui-range-margin | 進度條外邊距 | `16px` |
| \--nutui-range-height | 進度條的寬度 | `4px` |
| \--nutui-range-active-color | 激活顏色 | `$color-primary` |
| \--nutui-range-inactive-color | 未激活顏色 | `#fa958c` |
| \--nutui-range-button-background | 按鈕背景 | `$white` |
| \--nutui-range-button-width | 按鈕寬度 | `24px` |
| \--nutui-range-button-height | 按鈕高度 | `24px` |
| \--nutui-range-button-border | 按鈕邊框 | `1px solid $color-primary` |
| \--nutui-range-disabled-color | 禁用區間顏色 | `$color-primary-light-pressed` |
| \--nutui-range-inactive-color | 未激活顏色 | `$color-background-component` |
| \--nutui-range-button-background | 按鈕背景 | `$color-primary-text` |
| \--nutui-range-button-width | 按鈕寬度 | `20px` |
| \--nutui-range-button-height | 按鈕高度 | `20px` |
| \--nutui-range-button-border | 按鈕邊框 | `1px solid $color-border` |
| \--nutui-range-tick-size | 刻度點寬高 | `8px` |

<Contribution name="Range" />
Loading
Loading