feat: float-button & esm bundle

CHANGELOG.en-US.md

@@ -4,20 +4,22 @@
 
 ### Breaking Changes
 
-- Fix `n-scrollbar`'s `scrollTo (x: number, y: number)` error where the order of method parameters does not match the document.
+- Fix `n-scrollbar`'s `scrollTo(x: number, y: number)` error where the order of method parameters does not match the document.
 
 ### Fixes
 
 - Fix `n-tree`'s `override-default-node-click-behavior` prop may conflict with default switcher click or checkbox click behavior.
 - Fix `n-scrollbar`'s typo on `aria-hidden` attribute.
-- Fix overflow issue with `n-menu` `root-indent` `indent`, closes (#5616)
+- Fix overflow issue with `n-menu` `root-indent` `indent`, closes (#5616).
 - Fix `n-form-item`'s feedback may hide and show again, closes [#5583](https://github.com/tusen-ai/naive-ui/issues/5583).
 - Fix `n-popselect`'s header make inner input unavailable, closes [#5494](https://github.com/tusen-ai/naive-ui/pull/5494).
 - Fix `n-qr-code`'s style of size.
 - Fix `n-badge` affects child elements' text color.
 
 ### Features
 
+- 🌟 Adds `n-float-button` and `n-float-button-group` component.
+- 🌟 Provides ES module bundle at `/dist/index.mjs` and `/dist/index.prod.mjs`.
 - `n-auto-complete` adds `append` prop.
 - `n-select` add native `title` attribute when `filterable` and blur input.
 - `n-split` adds `size` prop and `on-update:size` prop.

CHANGELOG.zh-CN.md

@@ -4,12 +4,12 @@
 
 ### Breaking Changes
 
-- 修复 `n-scrollbar` 组件的 `scrollTo (x: number, y: number)`方法参数顺序与文档不符的错误
+- 修复 `n-scrollbar` 组件的 `scrollTo(x: number, y: number)`方法参数顺序与文档不符的错误
 
 ### Fixes
 
 - 修复 `n-tree` 的 `override-default-node-click-behavior` 属性可能覆盖掉默认展开按钮和选中按钮的行为
-- Fix `n-scrollbar`'s typo on `aria-hidden` attribute.
+- 修复 `n-scrollbar` `aria-hidden` 拼写错误
 - 修复 `n-menu` `root-indent` `indent` 下内容溢出的问题，关闭 #5616
 - 修复 `n-form-item` 校验结果可能会闪烁的问题，关闭 [#5583](https://github.com/tusen-ai/naive-ui/issues/5583)
 - 修复 `n-popselect` 组件的 header 插槽里 input 无法输入，关闭 [#5494](https://github.com/tusen-ai/naive-ui/pull/5494)
@@ -18,6 +18,8 @@
 
 ### Features
 
+- 🌟 新增 `n-float-button` 和 `n-float-button-group` 组件
+- 🌟 提供 ES module 打包（在 `/dist/index.mjs` 和 `/dist/index.prod.mjs`）
 - `n-auto-complete` 新增 `append` 属性
 - `n-select` 在组件可过滤且输入失焦时，添加原生 `title` 属性
 - `n-split` 新增 `size` 和 `on-update:size` 属性

esm-test/index.spec.js

@@ -0,0 +1,14 @@
+import { NDataTable } from '../dist/index.prod.mjs'
+import { createApp } from 'vue'
+
+// eslint-disable-next-line n/no-exports-assign
+exports = undefined
+
+describe('esm', () => {
+  it('works', () => {
+    const div = document.createElement('div')
+    document.body.appendChild(div)
+    createApp(NDataTable).mount(div)
+    expect(div.innerHTML).toContain('n-data-table')
+  })
+})

jest.config.js

@@ -157,7 +157,7 @@ module.exports = {
 
   // A map from regular expressions to paths to transformers
   transform: {
-    '^.+\\.(jsx|js)?$': 'babel-jest',
+    '^.+\\.(jsx|js|mjs)?$': 'babel-jest',
     '^.+\\.(tsx|ts)?$': [
       'ts-jest',
       {

package.json

@@ -29,6 +29,7 @@
     "test:cov": "NODE_ENV=test NODE_OPTIONS=--unhandled-rejections=warn jest",
     "test:watch": "NODE_ENV=test jest ---watch --verbose --coverage",
     "test:umd": "jest --collectCoverage=false --testMatch=\"<rootDir>/umd-test/index.spec.js\"",
+    "test:esm": "jest --collectCoverage=false --testMatch=\"<rootDir>/esm-test/index.spec.js\"",
     "gen-version": "node scripts/gen-version",
     "gen-volar-dts": "esbuild scripts/gen-component-declaration.js --bundle --platform=node --tsconfig=tsconfig.esbuild.json | node",
     "build:site:ts": "bash ./scripts/pre-build-site/pre-build-site.sh && TUSIMPLE=true NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && bash ./scripts/post-build-site/post-build-site.sh",

rollup.config.js

@@ -12,6 +12,7 @@ const extensions = ['.mjs', '.js', '.json', '.ts']
 
 const baseConfig = defineConfig({
   input: path.resolve('./src/index.ts'),
+  external: ['vue'],
   plugins: [
     nodeResolve({ extensions }),
     esbuild({
@@ -24,8 +25,10 @@ const baseConfig = defineConfig({
       babelHelpers: 'bundled'
     }),
     commonjs()
-  ],
-  external: ['vue'],
+  ]
+})
+
+const umdConfig = defineConfig({
   output: {
     name: 'naive',
     format: 'umd',
@@ -36,6 +39,12 @@ const baseConfig = defineConfig({
   }
 })
 
+const esmConfig = defineConfig({
+  output: {
+    format: 'esm'
+  }
+})
+
 const devConfig = defineConfig({
   plugins: [
     replace({
@@ -45,12 +54,21 @@ const devConfig = defineConfig({
       },
       preventAssignment: true
     })
-  ],
+  ]
+})
+
+const umdDevOutputConfig = defineConfig({
   output: {
     file: path.resolve('dist/index.js')
   }
 })
 
+const esmDevOutputConfig = defineConfig({
+  output: {
+    file: path.resolve('dist/index.mjs')
+  }
+})
+
 const prodConfig = defineConfig({
   plugins: [
     replace({
@@ -61,10 +79,28 @@ const prodConfig = defineConfig({
       preventAssignment: true
     }),
     terser()
-  ],
+  ]
+})
+
+const umdProdOutputConfig = defineConfig({
   output: {
     file: path.resolve('dist/index.prod.js')
   }
 })
 
-module.exports = [merge(baseConfig, devConfig), merge(baseConfig, prodConfig)]
+const esmProdOutputConfig = defineConfig({
+  output: {
+    file: path.resolve('dist/index.prod.mjs')
+  }
+})
+
+module.exports = [
+  // umd dev
+  merge.all([baseConfig, umdConfig, devConfig, umdDevOutputConfig]),
+  // umd prod
+  merge.all([baseConfig, umdConfig, prodConfig, umdProdOutputConfig]),
+  // esm dev
+  merge.all([baseConfig, esmConfig, devConfig, esmDevOutputConfig]),
+  // esm prod
+  merge.all([baseConfig, esmConfig, prodConfig, esmProdOutputConfig])
+]

src/float-button-group/src/FloatButtonGroup.tsx

@@ -8,7 +8,12 @@ import {
   type Ref,
   toRef
 } from 'vue'
-import { type ThemeProps, useConfig, useTheme } from '../../_mixins'
+import {
+  type ThemeProps,
+  useConfig,
+  useTheme,
+  useThemeClass
+} from '../../_mixins'
 import {
   createInjectionKey,
   formatLength,
@@ -59,7 +64,7 @@ export default defineComponent({
       props,
       mergedClsPrefixRef
     )
-    const cssVarsRef = computed(() => {
+    const cssVarsRef = computed<Record<string, string>>(() => {
       const {
         self: { color, boxShadow, buttonBorderColor },
         common: { cubicBezierEaseInOut }
@@ -70,20 +75,26 @@ export default defineComponent({
         '--n-color': color,
         '--n-button-border-color': buttonBorderColor,
         position: props.position,
-        left: formatLength(props.left),
-        right: formatLength(props.right),
-        top: formatLength(props.top),
-        bottom: formatLength(props.bottom)
+        left: formatLength(props.left) || '',
+        right: formatLength(props.right) || '',
+        top: formatLength(props.top) || '',
+        bottom: formatLength(props.bottom) || ''
       }
     })
 
     provide(floatButtonGroupInjectionKey, {
       shapeRef: toRef(props, 'shape')
     })
 
+    const themeClassHandle = inlineThemeDisabled
+      ? useThemeClass('float-button', undefined, cssVarsRef, props)
+      : undefined
+
     return {
       cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
-      mergedClsPrefix: mergedClsPrefixRef
+      mergedClsPrefix: mergedClsPrefixRef,
+      themeClass: themeClassHandle?.themeClass,
+      onRender: themeClassHandle?.onRender
     }
   },
   render () {

src/float-button/demos/enUS/badge.demo.vue

@@ -1,8 +1,7 @@
 <markdown>
-  # Badge
-
-  You can put a hover button with the number of badges on any element.
+# Badge
 
+You can put a hover button with the number of badges on any element.
 </markdown>
 
 <template>

src/float-button/demos/enUS/basic.demo.vue

@@ -1,5 +1,5 @@
 <markdown>
-  # Basic
+# Basic
 </markdown>
 
 <template>

src/float-button/demos/enUS/index.demo-entry.md

@@ -1,6 +1,6 @@
 # Float Button
 
-Like `Back Top`, more appearance level, more interaction.
+Like `BackTop` but with more appearance level, more interaction.
 
 Available since `NEXT_VERSION`.
 
@@ -12,6 +12,7 @@ badge.vue
 tooltip.vue
 custom.vue
 group.vue
+menu.vue
 ```
 
 ## API
@@ -20,33 +21,33 @@ group.vue
 
 | Name | Type | Default | Description | NEXT_VERSION |
 | --- | --- | --- | --- | --- |
-| bottom | `number \| string` | `40` | 距离页面底部的高度 | NEXT_VERSION |
-| height | `number \| string` | `40` | 高度 | NEXT_VERSION |
-| left | `number \| string` | `undefined` | 距离页面左侧的宽度 | NEXT_VERSION |
-| menu-trigger | `'click' \| 'hover'` | `undefined` | 触发菜单显示的方式 | NEXT_VERSION |
-| position | `'relative' \| 'absolute' \| 'fixed'` | `'fixed'` | 按钮组的定位方式 | NEXT_VERSION |
-| right | `number \| string` | `undefined` | 距离页面右侧的宽度 | NEXT_VERSION |
-| shape | `'circle' \| 'square'` | `'circle'` | 按钮的形状 | NEXT_VERSION |
-| show-menu | `boolean` | `undefined` | 是否打开菜单 | NEXT_VERSION |
-| top | `number \| string` | `undefined` | 距离页面顶部的高度 | NEXT_VERSION |
-| type | `'default' \| 'primary'` | `'default'` | 按钮的类型 | NEXT_VERSION |
-| width | `number \| string` | `undefined` | 宽度 | NEXT_VERSION |
-| on-update:show-menu | `(value: boolean) => void` | `undefined` | 菜单打开或者关闭的回调 | NEXT_VERSION |
+| bottom | `number \| string` | `40` | CSS `bottom` property of the button group. | NEXT_VERSION |
+| height | `number \| string` | `40` | CSS `height` property of the button group. | NEXT_VERSION |
+| left | `number \| string` | `undefined` | CSS `left` property of the button group. | NEXT_VERSION |
+| menu-trigger | `'click' \| 'hover'` | `undefined` | Trigger action to show submenu. | NEXT_VERSION |
+| position | `'relative' \| 'absolute' \| 'fixed'` | `'fixed'` | CSS `position` property of the button group. | NEXT_VERSION |
+| right | `number \| string` | `undefined` | CSS `right` property of the button group. | NEXT_VERSION |
+| shape | `'circle' \| 'square'` | `'circle'` | Shape of the button. | NEXT_VERSION |
+| show-menu | `boolean` | `undefined` | Whether submenu of the button is shown. | NEXT_VERSION |
+| top | `number \| string` | `undefined` | CSS `top` property of the button group. | NEXT_VERSION |
+| type | `'default' \| 'primary'` | `'default'` | Type of the button. | NEXT_VERSION |
+| width | `number \| string` | `undefined` |  | NEXT_VERSION |
+| on-update:show-menu | `(value: boolean) => void` | `undefined` | Callback when the menu is opened or closed. | NEXT_VERSION |
 
 ### FloatButtonGroup Props
 
 | Name | Type | Default | Description | NEXT_VERSION |
 | --- | --- | --- | --- | --- |
-| bottom | `number \| string` | `undefined` | 距离页面底部的高度 | NEXT_VERSION |
-| left | `number \| string` | `undefined` | 距离页面左侧的宽度 | NEXT_VERSION |
-| position | `'relative' \| 'absolute' \| 'fixed'` | `'fixed'` | 按钮组的定位方式 | NEXT_VERSION |
-| right | `number \| string` | `undefined` | 距离页面右侧的宽度 | NEXT_VERSION |
-| shape | `'circle' \| 'square'` | `'circle'` | 按钮组的形状 | NEXT_VERSION |
-| top | `number \| string` | `undefined` | 距离页面顶部的高度 | NEXT_VERSION |
+| bottom | `number \| string` | `undefined` | CSS `bottom` property of the button group. | NEXT_VERSION |
+| left | `number \| string` | `undefined` | CSS `left` property of the button group. | NEXT_VERSION |
+| position | `'relative' \| 'absolute' \| 'fixed'` | `'fixed'` | CSS `position` property of the button group. | NEXT_VERSION |
+| right | `number \| string` | `undefined` | CSS `right` property of the button group. | NEXT_VERSION |
+| shape | `'circle' \| 'square'` | `'circle'` | Shape of the button group. | NEXT_VERSION |
+| top | `number \| string` | `undefined` | CSS `top` property of the button group. | NEXT_VERSION |
 
 ### FloatButton Slots
 
-| Name        | Parameters | Description        | Version      |
-| ----------- | ---------- | ------------------ | ------------ |
-| description | `()`       | 按钮中的描述信息   | NEXT_VERSION |
-| menu        | `()`       | 按钮会触发的子菜单 | NEXT_VERSION |
+| Name        | Parameters | Description                  | Version      |
+| ----------- | ---------- | ---------------------------- | ------------ |
+| description | `()`       | Description for the button.  | NEXT_VERSION |
+| menu        | `()`       | Submenu of the float button. | NEXT_VERSION |

src/float-button/demos/enUS/menu.demo.vue

@@ -1,7 +1,7 @@
 <markdown>
-# 菜单显示
+# Show menu
 
-设定 `menu-trigger` 后，更多的 `n-float-button` 可被折叠于一个 `n-float-button` 中。
+After `menu-trigger` is set, more `n-float-button` can be folded into one `n-float-button`.
 </markdown>
 
 <template>

src/float-button/demos/enUS/tooltip.demo.vue

@@ -1,5 +1,5 @@
 <markdown>
-  # Tooltip
+# Tooltip
 </markdown>
 
 <template>
@@ -11,7 +11,7 @@
         </n-icon>
       </n-float-button>
     </template>
-    This story is not over.
+    Lpsum
   </n-tooltip>
 </template>
 

src/float-button/demos/zhCN/index.demo-entry.md

@@ -21,29 +21,29 @@ menu.vue
 
 | 名称 | 类型 | 默认值 | 说明 | 版本 |
 | --- | --- | --- | --- | --- |
-| bottom | `number \| string` | `40` | 距离页面底部的高度 | NEXT_VERSION |
-| height | `number \| string` | `40` | 高度 | NEXT_VERSION |
-| left | `number \| string` | `undefined` | 距离页面左侧的宽度 | NEXT_VERSION |
+| bottom | `number \| string` | `40` | 按钮的 CSS `bottom` 属性 | NEXT_VERSION |
+| height | `number \| string` | `40` | 按钮的 CSS `height` 属性 | NEXT_VERSION |
+| left | `number \| string` | `undefined` | 按钮的 CSS `left` 属性 | NEXT_VERSION |
 | menu-trigger | `'click' \| 'hover'` | `undefined` | 触发菜单显示的方式 | NEXT_VERSION |
 | position | `'relative' \| 'absolute' \| 'fixed'` | `'fixed'` | 按钮组的定位方式 | NEXT_VERSION |
-| right | `number \| string` | `undefined` | 距离页面右侧的宽度 | NEXT_VERSION |
+| right | `number \| string` | `undefined` | 按钮的 CSS `right` 属性 | NEXT_VERSION |
 | shape | `'circle' \| 'square'` | `'circle'` | 按钮的形状 | NEXT_VERSION |
 | show-menu | `boolean` | `undefined` | 是否打开菜单 | NEXT_VERSION |
-| top | `number \| string` | `undefined` | 距离页面顶部的高度 | NEXT_VERSION |
+| top | `number \| string` | `undefined` | 按钮的 CSS `top` 属性 | NEXT_VERSION |
 | type | `'default' \| 'primary'` | `'default'` | 按钮的类型 | NEXT_VERSION |
-| width | `number \| string` | `undefined` | 宽度 | NEXT_VERSION |
+| width | `number \| string` | `undefined` | 按钮的 CSS `width` 属性 | NEXT_VERSION |
 | on-update:show-menu | `(value: boolean) => void` | `undefined` | 菜单打开或者关闭的回调 | NEXT_VERSION |
 
 ### FloatButtonGroup Props
 
 | 名称 | 类型 | 默认值 | 说明 | 版本 |
 | --- | --- | --- | --- | --- |
-| bottom | `number \| string` | `undefined` | 距离页面底部的高度 | NEXT_VERSION |
-| left | `number \| string` | `undefined` | 距离页面左侧的宽度 | NEXT_VERSION |
+| bottom | `number \| string` | `undefined` | 按钮组的 CSS `bottom` 属性 | NEXT_VERSION |
+| left | `number \| string` | `undefined` | 按钮组的 CSS `left` 属性 | NEXT_VERSION |
 | position | `'relative' \| 'absolute' \| 'fixed'` | `'fixed'` | 按钮组的定位方式 | NEXT_VERSION |
-| right | `number \| string` | `undefined` | 距离页面右侧的宽度 | NEXT_VERSION |
+| right | `number \| string` | `undefined` | 按钮组的 CSS `right` 属性 | NEXT_VERSION |
 | shape | `'circle' \| 'square'` | `'circle'` | 按钮组的形状 | NEXT_VERSION |
-| top | `number \| string` | `undefined` | 距离页面顶部的高度 | NEXT_VERSION |
+| top | `number \| string` | `undefined` | 按钮组的 CSS `top` 属性 | NEXT_VERSION |
 
 ### FloatButton Slots