feat(price): v15 (#2885)

* fix: 解决微信小程序滚动报错问题 * fix(countup): 分隔符文字颜色支持css变量修改 * feat(price): v15 * fix: demo和文档更新 * fix: update test * fix: update type * fix: update test * chore: update sologn * fix: update doc * fix: update test * fix: update card test * fix: props type修改为color
jdf2e · Dec 27, 2024 · a91e0e2 · a91e0e2
1 parent c3cb26b
commit a91e0e2
Show file tree

Hide file tree

Showing 42 changed files with 588 additions and 268 deletions.
diff --git a/migrate-from-v2.md b/migrate-from-v2.md
@@ -729,9 +729,8 @@ plugins: [
 
 #### Price
 
-- `decimalDigits` 重命名为 `digits`
-- 移除 `needSymbol`，通过 `symbol` 判断是否需要加上 symbol 符号
-- 新增 `line`，是否展示划线价
+- 修改 `size`，增加 'xlarge' 尺寸
+- 新增 `color`, 价格类型
 
 #### Progress
 

diff --git a/src/config.json b/src/config.json
@@ -1084,6 +1084,7 @@
           "sort": 4,
           "show": true,
           "taro": true,
+          "v15": true,
           "author": "songsong"
         },
         {

diff --git a/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap b/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap
@@ -44,7 +44,7 @@ exports[`description slot test 1`] = `
         class="nut-card-right-price"
       >
         <div
-          class="nut-price  "
+          class="nut-price nut-price-primary "
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -68,7 +68,7 @@ exports[`description slot test 1`] = `
           </div>
         </div>
         <div
-          class="nut-price  nut-card-right-price-origin"
+          class="nut-price nut-price-primary nut-card-right-price-origin"
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -153,7 +153,7 @@ exports[`extra slot test 1`] = `
         class="nut-card-right-price"
       >
         <div
-          class="nut-price  "
+          class="nut-price nut-price-primary "
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -177,7 +177,7 @@ exports[`extra slot test 1`] = `
           </div>
         </div>
         <div
-          class="nut-price  nut-card-right-price-origin"
+          class="nut-price nut-price-primary nut-card-right-price-origin"
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -267,7 +267,7 @@ exports[`priceTag slot test 1`] = `
         class="nut-card-right-price"
       >
         <div
-          class="nut-price  "
+          class="nut-price nut-price-primary "
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -356,7 +356,7 @@ exports[`props test 1`] = `
         class="nut-card-right-price"
       >
         <div
-          class="nut-price  "
+          class="nut-price nut-price-primary "
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -380,7 +380,7 @@ exports[`props test 1`] = `
           </div>
         </div>
         <div
-          class="nut-price  nut-card-right-price-origin"
+          class="nut-price nut-price-primary nut-card-right-price-origin"
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -465,7 +465,7 @@ exports[`tag slot test 1`] = `
         class="nut-card-right-price"
       >
         <div
-          class="nut-price  "
+          class="nut-price nut-price-primary "
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"
@@ -489,7 +489,7 @@ exports[`tag slot test 1`] = `
           </div>
         </div>
         <div
-          class="nut-price  nut-card-right-price-origin"
+          class="nut-price nut-price-primary nut-card-right-price-origin"
         >
           <div
             class="nut-price-symbol nut-price-symbol-normal"

diff --git a/src/packages/cell/cell.taro.tsx b/src/packages/cell/cell.taro.tsx
@@ -1,20 +1,14 @@
-import React, { FunctionComponent, ReactNode, useContext } from 'react'
+import React, { FunctionComponent, useContext } from 'react'
 import classNames from 'classnames'
 import { ITouchEvent, View } from '@tarojs/components'
-import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { ComponentDefaults } from '@/utils/typings'
 import { CellGroup } from '@/packages/cellgroup/cellgroup.taro'
 import CellGroupContext from '@/packages/cellgroup/context'
 import { useRtl } from '@/packages/configprovider/index.taro'
 import pxTransform from '@/utils/px-transform'
+import { CellProps } from './types'
 
-export interface CellProps extends BasicComponent {
-  title: ReactNode
-  description: ReactNode
-  extra: ReactNode
-  radius: string | number
-  align: 'flex-start' | 'center' | 'flex-end'
-  clickable: boolean
-  isLast: boolean
+interface CellTaroProps extends CellProps {
   onClick: (
     event: React.MouseEvent<HTMLDivElement, MouseEvent> | ITouchEvent
   ) => void
@@ -32,12 +26,12 @@ const defaultProps = {
   onClick: (
     event: React.MouseEvent<HTMLDivElement, MouseEvent> | ITouchEvent
   ) => {},
-} as CellProps
+} as CellTaroProps
 
 const classPrefix = 'nut-cell'
 
 export const Cell: FunctionComponent<
-  Partial<CellProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
+  Partial<CellTaroProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
 > & { Group: typeof CellGroup } = (props) => {
   const ctx = useContext(CellGroupContext)
   const {

diff --git a/src/packages/cell/cell.tsx b/src/packages/cell/cell.tsx
@@ -1,20 +1,10 @@
-import React, { FunctionComponent, ReactNode, useContext } from 'react'
+import React, { FunctionComponent, useContext } from 'react'
 import classNames from 'classnames'
-import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { ComponentDefaults } from '@/utils/typings'
 import CellGroup from '@/packages/cellgroup'
 import CellGroupContext from '@/packages/cellgroup/context'
 import { useRtl } from '@/packages/configprovider'
-
-export interface CellProps extends BasicComponent {
-  title: ReactNode
-  description: ReactNode
-  extra: ReactNode
-  radius: string | number
-  align: 'flex-start' | 'center' | 'flex-end'
-  clickable: boolean
-  isLast: boolean
-  onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
-}
+import { CellProps } from './types'
 
 const defaultProps = {
   ...ComponentDefaults,

diff --git a/src/packages/cell/index.taro.ts b/src/packages/cell/index.taro.ts
@@ -1,4 +1,4 @@
 import { Cell } from './cell.taro'
 
-export type { CellProps } from './cell.taro'
+export type { CellProps, CellAlign } from './types'
 export default Cell
diff --git a/src/packages/cell/index.ts b/src/packages/cell/index.ts
@@ -1,4 +1,4 @@
 import { Cell } from './cell'
 
-export type { CellProps } from './cell'
+export type { CellProps, CellAlign } from './types'
 export default Cell
diff --git a/src/packages/cell/types.ts b/src/packages/cell/types.ts
@@ -0,0 +1,14 @@
+import { BasicComponent } from '@/utils/typings'
+
+export type CellAlign = 'flex-start' | 'center' | 'flex-end' | 'baseline'
+
+export interface CellProps extends BasicComponent {
+  title: React.ReactNode
+  description: React.ReactNode
+  extra: React.ReactNode
+  radius: string | number
+  align: CellAlign
+  clickable: boolean
+  isLast: boolean
+  onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+}
diff --git a/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap b/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap
@@ -3,25 +3,25 @@
 exports[`props digits test 1`] = `
 <div>
   <div
-    class="nut-price  "
+    class="nut-price nut-price-primary "
   >
     <div
-      class="nut-price-symbol nut-price-symbol-large"
+      class="nut-price-symbol nut-price-symbol-normal"
     >
       ¥
     </div>
     <div
-      class="nut-price-integer nut-price-integer-large "
+      class="nut-price-integer nut-price-integer-normal "
     >
       15213
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       .
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       122
     </div>
@@ -32,25 +32,25 @@ exports[`props digits test 1`] = `
 exports[`props symbol test 1`] = `
 <div>
   <div
-    class="nut-price  "
+    class="nut-price nut-price-primary "
   >
     <div
-      class="nut-price-symbol nut-price-symbol-large"
+      class="nut-price-symbol nut-price-symbol-normal"
     >
       $
     </div>
     <div
-      class="nut-price-integer nut-price-integer-large "
+      class="nut-price-integer nut-price-integer-normal "
     >
       10010
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       .
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       00
     </div>
@@ -61,20 +61,68 @@ exports[`props symbol test 1`] = `
 exports[`props test 1`] = `
 <div>
   <div
-    class="nut-price  "
+    class="nut-price nut-price-primary "
   >
     <div
-      class="nut-price-integer nut-price-integer-large "
+      class="nut-price-integer nut-price-integer-normal "
     >
       1,010
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       .
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
+    >
+      00
+    </div>
+  </div>
+</div>
+`;
+
+exports[`props test 2`] = `
+<div>
+  <div
+    class="nut-price nut-price-primary "
+  >
+    <div
+      class="nut-price-integer nut-price-integer-normal "
+    >
+      1,010
+    </div>
+    <div
+      class="nut-price-decimal nut-price-decimal-normal "
+    >
+      .
+    </div>
+    <div
+      class="nut-price-decimal nut-price-decimal-normal "
+    >
+      00
+    </div>
+  </div>
+</div>
+`;
+
+exports[`props test 3`] = `
+<div>
+  <div
+    class="nut-price nut-price-primary "
+  >
+    <div
+      class="nut-price-integer nut-price-integer-normal "
+    >
+      1,010
+    </div>
+    <div
+      class="nut-price-decimal nut-price-decimal-normal "
+    >
+      .
+    </div>
+    <div
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       00
     </div>
@@ -85,28 +133,52 @@ exports[`props test 1`] = `
 exports[`props thousands test 1`] = `
 <div>
   <div
-    class="nut-price  "
+    class="nut-price nut-price-primary "
   >
     <div
-      class="nut-price-symbol nut-price-symbol-large"
+      class="nut-price-symbol nut-price-symbol-normal"
     >
       $
     </div>
     <div
-      class="nut-price-integer nut-price-integer-large "
+      class="nut-price-integer nut-price-integer-normal "
     >
       10010
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       .
     </div>
     <div
-      class="nut-price-decimal nut-price-decimal-large "
+      class="nut-price-decimal nut-price-decimal-normal "
     >
       01
     </div>
   </div>
 </div>
 `;
+
+exports[`props type 1`] = `
+<div>
+  <div
+    class="nut-price nut-price-primary "
+  >
+    <div
+      class="nut-price-integer nut-price-integer-normal "
+    >
+      1,010
+    </div>
+    <div
+      class="nut-price-decimal nut-price-decimal-normal "
+    >
+      .
+    </div>
+    <div
+      class="nut-price-decimal nut-price-decimal-normal "
+    >
+      00
+    </div>
+  </div>
+</div>
+`;