feat: indicator基础升级完成

src/packages/indicator/__test__/indicator.spec.tsx

@@ -33,17 +33,6 @@ test('should be shown when custom node', () => {
   expect(container.querySelectorAll('.nut-indicator-dot')).toHaveLength(5)
 })
 
-test('should be shown when custom node', () => {
-  const { container } = render(
-    <Cell>
-      <Indicator total={6} current={5}>
-        <div className="number">{5}</div>
-      </Indicator>
-    </Cell>
-  )
-  expect(container.querySelectorAll('.nut-indicator-dot')).toHaveLength(5)
-})
-
 test('should be shown when slide', () => {
   const { container } = render(
     <Cell>
@@ -54,3 +43,71 @@ test('should be shown when slide', () => {
     1
   )
 })
+
+test('should render dualScreen type with fixed-width', () => {
+  const { container } = render(
+    <Indicator type="dualScreen" total={2} current={0} />
+  )
+  expect(
+    container.querySelector('.nut-indicator-fixed-width')
+  ).toBeInTheDocument()
+  expect(container.querySelectorAll('.nut-indicator-dot')).toHaveLength(2)
+})
+
+test('should render white color variant', () => {
+  const { container } = render(
+    <Indicator total={3} current={1} color="default" />
+  )
+  expect(container.querySelector('.nut-indicator-white')).toBeInTheDocument()
+})
+
+test('should render vertical direction', () => {
+  const { container } = render(
+    <Indicator total={3} current={1} direction="vertical" />
+  )
+  expect(container.querySelector('.nut-indicator-vertical')).toBeInTheDocument()
+})
+
+test('should render placement outside', () => {
+  const { container } = render(
+    <Indicator total={3} current={1} placement="outside" />
+  )
+  expect(container.querySelector('.nut-indicator-outside')).toBeInTheDocument()
+})
+
+test('should render placement inside-top-right', () => {
+  const { container } = render(
+    <Indicator total={3} current={1} placement="inside-top-right" />
+  )
+  expect(
+    container.querySelector('.nut-indicator-inside-top-right')
+  ).toBeInTheDocument()
+})
+
+test('should render placement inside-bottom-center', () => {
+  const { container } = render(
+    <Indicator total={3} current={1} placement="inside-bottom-center" />
+  )
+  expect(
+    container.querySelector('.nut-indicator-inside-bottom-center')
+  ).toBeInTheDocument()
+})
+
+test('should render placement inside-bottom-left', () => {
+  const { container } = render(
+    <Indicator total={3} current={1} placement="inside-bottom-left" />
+  )
+  expect(
+    container.querySelector('.nut-indicator-inside-bottom-left')
+  ).toBeInTheDocument()
+})
+
+test('slide type should set CSS custom properties for transform', () => {
+  const { container } = render(<Indicator type="slide" total={3} current={1} />)
+  const line = container.querySelector(
+    '.nut-indicator-line-active'
+  ) as HTMLElement
+  expect(line).toBeInTheDocument()
+  expect(line.style.getPropertyValue('--nutui-indicator-current')).toBe('1')
+  expect(line.style.getPropertyValue('--nutui-indicator-total')).toBe('3')
+})

src/packages/indicator/demo.taro.tsx

@@ -9,6 +9,7 @@ import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
+import Demo7 from './demos/taro/demo7'
 
 const IndicatorDemo = () => {
   const [translated] = useTranslate({
@@ -19,6 +20,7 @@ const IndicatorDemo = () => {
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '竖向展示',
+      placement: '定位布局',
     },
     'zh-TW': {
       basic: '基礎用法',
@@ -27,6 +29,7 @@ const IndicatorDemo = () => {
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '豎向展示',
+      placement: '定位佈局',
     },
     'en-US': {
       basic: 'Basic usage',
@@ -35,6 +38,7 @@ const IndicatorDemo = () => {
       customNode: 'Custom Node',
       custom: 'Custom',
       vertical: 'Vertical display',
+      placement: 'Placement',
     },
   })
 
@@ -54,6 +58,8 @@ const IndicatorDemo = () => {
         <Demo3 />
         <View className="h2">{translated.vertical}</View>
         <Demo4 />
+        <View className="h2">{translated.placement}</View>
+        <Demo7 />
       </ScrollView>
     </>
   )

src/packages/indicator/demo.tsx

@@ -6,6 +6,7 @@ import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
 import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
+import Demo7 from './demos/h5/demo7'
 
 const IndicatorDemo = () => {
   const [translated] = useTranslate({
@@ -16,6 +17,7 @@ const IndicatorDemo = () => {
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '竖向展示',
+      placement: '定位布局',
     },
     'zh-TW': {
       basic: '基礎用法',
@@ -24,6 +26,7 @@ const IndicatorDemo = () => {
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '豎向展示',
+      placement: '定位佈局',
     },
     'en-US': {
       basic: 'Basic usage',
@@ -32,6 +35,7 @@ const IndicatorDemo = () => {
       customNode: 'Custom Node',
       custom: 'Custom',
       vertical: 'Vertical display',
+      placement: 'Placement',
     },
   })
 
@@ -55,6 +59,9 @@ const IndicatorDemo = () => {
 
         <h2>{translated.vertical}</h2>
         <Demo4 />
+
+        <h2>{translated.placement}</h2>
+        <Demo7 />
       </div>
     </>
   )

src/packages/indicator/demos/h5/demo7.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Indicator } from '@nutui/nutui-react'
+
+const Demo7 = () => {
+  const containerStyle: React.CSSProperties = {
+    position: 'relative',
+    width: '100%',
+    height: '120px',
+    background: 'var(--nutui-color-background-overlay, #f5f5f5)',
+    borderRadius: '8px',
+    marginBottom: '12px',
+  }
+  return (
+    <>
+      <div style={{ marginBottom: '20px' }}>
+        <div style={containerStyle} />
+        <Indicator total={4} current={1} placement="outside" />
+      </div>
+      <div style={{ position: 'relative', ...containerStyle }}>
+        <Indicator total={4} current={2} placement="inside-top-right" />
+      </div>
+      <div style={{ position: 'relative', ...containerStyle }}>
+        <Indicator total={4} current={0} placement="inside-bottom-center" />
+      </div>
+      <div style={{ position: 'relative', ...containerStyle }}>
+        <Indicator total={4} current={3} placement="inside-bottom-left" />
+      </div>
+    </>
+  )
+}
+export default Demo7

src/packages/indicator/demos/taro/demo7.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import { Indicator } from '@nutui/nutui-react-taro'
+
+const Demo7 = () => {
+  const containerStyle: React.CSSProperties = {
+    position: 'relative',
+    width: '100%',
+    height: '120px',
+    background: 'var(--nutui-color-background-overlay, #f5f5f5)',
+    borderRadius: '8px',
+    marginBottom: '12px',
+  }
+  return (
+    <>
+      <View style={{ marginBottom: '20px' }}>
+        <View style={containerStyle} />
+        <Indicator total={4} current={1} placement="outside" />
+      </View>
+      <View style={{ position: 'relative', ...containerStyle }}>
+        <Indicator total={4} current={2} placement="inside-top-right" />
+      </View>
+      <View style={{ position: 'relative', ...containerStyle }}>
+        <Indicator total={4} current={0} placement="inside-bottom-center" />
+      </View>
+      <View style={{ position: 'relative', ...containerStyle }}>
+        <Indicator total={4} current={3} placement="inside-bottom-left" />
+      </View>
+    </>
+  )
+}
+export default Demo7

src/packages/indicator/doc.en-US.md

@@ -28,6 +28,8 @@ import { Indicator } from '@nutui/nutui-react'
 
 ### Type
 
+Supports three types: anchor indicator (anchor, 2-6 pages), slide indicator (slide, 2-11 pages), dual-screen indicator (dualScreen, fixed 2 pages).
+
 :::demo
 
 <CodeBlock src='h5/demo6.tsx'></CodeBlock>
@@ -58,17 +60,28 @@ import { Indicator } from '@nutui/nutui-react'
 
 :::
 
+### Placement
+
+Supports placing the indicator outside or inside the content module at different positions. For inside placement (inside-\*), the parent container must have `position: relative`.
+
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
 ## Indicator
 
 ### Props
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | current | current step | `number` | `0` |
-| total | step total size | `number` | `3` |
-| direction | display directory,default is horizontal | `horizontal` \| `vertical` | `horizontal` |
+| total | step total size | `number` | `2` |
+| direction | display directory, default is horizontal | `horizontal` \| `vertical` | `horizontal` |
 | color | color | `primary` \| `default` | `primary` |
-| type | interactivity Type | `anchor` \| `slide`\| `dualScreen` | `anchor` |
+| type | interactivity type | `anchor` \| `slide`\| `dualScreen` | `anchor` |
+| placement | placement layout | `outside` \| `inside-top-right` \| `inside-bottom-center` \| `inside-bottom-left` | `-` |
 
 ## Theming
 
@@ -79,10 +92,17 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Description | Default Value |
 | --- | --- | --- |
 | \--nutui-indicator-color | indicator active color | `$color-primary` |
-| \--nutui-indicator-dot-color | indicator default color | `$color-text-disabled` |
-| \--nutui-indicator-dot-size | indicator dot size | `3px` |
-| \--nutui-indicator-dot-active-size | indicator dot active size | `6px` |
+| \--nutui-indicator-dot-color | indicator default color | `$color-border` |
+| \--nutui-indicator-dot-size | indicator dot size | `4px` |
+| \--nutui-indicator-dot-active-size | indicator dot active size | `8px` |
 | \--nutui-indicator-border-radius | indicator active border size | `$radius-xxs` |
-| \--nutui-indicator-dot-margin | when horizontal, indicator margin | `$spacing-xxxs` |
+| \--nutui-indicator-dot-margin | when horizontal, indicator margin | `$spacing-xxs` |
+| \--nutui-indicator-dot-border | indicator inner border | `0.33px solid $color-border` |
+| \--nutui-indicator-dot-inactive-color | indicator inactive fill color | `var(--nutui-color-background-component, #f0f2f7)` |
+| \--nutui-indicator-track-width | slide indicator track width | `24px` |
+| \--nutui-indicator-slider-width | slide indicator slider width | `8px` |
+| \--nutui-indicator-dual-screen-inactive-width | dual-screen indicator inactive width | `16px` |
+| \--nutui-indicator-placement-gap | placement gap to content | `8px` |
+| \--nutui-indicator-placement-safe-gap | outside placement safe gap below | `12px` |
 
 <Contribution name="Indicator" />

src/packages/indicator/doc.md

@@ -28,6 +28,8 @@ import { Indicator } from '@nutui/nutui-react'
 
 ### 类型
 
+支持三种类型：锚点指示器（anchor，2-6页）、滑动指示器（slide，2-11页）、双屏指示器（dualScreen，固定2页）。
+
 :::demo
 
 <CodeBlock src='h5/demo6.tsx'></CodeBlock>
@@ -58,6 +60,16 @@ import { Indicator } from '@nutui/nutui-react'
 
 :::
 
+### 定位布局
+
+支持将指示器放置在内容模块外部或内部的不同位置。内部定位（inside-\*）时需要父容器设置 `position: relative`。
+
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
 ## Indicator
 
 ### Props
@@ -69,6 +81,7 @@ import { Indicator } from '@nutui/nutui-react'
 | direction | 方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
 | color | 颜色 | `primary` \| `default` | `primary` |
 | type | 交互类型 | `anchor` \| `slide`\| `dualScreen` | `anchor` |
+| placement | 定位布局 | `outside` \| `inside-top-right` \| `inside-bottom-center` \| `inside-bottom-left` | `-` |
 
 ## 主题定制
 
@@ -79,10 +92,17 @@ import { Indicator } from '@nutui/nutui-react'
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-indicator-color | 指示器焦点时色值 | `$color-primary` |
-| \--nutui-indicator-dot-color | 指示器默认色值 | `$color-text-disabled` |
-| \--nutui-indicator-dot-size | 指示器尺寸 | `3px` |
-| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `6px` |
+| \--nutui-indicator-dot-color | 指示器默认色值 | `$color-border` |
+| \--nutui-indicator-dot-size | 指示器尺寸 | `4px` |
+| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `8px` |
 | \--nutui-indicator-border-radius | 指示器焦点时的border值 | `$radius-xxs` |
-| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `$spacing-xxxs` |
+| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `$spacing-xxs` |
+| \--nutui-indicator-dot-border | 指示器内描边 | `0.33px solid $color-border` |
+| \--nutui-indicator-dot-inactive-color | 指示器非焦点时的填充色 | `var(--nutui-color-background-component, #f0f2f7)` |
+| \--nutui-indicator-track-width | 滑动指示器轨道宽度 | `24px` |
+| \--nutui-indicator-slider-width | 滑动指示器滑块宽度 | `8px` |
+| \--nutui-indicator-dual-screen-inactive-width | 双屏指示器非焦点时宽度 | `16px` |
+| \--nutui-indicator-placement-gap | 定位布局与内容的间距 | `8px` |
+| \--nutui-indicator-placement-safe-gap | 外部定位时与下方模块的安全间距 | `12px` |
 
 <Contribution name="Indicator" />