feat(marquee): new component

CHANGELOG.en-US.md

@@ -10,6 +10,7 @@
 
 ### 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-progress`'s `color` prop supports gradient config.

CHANGELOG.zh-CN.md

@@ -10,6 +10,7 @@
 
 ### Features
 
+- 🌟 新增 `n-marquee` 组件
 - `n-image` 新增 `error` 插槽，关闭 [#5649](https://github.com/tusen-ai/naive-ui/issues/5649)
 - `n-date-picker` 新增 `date-format` 属性
 - `n-progress` 的 `color` 属性支持渐变色配置

demo/routes/routes.js

@@ -590,6 +590,10 @@ export const enComponentRoutes = [
     path: 'highlight',
     component: () =>
       import('../../src/highlight/demos/enUS/index.demo-entry.md')
+  },
+  {
+    path: 'marquee',
+    component: () => import('../../src/marquee/demos/enUS/index.demo-entry.md')
   }
 ]
 
@@ -999,6 +1003,10 @@ export const zhComponentRoutes = [
     path: 'highlight',
     component: () =>
       import('../../src/highlight/demos/zhCN/index.demo-entry.md')
+  },
+  {
+    path: 'marquee',
+    component: () => import('../../src/marquee/demos/zhCN/index.demo-entry.md')
   }
 ]
 

demo/store/menu-options.js

@@ -663,6 +663,13 @@ export function createComponentMenuOptions({ lang, theme }) {
           enSuffix: true,
           path: '/drawer'
         },
+        {
+          en: 'Marquee',
+          zh: '跑马灯',
+          enSuffix: true,
+          path: '/marquee',
+          isNew: true
+        },
         {
           en: 'Message',
           zh: '信息',

src/alert/demos/enUS/index.demo-entry.md

@@ -10,6 +10,7 @@ bordered.vue
 closable.vue
 icon.vue
 no-icon.vue
+marquee.vue
 ```
 
 ## API

src/alert/demos/enUS/marquee.demo.vue

@@ -0,0 +1,15 @@
+<markdown>
+# Marquee
+
+You can use `n-marquee` to achieve marquee effect.
+</markdown>
+
+<template>
+  <n-alert type="error" title="Warning">
+    <n-marquee>
+      <div style="margin-right: 64px">
+        Test environment is offline again.
+      </div>
+    </n-marquee>
+  </n-alert>
+</template>

src/alert/demos/zhCN/index.demo-entry.md

@@ -12,6 +12,7 @@ bordered.vue
 closable.vue
 icon.vue
 no-icon.vue
+marquee.vue
 rtl-debug.vue
 empty-debug.vue
 ```

src/alert/demos/zhCN/marquee.demo.vue

@@ -0,0 +1,15 @@
+<markdown>
+# 跑马灯
+
+你可以配合 `n-marquee` 实现轮播的效果。
+</markdown>
+
+<template>
+  <n-alert type="error" title="呵呵">
+    <n-marquee>
+      <div style="margin-right: 64px">
+        测试环境又挂了。
+      </div>
+    </n-marquee>
+  </n-alert>
+</template>

src/components.ts

@@ -53,6 +53,7 @@ export * from './list'
 export * from './loading-bar'
 export * from './log'
 export * from './infinite-scroll'
+export * from './marquee'
 export * from './menu'
 export * from './mention'
 export * from './message'

src/config-provider/src/internal-interface.ts

@@ -100,6 +100,7 @@ import type { RowTheme } from '../../legacy-grid/styles'
 import type { SplitTheme } from '../../split/styles'
 import type { FlexTheme } from '../../flex/styles'
 import type { FloatButtonGroupTheme } from '../../float-button-group/styles'
+import type { MarqueeTheme } from '../../marquee/styles'
 import type { Katex } from './katex'
 import type { GlobalTheme, GlobalThemeOverrides } from './interface'
 
@@ -190,6 +191,7 @@ export interface GlobalThemeWithoutCommon {
   Watermark?: WatermarkTheme
   Split?: SplitTheme
   Row?: RowTheme
+  Marquee?: MarqueeTheme
   // internal
   InternalSelectMenu?: InternalSelectMenuTheme
   InternalSelection?: InternalSelectionTheme

src/marquee/demos/enUS/auto-fill.demo.vue

@@ -0,0 +1,16 @@
+<markdown>
+# Auto fill
+
+Use `auto-fill` prop to fill all the blank space that left.
+</markdown>
+
+<template>
+  <n-marquee auto-fill>
+    <n-image
+      width="80"
+      height="80"
+      src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+      style="margin-right: 24px"
+    />
+  </n-marquee>
+</template>

src/marquee/demos/enUS/basic.demo.vue

@@ -0,0 +1,15 @@
+<markdown>
+# Basic
+
+Put text into marquee:
+</markdown>
+
+<template>
+  <n-marquee>
+    <div style="margin-right: 64px">
+      In 2020 Noel returned to the legendary Rockfield Studios in Wales for the
+      first time since the band recorded the album, looking back at his memories
+      and reflecting on the album’s legacy.
+    </div>
+  </n-marquee>
+</template>

src/marquee/demos/enUS/image.demo.vue

@@ -0,0 +1,16 @@
+<markdown>
+# Image
+
+You can put any content inside marquee.
+</markdown>
+
+<template>
+  <n-marquee>
+    <n-image
+      width="80"
+      height="80"
+      src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+      style="margin-right: 24px"
+    />
+  </n-marquee>
+</template>

src/marquee/demos/enUS/index.demo-entry.md

@@ -0,0 +1,28 @@
+# Marquee
+
+A trivia: There's a deprecated HTML Element called `marquee`.
+
+Available since `NEXT_VERSION`.
+
+## Demos
+
+```demo
+basic.vue
+image.vue
+auto-fill.vue
+```
+
+## API
+
+### Marquee Props
+
+| Name | Type | Default | Description | Version |
+| --- | --- | --- | --- | --- |
+| auto-fill | `boolean` | `false` | Whether to fill the blank of the container using its content repeatly. | NEXT_VERSION |
+| speed | `number` | `48` | The speed calculated as pixels/second. | NEXT_VERSION |
+
+### Marquee Slots
+
+| Name    | Parameters | Description | Version      |
+| ------- | ---------- | ----------- | ------------ |
+| default | `()`       | Content.    | NEXT_VERSION |

src/marquee/demos/zhCN/auto-fill.demo.vue

@@ -0,0 +1,16 @@
+<markdown>
+# 自动填充
+
+使用 `auto-fill` 属性让内容铺满空白空间。
+</markdown>
+
+<template>
+  <n-marquee auto-fill>
+    <n-image
+      width="80"
+      height="80"
+      src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+      style="margin-right: 24px"
+    />
+  </n-marquee>
+</template>

src/marquee/demos/zhCN/basic.demo.vue

@@ -0,0 +1,11 @@
+<markdown>
+# 基础用法
+
+在跑马灯中输入文字：
+</markdown>
+
+<template>
+  <n-marquee>
+    谁用运气换呼吸 谁用灵魂换稻米 谁用运气换呼吸 谁用灵魂换稻米&nbsp;
+  </n-marquee>
+</template>

src/marquee/demos/zhCN/image.demo.vue

@@ -0,0 +1,16 @@
+<markdown>
+# 图片
+
+你可以将任何内容放入跑马灯中。
+</markdown>
+
+<template>
+  <n-marquee>
+    <n-image
+      width="80"
+      height="80"
+      src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+      style="margin-right: 24px"
+    />
+  </n-marquee>
+</template>

src/marquee/demos/zhCN/index.demo-entry.md

@@ -0,0 +1,28 @@
+# 跑马灯 Marquee
+
+我有一个高中同学，当时他的口头禅是：“滚滚滚。”
+
+自 `NEXT_VERSION` 开始提供。
+
+## 演示
+
+```demo
+basic.vue
+image.vue
+auto-fill.vue
+```
+
+## API
+
+### Marquee Props
+
+| 名称 | 类型 | 默认值 | 说明 | 版本 |
+| --- | --- | --- | --- | --- |
+| auto-fill | `boolean` | `false` | 是否重复的用内容铺满容器的空白 | NEXT_VERSION |
+| speed | `number` | `48` | 移动的速度，单位是像素每秒 | NEXT_VERSION |
+
+### Marquee Slots
+
+| 名称    | 参数 | 说明 | 版本         |
+| ------- | ---- | ---- | ------------ |
+| default | `()` | 内容 | NEXT_VERSION |

src/marquee/index.ts

@@ -0,0 +1,2 @@
+export { default as NMarqueue } from './src/Marquee'
+export type * from './src/public-types'