Merge branch 'main' into docs

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['plugin:markdown/recommended', 'prettier'],
+  extends: ['plugin:markdown/recommended-legacy', 'prettier'],
   overrides: [
     {
       files: '*.mjs',
@@ -39,7 +39,7 @@ module.exports = {
     },
     {
       files: ['*.ts', '*.tsx'],
-      extends: ['standard-with-typescript', 'plugin:import/typescript'],
+      extends: ['love', 'plugin:import/typescript'],
       parserOptions: {
         project: './tsconfig.json',
         ecmaFeatures: {

.gitignore

@@ -12,6 +12,7 @@ yarn.lock
 .DS_Store
 .vscode
 .idea
+.pulsar
 *.swp
 *.tgz
 coverage

CHANGELOG.en-US.md

@@ -1,5 +1,50 @@
 # CHANGELOG
 
+## 2.38.2
+
+`2024-05-03`
+
+### Fixes
+
+- Fix `n-menu` Submenu's wai-aria role is not correct, closes [#5729](https://github.com/tusen-ai/naive-ui/issues/5729).
+- Fix `n-tabs` style bug with type is `segment`，closes [#5728](https://github.com/tusen-ai/naive-ui/issues/5728).
+- Fix the get\*String() methods for UTC/locale mismatch, closes [#5702](closes https://github.com/tusen-ai/naive-ui/issues/5702).
+- Fix `n-dialog` / `n-modal` calling `destroy` method may throw error.
+- Fix `useModal` setting `card` preset without corresponding props in `n-card` slots, closes [#5746](https://github.com/tusen-ai/naive-ui/issues/5746).
+- Fix `Submenu` component's wai-aria role setting error of `n-menu`，closes [#5729](https://github.com/tusen-ai/naive-ui/issues/5729).
+- Fix the `common` type error in the `theme-overrides` prop when modifying components' themes.
+- Fix `n-split` may emit value less than `0`.
+
+### Features
+
+- `n-watermark` support multi-lines in content.
+- Adds `n-infinite-scroll` component.
+- `n-watermark` adds `text-align` prop.
+- `n-qr-code` adds `type` prop, Customize rendering output by setting `type`, providing two options: `canvas` and `svg`.
+- `n-card` adds `action`, `content`, `cover`, `footer` and `header-extra` props.
+- `n-card`'s `title` prop supports render function.
+- `n-upload` expose the `index` arg in `on-remove` function, closes [#5747](https://github.com/tusen-ai/naive-ui/issues/5747).
+- `n-upload` exports `UploadOnDownload`, `UploadOnRemove`, `UploadOnFinish` and `UploadOnChange` types.
+- `n-dialog` adds `action-class`, `action-style`, `content-class`, `content-style`, `title-class` and `title-style` props.
+- `n-split` adds `pane1-class`, `pane1-style`, `pane2-class` and `pane2-style` props.
+- `n-mention` adds `filter` method, closes [#5721](https://github.com/tusen-ai/naive-ui/pull/5721).
+- `n-slider` adds wai-aria support.
+- `n-date-picker` adds `time-picker-format` prop.
+- `n-form-item` adds `feedback-class` and `feedback-style` props.
+- `n-split` supports using pixel unit string as `value`.
+- `n-scrollbar` adds `content-style` and `content-class` props, closes [#4497](https://github.com/tusen-ai/naive-ui/issues/4497).
+- `n-image` adds `render-toolbar` prop.
+- `n-cascader` adds `get-column-style` prop.
+- `n-cascader` adds `get-render-prefix` prop.
+- `n-cascader` adds `get-render-suffix` prop.
+- `n-image` optimizes download icon style.
+- `n-scrollbar` adds `height`, `width`, `radius`, `railInsetHorizontal`, `railInsetVertical` and `railColor` theme variables.
+
+### i18n
+
+- Add csCZ locale.
+- Add missing itIT locale translations
+
 ## 2.38.1
 
 `2024-02-26`

CHANGELOG.zh-CN.md

@@ -1,5 +1,49 @@
 # CHANGELOG
 
+## 2.38.2
+
+`2024-05-03`
+
+### Fixes
+
+- 修复 `n-menu` 中 Submenu 组件的 wai-aria role 设置错误，关闭 [#5729](https://github.com/tusen-ai/naive-ui/issues/5729)
+- 修复 `n-tabs` type 为 `segment` 时样式存在问题，关闭 [#5728](https://github.com/tusen-ai/naive-ui/issues/5728)
+- 修复 get\*String() 方法中 UTC/区域设置不匹配的问题，关闭 [#5702](https://github.com/tusen-ai/naive-ui/issues/5702)
+- 修复 `n-dialog` / `n-modal` 调用 `destroy` 方法时可能会报错
+- 修复 `useModal` 设置 `card` 预设时 `n-card` 插槽缺少相应属性，关闭 [#5746](https://github.com/tusen-ai/naive-ui/issues/5746)
+- 修复组件调整主题时 `theme-overrides` 属性中的 `common` 类型报错
+- 修复 `n-split` 可能产生小与 `0` 的值
+
+### Features
+
+- `n-watermark` 支持多行文本
+- 新增 `n-infinite-scroll` 组件
+- `n-watermark` 新增 `text-align` 属性
+- `n-qr-code` 新增 `type` 属性，设置 `type` 自定义渲染结果，提供 `canvas` 和 `svg` 两个选项
+- `n-card` 新增 `action`、`content`、`cover`、`footer`、`header-extra` 属性
+- `n-card` 的 `title` 属性支持渲染函数
+- `n-upload` 导出 `on-remove` 方法的 `index` 属性，关闭 [#5747](https://github.com/tusen-ai/naive-ui/issues/5747)
+- `n-upload` 导出 `UploadOnDownload`、`UploadOnRemove`、`UploadOnFinish` 和 `UploadOnChange` 类型
+- `n-dialog` 新增 `action-class`、`action-style`、`content-class`、`content-style`、`title-class` 和 `title-style` 属性
+- `n-split` 新增 `pane1-class`、`pane1-style`、`pane2-class` 和 `pane2-style` 属性
+- `n-mention` 新增 `filter` 方法，关闭 [#5721](https://github.com/tusen-ai/naive-ui/pull/5721)
+- `n-slider` 新增 wai-aria 支持
+- `n-date-picker` 新增 `time-picker-format` 属性
+- `n-form-item` 新增 `feedback-class` 和 `feedback-style` 属性
+- `n-split` 支持设置像素值大小
+- `n-scrollbar` 新增 `content-style` 和 `content-class` 属性，关闭 [#4497](https://github.com/tusen-ai/naive-ui/issues/4497)
+- `n-image` 新增 `render-toolbar` 属性
+- `n-cascader` 新增 `get-column-width` 属性
+- `n-cascader` 新增 `render-prefix` 属性
+- `n-cascader` 新增 `render-suffix` 属性
+- `n-image` 优化下载按钮图标
+- `n-scrollbar` 新增 `height`、`width`、`radius`、`railInsetHorizontal`、`railInsetVertical`、`railColor` 主题变量
+
+### i18n
+
+- 新增 csCZ locale
+- 增加缺少的 itIT locale
+
 ## 2.38.1
 
 `2024-02-26`

demo/routes/routes.js

@@ -552,6 +552,11 @@ export const enComponentRoutes = [
     path: 'split',
     component: () => import('../../src/split/demos/enUS/index.demo-entry.md')
   },
+  {
+    path: 'infinite-scroll',
+    component: () =>
+      import('../../src/infinite-scroll/demos/enUS/index.demo-entry.md')
+  },
   {
     path: 'float-button',
     component: () =>
@@ -951,6 +956,11 @@ export const zhComponentRoutes = [
     path: 'split',
     component: () => import('../../src/split/demos/zhCN/index.demo-entry.md')
   },
+  {
+    path: 'infinite-scroll',
+    component: () =>
+      import('../../src/infinite-scroll/demos/zhCN/index.demo-entry.md')
+  },
   {
     path: 'float-button',
     component: () =>

demo/store/menu-options.js

@@ -539,6 +539,13 @@ export function createComponentMenuOptions ({ lang, theme, mode }) {
           zh: '树',
           enSuffix: true,
           path: '/tree'
+        },
+        {
+          en: 'Infinite Scroll',
+          zh: '无限滚动',
+          enSuffix: true,
+          path: '/infinite-scroll',
+          isNew: true
         }
       ]
     }),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "2.38.1",
+  "version": "2.38.2",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -88,15 +88,15 @@
     "@rollup/plugin-terser": "^0.4.3",
     "@types/estree": "^1.0.1",
     "@types/jest": "^29.5.4",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^7.0.2",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
     "@vicons/fluent": "^0.12.0",
     "@vicons/ionicons4": "^0.12.0",
     "@vicons/ionicons5": "^0.12.0",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/compiler-sfc": "^3.4.15",
     "@vue/eslint-config-standard": "^8.0.1",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/server-renderer": "~3.4.15",
     "@vue/test-utils": "^2.4.1",
     "autoprefixer": "^10.4.15",
@@ -106,11 +106,11 @@
     "deepmerge": "^4.3.1",
     "esbuild": "0.20.1",
     "eslint": "^8.48.0",
+    "eslint-config-love": "^44.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-config-standard-with-typescript": "^43.0.0",
     "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-markdown": "^3.0.1",
+    "eslint-plugin-markdown": "^4.0.1",
     "eslint-plugin-n": "^16.0.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
@@ -133,12 +133,12 @@
     "rollup-plugin-esbuild": "^6.1.0",
     "superagent": "^8.1.2",
     "ts-jest": "^29.1.1",
-    "typescript": "5.3.3",
+    "typescript": "5.4.2",
     "vfonts": "^0.0.3",
     "vite": "^5.0.4",
     "vue": "~3.4.15",
     "vue-router": "^4.2.4",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.0.6"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

src/_internal/scrollbar/src/Scrollbar.tsx

@@ -14,14 +14,14 @@ import type { PropType, CSSProperties, VNode, HTMLAttributes } from 'vue'
 import { on, off } from 'evtd'
 import { VResizeObserver } from 'vueuc'
 import { useIsIos } from 'vooks'
-import { getPreciseEventTarget } from 'seemly'
+import { depx, getPreciseEventTarget } from 'seemly'
 import { useConfig, useTheme, useThemeClass, useRtl } from '../../../_mixins'
 import type { ThemeProps } from '../../../_mixins'
 import type {
   ExtractInternalPropTypes,
   ExtractPublicPropTypes
 } from '../../../_utils'
-import { useReactivated, Wrapper } from '../../../_utils'
+import { rtlInset, useReactivated, Wrapper } from '../../../_utils'
 import { scrollbarLight } from '../styles'
 import type { ScrollbarTheme } from '../styles'
 import style from './styles/index.cssr'
@@ -75,10 +75,6 @@ export interface ScrollbarInst extends ScrollbarInstMethods {
 
 const scrollbarProps = {
   ...(useTheme.props as ThemeProps<ScrollbarTheme>),
-  size: {
-    type: Number,
-    default: 5
-  },
   duration: {
     type: Number,
     default: 0
@@ -155,6 +151,15 @@ const Scrollbar = defineComponent({
     let memoMouseY: number = 0
     const isIos = useIsIos()
 
+    const themeRef = useTheme(
+      'Scrollbar',
+      '-scrollbar',
+      style,
+      scrollbarLight,
+      props,
+      mergedClsPrefixRef
+    )
+
     const yBarSizeRef = computed(() => {
       const { value: containerHeight } = containerHeightRef
       const { value: contentHeight } = contentHeightRef
@@ -168,7 +173,8 @@ const Scrollbar = defineComponent({
       } else {
         return Math.min(
           containerHeight,
-          (yRailSize * containerHeight) / contentHeight + props.size * 1.5
+          (yRailSize * containerHeight) / contentHeight +
+            depx(themeRef.value.self.width) * 1.5
         )
       }
     })
@@ -186,7 +192,10 @@ const Scrollbar = defineComponent({
       ) {
         return 0
       } else {
-        return (xRailSize * containerWidth) / contentWidth + props.size * 1.5
+        return (
+          (xRailSize * containerWidth) / contentWidth +
+          depx(themeRef.value.self.height) * 1.5
+        )
       }
     })
     const xBarSizePxRef = computed(() => {
@@ -636,31 +645,32 @@ const Scrollbar = defineComponent({
       off('mousemove', window, handleYScrollMouseMove, true)
       off('mouseup', window, handleYScrollMouseUp, true)
     })
-    const themeRef = useTheme(
-      'Scrollbar',
-      '-scrollbar',
-      style,
-      scrollbarLight,
-      props,
-      mergedClsPrefixRef
-    )
     const cssVarsRef = computed(() => {
       const {
-        common: {
-          cubicBezierEaseInOut,
-          scrollbarBorderRadius,
-          scrollbarHeight,
-          scrollbarWidth
-        },
-        self: { color, colorHover }
+        common: { cubicBezierEaseInOut },
+        self: {
+          color,
+          colorHover,
+          height,
+          width,
+          borderRadius,
+          railInsetHorizontal,
+          railInsetVertical,
+          railColor
+        }
       } = themeRef.value
       return {
         '--n-scrollbar-bezier': cubicBezierEaseInOut,
         '--n-scrollbar-color': color,
         '--n-scrollbar-color-hover': colorHover,
-        '--n-scrollbar-border-radius': scrollbarBorderRadius,
-        '--n-scrollbar-width': scrollbarWidth,
-        '--n-scrollbar-height': scrollbarHeight
+        '--n-scrollbar-border-radius': borderRadius,
+        '--n-scrollbar-width': width,
+        '--n-scrollbar-height': height,
+        '--n-scrollbar-rail-inset-horizontal': railInsetHorizontal,
+        '--n-scrollbar-rail-inset-vertical': rtlEnabledRef?.value
+          ? rtlInset(railInsetVertical)
+          : railInsetVertical,
+        '--n-scrollbar-rail-color': railColor
       }
     })
     const themeClassHandle = inlineThemeDisabled

src/_internal/scrollbar/src/styles/index.cssr.ts

@@ -8,6 +8,9 @@ import { fadeInTransition } from '../../../../_styles/transitions/fade-in.cssr'
 // --n-scrollbar-width
 // --n-scrollbar-height
 // --n-scrollbar-border-radius
+// --n-scrollbar-rail-inset-horizontal
+// --n-scrollbar-rail-inset-vertical
+// --n-scrollbar-rail-color
 export default cB('scrollbar', `
   overflow: hidden;
   position: relative;
@@ -30,6 +33,7 @@ export default cB('scrollbar', `
         display: none;
       `),
       c('>', [
+        // We can't set overflow hidden since it affects positioning.
         cB('scrollbar-content', `
           box-sizing: border-box;
           min-width: 100%;
@@ -42,12 +46,11 @@ export default cB('scrollbar', `
       position: absolute;
       pointer-events: none;
       user-select: none;
+      background: var(--n-scrollbar-rail-color);
       -webkit-user-select: none;
     `, [
       cM('horizontal', `
-        left: 2px;
-        right: 2px;
-        bottom: 4px;
+        inset: var(--n-scrollbar-rail-inset-horizontal);
         height: var(--n-scrollbar-height);
       `, [
         c('>', [
@@ -59,9 +62,7 @@ export default cB('scrollbar', `
         ])
       ]),
       cM('vertical', `
-        right: 4px;
-        top: 2px;
-        bottom: 2px;
+        inset: var(--n-scrollbar-rail-inset-vertical);
         width: var(--n-scrollbar-width);
       `, [
         c('>', [

src/_internal/scrollbar/src/styles/rtl.cssr.ts

@@ -13,11 +13,7 @@ export default cB('scrollbar', [
               right: unset;
             `)
           ])
-        ]),
-        cM('vertical', `
-          left: 4px;
-          right: unset;
-        `)
+        ])
       ])
     ])
   ])

src/_internal/scrollbar/styles/common.ts

@@ -0,0 +1,5 @@
+export const commonVars = {
+  railInsetHorizontal: 'auto 2px 4px 2px',
+  railInsetVertical: '2px 4px 2px auto',
+  railColor: 'transparent'
+}