diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 32d612261b3..18ab580def4 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,5 +1,30 @@ # CHANGELOG +## 2.40.2 + +`2025-11-26` + +### Fixes + +- Fix `n-time-picker`'s `use-12-hours` type error warning, closes [#4308](https://github.com/tusen-ai/naive-ui/issues/4308) +- Fix `input-number` the problem that the negative sign is replaced when the negative sign is entered. +- Fix `n-data-table`'s header will show scrollbar in some old browsers, closes [#6557](https://github.com/tusen-ai/naive-ui/issues/6557). + +### Features + +- 🌟 Adds `n-marquee` component. +- `n-image` adds `error` slot, closes [#5649](https://github.com/tusen-ai/naive-ui/issues/5649). +- `n-date-picker` adds `date-format` prop. +- `n-date-picker` adds `calendar-day-format` prop. +- `n-date-picker` adds `calendar-header-year-format` prop. +- `n-date-picker` adds `calendar-header-month-format` prop. +- `n-date-picker` adds `calendar-header-month-before-year` prop. +- `n-date-picker` adds `calendar-header-month-year-separator` prop. +- `n-progress`'s `color` prop supports gradient config. +- `n-select` adds `font-weight` theme variable +- `n-input` adds `font-weight` theme variable +- `n-data-table` adds `get-csv-header` and `get-csv-cell` props, closes [#6542](https://github.com/tusen-ai/naive-ui/issues/6542). + ## 2.40.1 `2024-09-26` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 67a65a4b8b0..b5516d55484 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,5 +1,30 @@ # CHANGELOG +## 2.40.2 + +`2025-11-26` + +### Fixes + +- `n-time-picker` 的 `use-12-hours` 类型错误警告，关闭 [#4308](https://github.com/tusen-ai/naive-ui/issues/4308) +- 修复 `input-number` 存在负号时被替换的问题 +- 修复 `n-data-table` 的 header 在部分浏览器中会出现滚动条，关闭 [#6557](https://github.com/tusen-ai/naive-ui/issues/6557) + +### Features + +- 🌟 新增 `n-marquee` 组件 +- `n-image` 新增 `error` 插槽，关闭 [#5649](https://github.com/tusen-ai/naive-ui/issues/5649) +- `n-date-picker` 新增 `date-format` 属性 +- `n-date-picker` 新增 `calendar-day-format` 属性 +- `n-date-picker` 新增 `calendar-header-year-format` 属性 +- `n-date-picker` 新增 `calendar-header-month-format` 属性 +- `n-date-picker` 新增 `calendar-header-month-before-year` 属性 +- `n-date-picker` 新增 `calendar-header-month-year-separator` 属性 +- `n-progress` 的 `color` 属性支持渐变色配置 +- `n-select` 新增 `font-weight` 主题变量 +- `n-input` 新增 `font-weight` 主题变量 +- `n-data-table` 新增 `get-csv-header` 和 `get-csv-cell` 属性，关闭 [#6542](https://github.com/tusen-ai/naive-ui/issues/6542) + ## 2.40.1 `2024-09-26` diff --git a/build/loaders/convert-md-to-doc.js b/build/loaders/convert-md-to-doc.js index f07f186b8bf..8933ac5a6e7 100644 --- a/build/loaders/convert-md-to-doc.js +++ b/build/loaders/convert-md-to-doc.js @@ -1,7 +1,7 @@ const path = require('node:path') const fse = require('fs-extra') -const { marked } = require('marked') const camelCase = require('lodash/camelCase') +const { marked } = require('marked') const createRenderer = require('./md-renderer') const projectPath = require('./project-path') diff --git a/build/utils/terse-cssr.js b/build/utils/terse-cssr.js index 076ce78852a..1307adf4ca0 100644 --- a/build/utils/terse-cssr.js +++ b/build/utils/terse-cssr.js @@ -1,6 +1,6 @@ +const { default: generate } = require('@babel/generator') const parser = require('@babel/parser') const { default: traverse } = require('@babel/traverse') -const { default: generate } = require('@babel/generator') module.exports = function terseCssr(code) { const patternSpace = / +/g diff --git a/demo/Site.vue b/demo/Site.vue index ee0f3f263f8..6ef3d84e493 100644 --- a/demo/Site.vue +++ b/demo/Site.vue @@ -1,8 +1,8 @@ + + diff --git a/src/image/demos/enUS/custom-toolbar.demo.vue b/src/image/demos/enUS/custom-toolbar.demo.vue index c98e44f7e03..51dbf74a1ca 100644 --- a/src/image/demos/enUS/custom-toolbar.demo.vue +++ b/src/image/demos/enUS/custom-toolbar.demo.vue @@ -5,10 +5,10 @@ You can customize the toolbar using `render-toolbar`. + + diff --git a/src/image/demos/zhCN/custom-toolbar.demo.vue b/src/image/demos/zhCN/custom-toolbar.demo.vue index 467305bc8cb..240177948b4 100644 --- a/src/image/demos/zhCN/custom-toolbar.demo.vue +++ b/src/image/demos/zhCN/custom-toolbar.demo.vue @@ -5,10 +5,10 @@ + + diff --git a/src/progress/demos/enUS/index.demo-entry.md b/src/progress/demos/enUS/index.demo-entry.md index 1249a87c98b..13d8225a050 100644 --- a/src/progress/demos/enUS/index.demo-entry.md +++ b/src/progress/demos/enUS/index.demo-entry.md @@ -15,6 +15,7 @@ color.vue no-indicator.vue height.vue processing.vue +gradient.vue ``` ## API @@ -25,7 +26,7 @@ processing.vue | --- | --- | --- | --- | --- | | border-radius | `number \| string` | `undefined` | `'line'` typed progress's border-radius. Keep half of default height if not passed. | | | circle-gap | `number` | `1` | The gap between circles when type is `'multiple-circle'`, suppose `viewbox` size is `100`. | | -| color | `string \| string[]` | `undefined` | Progress color. | | +| color | `string \| string[] \| { stops: string[] } \| Array<{ stops: string[] }>` | `undefined` | Progress color. `{ stops: string[] }` indicates a gradient color. `stops` array must have length of 2. The first element is gradient start color. The second element is gradient end color. | `stops` since 2.40.2 | | fill-border-radius | `number \| string` | `undefined` | `'line'` typed progress's fill's border-radius. Keep `border-radius` if not passed. | | | gap-degree | `number` | `75` | The gap degree of half circle, 0 ~ 360. | 2.25.2 | | gap-offset-degree | `number` | `0` | The gap offset degree. | 2.25.2 | diff --git a/src/progress/demos/zhCN/color.demo.vue b/src/progress/demos/zhCN/color.demo.vue index d533ec94c37..8e23dd55182 100644 --- a/src/progress/demos/zhCN/color.demo.vue +++ b/src/progress/demos/zhCN/color.demo.vue @@ -5,9 +5,9 @@ + + diff --git a/src/progress/demos/zhCN/index.demo-entry.md b/src/progress/demos/zhCN/index.demo-entry.md index 9f91d747e4f..1286060186d 100644 --- a/src/progress/demos/zhCN/index.demo-entry.md +++ b/src/progress/demos/zhCN/index.demo-entry.md @@ -15,6 +15,7 @@ color.vue no-indicator.vue height.vue processing.vue +gradient.vue ``` ## API @@ -25,7 +26,7 @@ processing.vue | --- | --- | --- | --- | --- | | border-radius | `number \| string` | `undefined` | `'line'` 类型进度条的圆角半径，不填写则维持高度的一半 | | | circle-gap | `number` | `1` | 当类型是 `'multiple-circle'` 的时候圈之间的距离，假设 `viewbox` 的尺寸是 `100` | | -| color | `string \| string[]` | `undefined` | 进度条颜色 | | +| color | `string \| string[] \| { stops: string[] } \| Array<{ stops: string[] }>` | `undefined` | 进度条颜色，`{ stops: string[] }` 表示渐变色，`stops` 数组长度必须为 2，第一个元素为渐变的起始颜色，第二个元素为渐变的终止颜色 | 2.40.2 开始支持 `stops` | | fill-border-radius | `number \| string` | `undefined` | `'line'` 类型进度条填充的圆角半径，不填写则维持 `border-radius` | | | gap-degree | `number` | `75` | 仪表盘进度条缺口角度，取值范围 0 ~ 360 | 2.25.2 | | gap-offset-degree | `number` | `0` | 仪表盘进度条缺口位置 | 2.25.2 | diff --git a/src/progress/index.ts b/src/progress/index.ts index 4f30d1a6a3b..b73ce665df8 100644 --- a/src/progress/index.ts +++ b/src/progress/index.ts @@ -1,2 +1,3 @@ export { default as NProgress, progressProps } from './src/Progress' export type { ProgressProps } from './src/Progress' +export type * from './src/public-types' diff --git a/src/progress/src/Circle.tsx b/src/progress/src/Circle.tsx index 1eac9b4ef36..87950eb6fab 100644 --- a/src/progress/src/Circle.tsx +++ b/src/progress/src/Circle.tsx @@ -1,4 +1,5 @@ -import { type CSSProperties, type PropType, defineComponent, h } from 'vue' +import type { ProgressGradient, ProgressStatus } from './public-types' +import { type CSSProperties, defineComponent, h, type PropType } from 'vue' import { NBaseIcon } from '../../_internal' import { ErrorIcon, @@ -6,7 +7,6 @@ import { SuccessIcon, WarningIcon } from '../../_internal/icons' -import type { Status } from './interface' const iconMap = { success: , @@ -23,14 +23,14 @@ export default defineComponent({ required: true }, status: { - type: String as PropType, + type: String as PropType, required: true }, strokeWidth: { type: Number, required: true }, - fillColor: String, + fillColor: [String, Object] as PropType, railColor: String, railStyle: [String, Object] as PropType, percentage: { @@ -64,7 +64,8 @@ export default defineComponent({ function getPathStyles( percent: number, offsetDegree: number, - strokeColor?: string + strokeColor?: string | ProgressGradient, + type?: 'rail' | 'fill' ): { pathString: string, pathStyle: CSSProperties } { const { gapDegree, viewBoxWidth, strokeWidth } = props const radius = 50 @@ -78,7 +79,12 @@ export default defineComponent({ a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}` const len = Math.PI * 2 * radius const pathStyle: CSSProperties = { - stroke: strokeColor, + stroke: + type === 'rail' + ? (strokeColor as string) + : typeof props.fillColor === 'object' + ? 'url(#gradient)' + : (strokeColor as string), strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${ viewBoxWidth * 8 }px`, @@ -91,6 +97,23 @@ export default defineComponent({ pathStyle } } + + const createGradientNode = (): false | JSX.Element => { + const isGradient = typeof props.fillColor === 'object' + const from = isGradient ? props.fillColor.stops[0] : '' + const to = isGradient ? props.fillColor.stops[1] : '' + return ( + isGradient && ( + + + + + + + ) + ) + } + return () => { const { fillColor, @@ -106,9 +129,9 @@ export default defineComponent({ clsPrefix } = props const { pathString: railPathString, pathStyle: railPathStyle } - = getPathStyles(100, 0, railColor) + = getPathStyles(100, 0, railColor, 'rail') const { pathString: fillPathString, pathStyle: fillPathStyle } - = getPathStyles(percentage, offsetDegree, fillColor) + = getPathStyles(percentage, offsetDegree, fillColor, 'fill') const viewBoxSize = 100 + strokeWidth return (
@@ -122,6 +145,7 @@ export default defineComponent({ }} > + {createGradientNode()} , @@ -35,9 +35,9 @@ export default defineComponent({ }, railColor: String, railStyle: [String, Object] as PropType, - fillColor: String, + fillColor: [String, Object] as PropType, status: { - type: String as PropType, + type: String as PropType, required: true }, indicatorPlacement: { @@ -65,6 +65,11 @@ export default defineComponent({ const styleHeightRef = computed(() => { return formatLength(props.height) }) + const styleFillColorRef = computed(() => { + return typeof props.fillColor === 'object' + ? `linear-gradient(to right, ${props.fillColor?.stops[0]} , ${props.fillColor?.stops[1]})` + : props.fillColor + }) const styleRailBorderRadiusRef = computed(() => { if (props.railBorderRadius !== undefined) { return formatLength(props.railBorderRadius) @@ -96,7 +101,6 @@ export default defineComponent({ indicatorTextColor, status, showIndicator, - fillColor, processing, clsPrefix } = props @@ -133,7 +137,7 @@ export default defineComponent({ ]} style={{ maxWidth: `${props.percentage}%`, - backgroundColor: fillColor, + background: styleFillColorRef.value, height: styleHeightRef.value, lineHeight: styleHeightRef.value, borderRadius: styleFillBorderRadiusRef.value diff --git a/src/progress/src/MultipleCircle.tsx b/src/progress/src/MultipleCircle.tsx index 377d7c33639..19070a564ff 100644 --- a/src/progress/src/MultipleCircle.tsx +++ b/src/progress/src/MultipleCircle.tsx @@ -1,9 +1,10 @@ +import type { ProgressGradient } from './public-types' import { - type CSSProperties, - type PropType, computed, + type CSSProperties, defineComponent, - h + h, + type PropType } from 'vue' function circlePath(r: number, sw: number, vw: number = 100): string { @@ -40,7 +41,7 @@ export default defineComponent({ required: true }, fillColor: { - type: Array as PropType, + type: Array as PropType, default: () => [] }, railColor: { @@ -61,11 +62,35 @@ export default defineComponent({ * (props.viewBoxWidth / 2 - (props.strokeWidth / 2) * (1 + 2 * i) - props.circleGap * i) - * 2 + * 2 }, ${props.viewBoxWidth * 8}` ) return strokeDasharrays }) + + const createGradientNode = ( + p: number, + index: number + ): false | JSX.Element => { + const item = props.fillColor[index] + const form = typeof item === 'object' ? item.stops[0] : '' + const to = typeof item === 'object' ? item.stops[1] : '' + return ( + typeof props.fillColor[index] === 'object' && ( + + + + + ) + ) + } + return () => { const { viewBoxWidth, @@ -83,6 +108,11 @@ export default defineComponent({
+ + {percentage.map((p, index) => { + return createGradientNode(p, index) + })} + {percentage.map((p, index) => { return ( @@ -127,7 +157,10 @@ export default defineComponent({ style={{ strokeDasharray: strokeDasharrayRef.value[index], strokeDashoffset: 0, - stroke: fillColor[index] + stroke: + typeof fillColor[index] === 'object' + ? `url(#gradient-${index})` + : fillColor[index] }} /> diff --git a/src/progress/src/Progress.tsx b/src/progress/src/Progress.tsx index 0c684295cf4..7561998d866 100644 --- a/src/progress/src/Progress.tsx +++ b/src/progress/src/Progress.tsx @@ -1,20 +1,20 @@ +import type { ThemeProps } from '../../_mixins' +import type { ProgressTheme } from '../styles' +import type { ProgressGradient, ProgressStatus } from './public-types' import { - type CSSProperties, - type PropType, computed, + type CSSProperties, defineComponent, - h + h, + type PropType } from 'vue' import { useConfig, useTheme, useThemeClass } from '../../_mixins' -import type { ThemeProps } from '../../_mixins' -import { type ExtractPublicPropTypes, createKey } from '../../_utils' +import { createKey, type ExtractPublicPropTypes } from '../../_utils' import { progressLight } from '../styles' -import type { ProgressTheme } from '../styles' -import style from './styles/index.cssr' -import type { Status } from './interface' -import Line from './Line' import Circle from './Circle' +import Line from './Line' import MultipleCircle from './MultipleCircle' +import style from './styles/index.cssr' export const progressProps = { ...(useTheme.props as ThemeProps), @@ -28,14 +28,16 @@ export const progressProps = { gapDegree: Number, gapOffsetDegree: Number, status: { - type: String as PropType, + type: String as PropType, default: 'default' }, railColor: [String, Array] as PropType, railStyle: [String, Array] as PropType< string | CSSProperties | Array >, - color: [String, Array] as PropType, + color: [String, Array, Object] as PropType< + string | string[] | ProgressGradient | ProgressGradient[] + >, viewBoxWidth: { type: Number, default: 100 diff --git a/src/progress/src/interface.ts b/src/progress/src/interface.ts deleted file mode 100644 index 2c91139035d..00000000000 --- a/src/progress/src/interface.ts +++ /dev/null @@ -1 +0,0 @@ -export type Status = 'success' | 'error' | 'warning' | 'info' | 'default' diff --git a/src/progress/src/public-types.ts b/src/progress/src/public-types.ts new file mode 100644 index 00000000000..1548a48a15f --- /dev/null +++ b/src/progress/src/public-types.ts @@ -0,0 +1,9 @@ +export type ProgressStatus = + | 'success' + | 'error' + | 'warning' + | 'info' + | 'default' +export interface ProgressGradient { + stops: string[] +} diff --git a/src/progress/styles/dark.ts b/src/progress/styles/dark.ts index 0da5f93e061..2b7c8a056ea 100644 --- a/src/progress/styles/dark.ts +++ b/src/progress/styles/dark.ts @@ -1,5 +1,5 @@ -import { commonDark } from '../../_styles/common' import type { ProgressTheme } from './light' +import { commonDark } from '../../_styles/common' import { self } from './light' const progressDark: ProgressTheme = { diff --git a/src/progress/styles/index.ts b/src/progress/styles/index.ts index cb2737aa811..3dcc3d3c30d 100644 --- a/src/progress/styles/index.ts +++ b/src/progress/styles/index.ts @@ -1,3 +1,3 @@ export { default as progressDark } from './dark' export { default as progressLight } from './light' -export type { ProgressThemeVars, ProgressTheme } from './light' +export type { ProgressTheme, ProgressThemeVars } from './light' diff --git a/src/progress/styles/light.ts b/src/progress/styles/light.ts index 664d6627063..e3d1cd0e72c 100644 --- a/src/progress/styles/light.ts +++ b/src/progress/styles/light.ts @@ -1,6 +1,6 @@ -import { commonLight } from '../../_styles/common' -import type { ThemeCommonVars } from '../../_styles/common' import type { Theme } from '../../_mixins/use-theme' +import type { ThemeCommonVars } from '../../_styles/common' +import { commonLight } from '../../_styles/common' export function self(vars: ThemeCommonVars) { const { diff --git a/src/progress/tests/Progress.spec.ts b/src/progress/tests/Progress.spec.ts index e3b1ee94c69..88125cc5327 100644 --- a/src/progress/tests/Progress.spec.ts +++ b/src/progress/tests/Progress.spec.ts @@ -1,6 +1,6 @@ import { mount } from '@vue/test-utils' -import { NProgress } from '../index' import { SuccessIcon } from '../../_internal/icons' +import { NProgress } from '../index' describe('n-progress', () => { it('should work with import on demand', () => { @@ -30,7 +30,7 @@ describe('n-progress', () => { }) expect( wrapper.find('.n-progress-graph-line-fill').attributes('style') - ).toContain('background-color: rgb(51, 51, 51);') + ).toContain('max-width: 0%; background: rgb(51, 51, 51);') expect( wrapper.find('.n-progress-graph-line-rail').attributes('style') ).toContain('background-color: rgb(68, 68, 68);') diff --git a/src/progress/tests/server.spec.tsx b/src/progress/tests/server.spec.tsx index 076018e3a99..258ab271544 100644 --- a/src/progress/tests/server.spec.tsx +++ b/src/progress/tests/server.spec.tsx @@ -1,9 +1,9 @@ +import { setup } from '@css-render/vue3-ssr' +import { renderToString } from '@vue/server-renderer' /** * @jest-environment node */ import { createSSRApp, h } from 'vue' -import { renderToString } from '@vue/server-renderer' -import { setup } from '@css-render/vue3-ssr' import { NProgress } from '../..' describe('sSR', () => { diff --git a/src/qr-code/src/QrCode.tsx b/src/qr-code/src/QrCode.tsx index 9b7134240ee..364bc44f92a 100644 --- a/src/qr-code/src/QrCode.tsx +++ b/src/qr-code/src/QrCode.tsx @@ -1,18 +1,18 @@ +import type { ThemeProps } from '../../_mixins' +import type { ExtractPublicPropTypes } from '../../_utils' import { - type PropType, computed, defineComponent, h, onMounted, + type PropType, ref, watchEffect } from 'vue' import { useConfig, useTheme, useThemeClass } from '../../_mixins' -import type { ThemeProps } from '../../_mixins' -import type { ExtractPublicPropTypes } from '../../_utils' -import { type QrCodeTheme, qrcodeLight } from '../styles' -import style from './styles/index.cssr' +import { qrcodeLight, type QrCodeTheme } from '../styles' import qrcodegen from './qrcodegen' +import style from './styles/index.cssr' type Modules = ReturnType diff --git a/src/qr-code/styles/dark.ts b/src/qr-code/styles/dark.ts index 580041163bb..8da283e8f3c 100644 --- a/src/qr-code/styles/dark.ts +++ b/src/qr-code/styles/dark.ts @@ -1,5 +1,5 @@ -import { commonDark } from '../../_styles/common' import type { QrCodeTheme } from './light' +import { commonDark } from '../../_styles/common' const qrcodeDark: QrCodeTheme = { name: 'QrCode', diff --git a/src/qr-code/styles/light.ts b/src/qr-code/styles/light.ts index 3a435a25cae..f51afee450e 100644 --- a/src/qr-code/styles/light.ts +++ b/src/qr-code/styles/light.ts @@ -1,6 +1,6 @@ -import { commonLight } from '../../_styles/common' -import type { ThemeCommonVars } from '../../_styles/common' import type { Theme } from '../../_mixins' +import type { ThemeCommonVars } from '../../_styles/common' +import { commonLight } from '../../_styles/common' function self(vars: ThemeCommonVars) { return { diff --git a/src/radio/demos/zhCN/rtl-debug.demo.vue b/src/radio/demos/zhCN/rtl-debug.demo.vue index 91d31971ff9..abb9a8ece81 100644 --- a/src/radio/demos/zhCN/rtl-debug.demo.vue +++ b/src/radio/demos/zhCN/rtl-debug.demo.vue @@ -3,8 +3,8 @@ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + diff --git a/src/watermark/demos/enUS/index.demo-entry.md b/src/watermark/demos/enUS/index.demo-entry.md index e3d3e55636a..25b54ccaa84 100644 --- a/src/watermark/demos/enUS/index.demo-entry.md +++ b/src/watermark/demos/enUS/index.demo-entry.md @@ -1,3 +1,5 @@ + + # Watermark Watermark. @@ -8,17 +10,17 @@ Watermark. basic.vue fullscreen.vue image.vue +multiline.vue +custom.vue ``` ## API -Supports multiple lines text separated by `\n` since `2.38.2`. - ### Watermark Props | Name | Type | Default | Description | Version | | --- | --- | --- | --- | --- | -| content | `string` | `undefined` | Content of watermark. | 2.25.3 | +| content | `string` | `undefined` | Content of watermark. | 2.25.3, supports multiple line text since 2.38.2 | | cross | `boolean` | `false` | Whether to show watermark at cross position. | 2.25.3 | | debug | `boolean` | `false` | Whether to show debug grid. | 2.25.3 | | font-size | `number` | `14` | Font size. | 2.25.3 | diff --git a/src/watermark/demos/enUS/multiline.demo.vue b/src/watermark/demos/enUS/multiline.demo.vue new file mode 100644 index 00000000000..8e74e1e7eb0 --- /dev/null +++ b/src/watermark/demos/enUS/multiline.demo.vue @@ -0,0 +1,56 @@ + +# Multiline Text + +Supports multiple lines text separated by `\n` since `2.38.2`. + +Watermark supports displaying multiline text content. + + + + + diff --git a/src/watermark/demos/zhCN/custom.demo.vue b/src/watermark/demos/zhCN/custom.demo.vue new file mode 100644 index 00000000000..9952fe41766 --- /dev/null +++ b/src/watermark/demos/zhCN/custom.demo.vue @@ -0,0 +1,196 @@ + +# 自定义水印 + +通过配置自定义参数来预览水印效果。 + + + + + diff --git a/src/watermark/demos/zhCN/index.demo-entry.md b/src/watermark/demos/zhCN/index.demo-entry.md index 8c944cd7655..dd0f198d06c 100644 --- a/src/watermark/demos/zhCN/index.demo-entry.md +++ b/src/watermark/demos/zhCN/index.demo-entry.md @@ -1,3 +1,5 @@ + + # 水印 Watermark 出现在钱上的时候比较可爱。 @@ -8,17 +10,17 @@ basic.vue fullscreen.vue image.vue +multiline.vue +custom.vue ``` ## API -自 `2.38.2` 支持由 `\n` 分割的多行文本。 - ### Watermark Props | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | -| content | `string` | `undefined` | 水印文本 | 2.25.3 | +| content | `string` | `undefined` | 水印文本 | 2.25.3，自 2.38.2 支持多行文本 | | cross | `boolean` | `false` | 是否跨越边界显示 | 2.25.3 | | debug | `boolean` | `false` | 是否显示调试信息 | 2.25.3 | | font-size | `number` | `14` | 字体大小 | 2.25.3 | diff --git a/src/watermark/demos/zhCN/multiline.demo.vue b/src/watermark/demos/zhCN/multiline.demo.vue new file mode 100644 index 00000000000..433f8f0608d --- /dev/null +++ b/src/watermark/demos/zhCN/multiline.demo.vue @@ -0,0 +1,56 @@ + +# 多行文本 + +自 `2.38.2` 起，支持由 `\n` 分割的多行文本。 + +水印支持显示多行文本内容。 + + + + + diff --git a/src/watermark/src/Watermark.tsx b/src/watermark/src/Watermark.tsx index fc31b26df4d..a4495677b83 100644 --- a/src/watermark/src/Watermark.tsx +++ b/src/watermark/src/Watermark.tsx @@ -1,9 +1,9 @@ -import { type PropType, defineComponent, h, ref, watchEffect } from 'vue' +import type { ThemeProps } from '../../_mixins' import { onFontsReady } from 'vooks' +import { defineComponent, h, type PropType, ref, watchEffect } from 'vue' import { useConfig, useTheme } from '../../_mixins' -import type { ThemeProps } from '../../_mixins' import { type ExtractPublicPropTypes, isBrowser, warnOnce } from '../../_utils' -import { type WatermarkTheme, watermarkLight } from '../styles' +import { watermarkLight, type WatermarkTheme } from '../styles' import style from './styles/index.cssr' function getRatio(context: any): number { diff --git a/src/watermark/styles/dark.ts b/src/watermark/styles/dark.ts index 924a45a71f3..c333640def3 100644 --- a/src/watermark/styles/dark.ts +++ b/src/watermark/styles/dark.ts @@ -1,5 +1,5 @@ -import { commonDark } from '../../_styles/common' import type { WatermarkTheme } from './light' +import { commonDark } from '../../_styles/common' const watermarkDark: WatermarkTheme = { name: 'Watermark', diff --git a/src/watermark/styles/light.ts b/src/watermark/styles/light.ts index 6706c516d5f..b31a7fbfe38 100644 --- a/src/watermark/styles/light.ts +++ b/src/watermark/styles/light.ts @@ -1,5 +1,5 @@ -import { commonLight } from '../../_styles/common' import { createTheme } from '../../_mixins' +import { commonLight } from '../../_styles/common' const watermarkLight = createTheme({ name: 'Watermark', diff --git a/src/watermark/tests/server.spec.tsx b/src/watermark/tests/server.spec.tsx index 6b59bb7430a..a9a596b6446 100644 --- a/src/watermark/tests/server.spec.tsx +++ b/src/watermark/tests/server.spec.tsx @@ -1,6 +1,6 @@ -import { createSSRApp, h } from 'vue' -import { renderToString } from '@vue/server-renderer' import { setup } from '@css-render/vue3-ssr' +import { renderToString } from '@vue/server-renderer' +import { createSSRApp, h } from 'vue' import { NWatermark } from '../..' describe('sSR', () => { diff --git a/volar.d.ts b/volar.d.ts index a947089be50..4d5b570f155 100644 --- a/volar.d.ts +++ b/volar.d.ts @@ -151,6 +151,7 @@ declare module 'vue' { NVirtualList: (typeof import('naive-ui'))['NVirtualList'] NWatermark: (typeof import('naive-ui'))['NWatermark'] NHighlight: (typeof import('naive-ui'))['NHighlight'] + NMarqueue: (typeof import('naive-ui'))['NMarqueue'] } } export {}