feat(v14): pagination (#2752)

* feat(v14): pagination * feat(v14): pagination * chore: delete rn * chore: delete rn * chore: delete rn
jdf2e · Nov 14, 2024 · 45b0dac · 45b0dac
1 parent 9d0b4b2
commit 45b0dac
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 65 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -30,7 +30,7 @@ jobs:
         run: pnpm install
 
       - name: Run linter
-        run: npm run lint
+        run: pnpm lint
 
   test:
     if: ${{ github.event_name == 'pull_request' }}
@@ -50,7 +50,7 @@ jobs:
         run: pnpm install
 
       - name: Run test
-        run: npm run test
+        run: pnpm test
 
       - name: Upload coverage reports to Codecov
         if: ${{ always() }}
@@ -76,17 +76,17 @@ jobs:
         run: pnpm install
 
       - name: Build NutUI-React
-        run: npm run build
+        run: pnpm build
 
       - name: Build NutUI-React-Taro
-        run: npm run build:taro
+        run: pnpm build:taro
 
       - name: Build NutUI-React Demo
-        run: npm run build:site
+        run: pnpm build:site
 
       - name: Build NutUI-React Taro H5 Demo
         if: github.ref == 'refs/heads/next'
-        run: npm run build:taro:site
+        run: pnpm build:taro:site
   add-label:
     if: ${{ github.event_name == 'pull_request_target' }}
     runs-on: ubuntu-latest

diff --git a/gulpfile.js b/gulpfile.js
@@ -42,11 +42,11 @@ gulp.task('watch', () => {
       interval,
       gulp.series(`${argv}copyTaro`)
     )
-    gulp.watch(
-      `src/packages/${argv}/${argv}.rn.tsx`,
-      interval,
-      gulp.series(`${argv}copyRN`)
-    )
+    // gulp.watch(
+    //   `src/packages/${argv}/${argv}.rn.tsx`,
+    //   interval,
+    //   gulp.series(`${argv}copyRN`)
+    // )
   })
   const watchTasks = []
   // eslint-disable-next-line array-callback-return
@@ -121,10 +121,10 @@ argvs.forEach((argv) => {
       .pipe(insert.prepend(`import "./${argv}.harmony.css";\n`))
       .pipe(gulp.dest(`${targetBaseUrl}/`))
   })
-  gulp.task(`${argv}copyRN`, () => {
-    return gulp
-      .src(`src/packages/${argv}/${argv}.rn.tsx`)
-      .pipe(insert.prepend(`import "./${argv}.harmony.css";\n`))
-      .pipe(gulp.dest(`${targetBaseUrl}/`))
-  })
+  // gulp.task(`${argv}copyRN`, () => {
+  //   return gulp
+  //     .src(`src/packages/${argv}/${argv}.rn.tsx`)
+  //     .pipe(insert.prepend(`import "./${argv}.harmony.css";\n`))
+  //     .pipe(gulp.dest(`${targetBaseUrl}/`))
+  // })
 })
diff --git a/packages/nutui-taro-demo/scripts/taro/generate-nutui-taro.js b/packages/nutui-taro-demo/scripts/taro/generate-nutui-taro.js
@@ -57,18 +57,18 @@ fs.outputFile(
   }
 )
 
-let fileRNStr = `${importRNStr}
-${importScssStr}
-export { ${packages.join(',')} };`
-fs.outputFile(
-  path.resolve(__dirname, '../../nutui-react/packages/nutui.react.rn.ts'),
-  fileRNStr,
-  'utf8',
-  (error) => {
-    if (error) throw error
-  }
-)
-
+// let fileRNStr = `${importRNStr}
+// ${importScssStr}
+// export { ${packages.join(',')} };`
+// fs.outputFile(
+//   path.resolve(__dirname, '../../nutui-react/packages/nutui.react.rn.ts'),
+//   fileRNStr,
+//   'utf8',
+//   (error) => {
+//     if (error) throw error
+//   }
+// )
+//
 let taroScssfileStr = `
 ${importScssStr}
 export default { "NutUI":"NutUI-Taro" };`

diff --git a/scripts/taro/generate-nutui-taro.js b/scripts/taro/generate-nutui-taro.js
@@ -69,29 +69,29 @@ fs.outputFile(
 )
 
 
-let fileRNStrBuild = `${importRNStr}
-export { ${packages.join(',')} };`
-
-fs.outputFile(
-  path.resolve(__dirname, '../../src/packages/nutui.react.build.rn.ts'),
-  fileRNStrBuild,
-  'utf8',
-  (error) => {
-    if (error) throw error
-  }
-)
+// let fileRNStrBuild = `${importRNStr}
+// export { ${packages.join(',')} };`
+//
+// fs.outputFile(
+//   path.resolve(__dirname, '../../src/packages/nutui.react.build.rn.ts'),
+//   fileRNStrBuild,
+//   'utf8',
+//   (error) => {
+//     if (error) throw error
+//   }
+// )
 
-let fileRNStr = `${importRNStr}
-${importScssStr}
-export { ${packages.join(',')} };`
-fs.outputFile(
-  path.resolve(__dirname, '../../src/packages/nutui.react.rn.ts'),
-  fileRNStr,
-  'utf8',
-  (error) => {
-    if (error) throw error
-  }
-)
+// let fileRNStr = `${importRNStr}
+// ${importScssStr}
+// export { ${packages.join(',')} };`
+// fs.outputFile(
+//   path.resolve(__dirname, '../../src/packages/nutui.react.rn.ts'),
+//   fileRNStr,
+//   'utf8',
+//   (error) => {
+//     if (error) throw error
+//   }
+// )
 
 let taroScssfileStr = `
 ${importScssStr}

diff --git a/src/config.json b/src/config.json
@@ -1031,6 +1031,7 @@
           "sort": 6,
           "show": true,
           "taro": true,
+          "v14": true,
           "author": "lkjh3214"
         },
         {

diff --git a/src/packages/pagination/pagination.scss b/src/packages/pagination/pagination.scss
@@ -67,29 +67,23 @@
 }
 
 .nut-pagination-lite {
-  width: $pagination-lite-width;
   height: $pagination-lite-height;
+  padding: 0 $spacing-xs;
   display: flex;
   flex-direction: row;
+  align-items: center;
   color: $color-primary-text;
   background-color: $pagination-lite-background-color;
   border-radius: $pagination-lite-radius;
 }
 
 .nut-pagination-lite-active,
 .nut-pagination-lite-default {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: $pagination-lite-height;
-  height: $pagination-lite-height;
-  font-size: $font-size-s;
+  font-size: $font-size-xs;
   color: $pagination-lite-color;
-  font-weight: 400;
 }
 
-.nut-pagination-lite-active {
-  border-radius: $pagination-lite-radius;
-  font-size: $font-size-s;
-  background-color: $pagination-lite-active-background-color;
+.nut-pagination-lite-spliterator {
+  font-size: $font-size-xs;
+  color: $pagination-lite-color;
 }
diff --git a/src/packages/pagination/pagination.taro.tsx b/src/packages/pagination/pagination.taro.tsx
@@ -161,6 +161,7 @@ export const Pagination: FunctionComponent<
       {mode === 'lite' && (
         <View className={`${classPrefix}-lite`}>
           <View className={`${classPrefix}-lite-active`}>{currentPage}</View>
+          <View className={`${classPrefix}-lite-spliterator`}>/</View>
           <View className={`${classPrefix}-lite-default`}>{pageCount}</View>
         </View>
       )}

diff --git a/src/packages/pagination/pagination.tsx b/src/packages/pagination/pagination.tsx
@@ -160,6 +160,7 @@ export const Pagination: FunctionComponent<
       {mode === 'lite' && (
         <div className={`${classPrefix}-lite`}>
           <div className={`${classPrefix}-lite-active`}>{currentPage}</div>
+          <div className={`${classPrefix}-lite-spliterator`}>/</div>
           <div className={`${classPrefix}-lite-default`}>{pageCount}</div>
         </div>
       )}

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -1697,10 +1697,13 @@ $pagination-prev-next-padding: var(
 ) !default;
 $pagination-lite-width: var(--nutui-pagination-lite-width, 40px) !default;
 $pagination-lite-height: var(--nutui-pagination-lite-height, 20px) !default;
-$pagination-lite-radius: var(--nutui-pagination-lite-radius, 6px) !default;
+$pagination-lite-radius: var(
+  --nutui-pagination-lite-radius,
+  $radius-xs
+) !default;
 $pagination-lite-background-color: var(
   --nutui-pagination-lite-background-color,
-  var(--nutui-black-7)
+  rgba(0, 0, 0, 0.45)
 ) !default;
 $pagination-lite-active-background-color: var(
   --nutui-pagination-lite-active-background-color,