Merge branch 'varletjs:dev' into dev

william-xue · web-flow · commit a935ceaa7761 · 2025-06-30T09:26:03.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+# [3.11.0](https://github.com/varletjs/varlet/compare/v3.10.9...v3.11.0) (2025-06-22)
+
+
+
+## [3.10.9](https://github.com/varletjs/varlet/compare/v3.10.8...v3.10.9) (2025-06-12)
+
+
+### Features
+
+* **theme:** support toRem and convert ([61870de](https://github.com/varletjs/varlet/commit/61870de5109fd897c359f58fca26130e2df2236e))
+
+
+
 ## [3.10.8](https://github.com/varletjs/varlet/compare/v3.10.7...v3.10.8) (2025-06-01)
 
 
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "3.10.8",
+  "version": "3.11.0",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/packages/varlet-cli/package.json b/packages/varlet-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "3.10.8",
+  "version": "3.11.0",
   "description": "cli of varlet",
   "keywords": [
     "cli",
diff --git a/packages/varlet-icons/package.json b/packages/varlet-icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@varlet/icons",
-  "version": "3.10.8",
+  "version": "3.11.0",
   "description": "Icons of varlet",
   "keywords": [
     "icons",
diff --git a/packages/varlet-import-resolver/package.json b/packages/varlet-import-resolver/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@varlet/import-resolver",
-  "version": "3.10.8",
+  "version": "3.11.0",
   "description": "varlet import resolver for unplugin-vue-components and unplugin-auto-import",
   "keywords": [
     "varlet",
diff --git a/packages/varlet-preset-tailwindcss/package.json b/packages/varlet-preset-tailwindcss/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@varlet/preset-tailwindcss",
-  "version": "3.10.8",
+  "version": "3.11.0",
   "description": "tailwindcss preset of varlet",
   "keywords": [
     "tailwindcss",
diff --git a/packages/varlet-preset-unocss/package.json b/packages/varlet-preset-unocss/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@varlet/preset-unocss",
-  "version": "3.10.8",
+  "version": "3.11.0",
   "description": "unocss preset of varlet",
   "keywords": [
     "unocss",
diff --git a/packages/varlet-shared/package.json b/packages/varlet-shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@varlet/shared",
-  "version": "3.10.8",
+  "version": "3.11.0",
   "description": "shared utils of varlet",
   "keywords": [
     "shared",
diff --git a/packages/varlet-touch-emulator/package.json b/packages/varlet-touch-emulator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@varlet/touch-emulator",
-  "version": "3.10.8",
+  "version": "3.11.0",
   "description": "touch-emulator",
   "keywords": [
     "emulator",
diff --git a/packages/varlet-ui-playground/package.json b/packages/varlet-ui-playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui-playground",
-  "version": "3.10.8",
+  "version": "3.11.0",
   "private": true,
   "description": "varlet ui playground",
   "keywords": [
diff --git a/packages/varlet-ui/docs/browserAdaptation.en-US.md b/packages/varlet-ui/docs/browserAdaptation.en-US.md
@@ -43,7 +43,7 @@ module.exports = {
 }
 ```
 
-#### Theme Unit Adaptation
+#### Theme Unit Adaptation (Viewport)
 
 Because the theme is mounted at runtime and is not affected by postcss, the component library provides a utility tool `Themes.toViewport` for adaptation. The theme returned by the function will use the `375px -> 100vmin` rule by default.
 
@@ -68,6 +68,29 @@ const viewportTheme = Themes.toViewport(Themes.md3Dark, {
 })
 ```
 
+#### Theme Unit Adaptation (Rem)
+
+Similar to the Viewport solution
+
+```js
+import { Themes } from '@varlet/ui'
+
+const remTheme = Themes.toRem(Themes.md3Dark)
+```
+
+Or customize
+
+```js
+import { Themes } from '@varlet/ui'
+
+const viewportTheme = Themes.toRem(Themes.md3Dark, {
+  // defaults 16
+  rootFontSize: 32,
+  // defaults 6
+  unitPrecision: 4,
+})
+```
+
 ### Desktop Adaptation
 
 Because component library interaction events are developed using `touch` events, `mouse` events on the desktop side are not supported.
diff --git a/packages/varlet-ui/docs/browserAdaptation.zh-CN.md b/packages/varlet-ui/docs/browserAdaptation.zh-CN.md
@@ -42,7 +42,7 @@ module.exports = {
 }
 ```
 
-#### 主题包单位适配
+#### 主题包单位适配 (Viewport)
 
 因为主题包是运行时挂载的，不受 postcss 影响，组件库提供了实用工具 `Themes.toViewport` 进行适配，函数返回的主题将默认使用 `375px -> 100vmin` 的规则。
 
@@ -67,6 +67,29 @@ const viewportTheme = Themes.toViewport(Themes.md3Dark, {
 })
 ```
 
+####  主题包单位适配 (Rem)
+
+与 `Viewport` 方案类似
+
+```js
+import { Themes } from '@varlet/ui'
+
+const remTheme = Themes.toRem(Themes.md3Dark)
+```
+
+也支持自定义
+
+```js
+import { Themes } from '@varlet/ui'
+
+const viewportTheme = Themes.toRem(Themes.md3Dark, {
+  // 默认值为 16
+  rootFontSize: 32,
+  // 默认值为 6
+  unitPrecision: 4,
+})
+```
+
 ### 桌面端适配
 
 由于组件库交互事件使用 `touch` 事件进行开发，不支持桌面端的 `mouse` 事件，
diff --git a/packages/varlet-ui/package.json b/packages/varlet-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.10.8",
+  "version": "3.11.0",
   "description": "A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.",
   "keywords": [
     "Vue3",
diff --git a/packages/varlet-ui/src/ellipsis/Ellipsis.vue b/packages/varlet-ui/src/ellipsis/Ellipsis.vue
@@ -1,12 +1,14 @@
 <template>
-  <var-tooltip v-bind="tooltipProps">
-    <span
-      :class="
-        classes(n(), [lineClamp, n('--clamp'), n('--line')], [expandTrigger, n('--cursor')], [expanding, n('--expand')])
-      "
-      :style="rootStyles"
-      @click="handleClick"
-    >
+  <var-tooltip
+    :class="
+      classes(n(), [lineClamp, n('--clamp'), n('--line')], [expandTrigger, n('--cursor')], [expanding, n('--expand')])
+    "
+    var-ellipsis-cover
+    :style="rootStyles"
+    v-bind="tooltipProps"
+    @click="handleClick"
+  >
+    <span>
       <slot />
     </span>
 
diff --git a/packages/varlet-ui/src/ellipsis/ellipsis.less b/packages/varlet-ui/src/ellipsis/ellipsis.less
@@ -1,25 +1,27 @@
 .var-ellipsis {
-  width: 100%;
-  overflow: hidden;
-  vertical-align: bottom;
-  -webkit-tap-highlight-color: transparent;
+  &[var-ellipsis-cover] {
+    width: 100%;
+    overflow: hidden;
+    vertical-align: bottom;
+    -webkit-tap-highlight-color: transparent;
+  }
 
-  &--clamp {
+  &--clamp[var-ellipsis-cover] {
     display: -webkit-inline-box;
     -webkit-box-orient: vertical;
   }
 
-  &--line {
+  &--line[var-ellipsis-cover] {
     display: inline-block;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
-  &--cursor {
+  &--cursor[var-ellipsis-cover] {
     cursor: pointer;
   }
 
-  &--expand {
+  &--expand[var-ellipsis-cover] {
     display: inline-block;
     white-space: wrap;
     overflow: visible;
diff --git a/packages/varlet-ui/src/snackbar/docs/en-US.md b/packages/varlet-ui/src/snackbar/docs/en-US.md
@@ -141,7 +141,7 @@ import { Snackbar } from '@varlet/ui'
 </script>
 
 <template>
-  <var-button type="warning" block @click="Snackbar("Hello, I'm a snackbar")">Basic Usage</var-button>
+  <var-button type="warning" block @click="Snackbar('Hello, I\'m a snackbar')">Basic Usage</var-button>
 </template>
 ```
 
diff --git a/packages/varlet-ui/src/snackbar/docs/zh-CN.md b/packages/varlet-ui/src/snackbar/docs/zh-CN.md
@@ -139,7 +139,7 @@ import { Snackbar } from '@varlet/ui'
 </script>
 
 <template>
-  <var-button type="warning" block @click="Snackbar("这是一个消息条！！")">基本使用</var-button>
+  <var-button type="warning" block @click="Snackbar('这是一个消息条！！')">基本使用</var-button>
 </template>
 ```
 
diff --git a/packages/varlet-ui/src/themes/__tests__/index.spec.js b/packages/varlet-ui/src/themes/__tests__/index.spec.js
@@ -61,3 +61,51 @@ test('toViewport', () => {
     '--g': 'calc(100% - 4vw)',
   })
 })
+
+test('toRem', () => {
+  expect(
+    Themes.toRem({
+      '--a': '30px',
+      '--b': '30px -30px',
+      '--c': '30px 30px 30px',
+      '--d': '30px 30px 30px 30px',
+      '--e': '10px',
+      '--f': '10.55px',
+      '--g': 'calc(100% - 30px)',
+    }),
+  ).toStrictEqual({
+    '--a': '1.875rem',
+    '--b': '1.875rem -1.875rem',
+    '--c': '1.875rem 1.875rem 1.875rem',
+    '--d': '1.875rem 1.875rem 1.875rem 1.875rem',
+    '--e': '0.625rem',
+    '--f': '0.659375rem',
+    '--g': 'calc(100% - 1.875rem)',
+  })
+
+  expect(
+    Themes.toRem(
+      {
+        '--a': '30px',
+        '--b': '30px -30px',
+        '--c': '30px 30px 30px',
+        '--d': '30px 30px 30px 30px',
+        '--e': '10px',
+        '--f': '10.55px',
+        '--g': 'calc(100% - 30px)',
+      },
+      {
+        rootFontSize: 30,
+        unitPrecision: 4,
+      },
+    ),
+  ).toStrictEqual({
+    '--a': '1rem',
+    '--b': '1rem -1rem',
+    '--c': '1rem 1rem 1rem',
+    '--d': '1rem 1rem 1rem 1rem',
+    '--e': '0.3333rem',
+    '--f': '0.3517rem',
+    '--g': 'calc(100% - 1rem)',
+  })
+})
diff --git a/packages/varlet-ui/src/themes/convert.d.ts b/packages/varlet-ui/src/themes/convert.d.ts
@@ -0,0 +1,3 @@
+import { Themes } from '../../types'
+
+declare const convert: Themes['convert']
diff --git a/packages/varlet-ui/src/themes/convert.ts b/packages/varlet-ui/src/themes/convert.ts
@@ -0,0 +1,9 @@
+import { StyleVars } from '../style-provider'
+
+export function convert(theme: StyleVars, converter: (value: number) => string) {
+  return Object.entries(theme).reduce((target, [key, value]) => {
+    target[key] = value.includes('px') ? value.replace(/(\d+(\.\d+)?)px/g, (_, p1) => converter(p1)) : value
+
+    return target
+  }, {} as StyleVars)
+}
diff --git a/packages/varlet-ui/src/themes/index.ts b/packages/varlet-ui/src/themes/index.ts
@@ -1,9 +1,11 @@
+import { convert } from './convert'
 import dark from './dark'
 import md3Dark from './md3-dark'
 import md3Light from './md3-light'
+import { toRem } from './toRem'
 import { toViewport } from './toViewport'
 
-const Themes = { dark, md3Light, md3Dark, toViewport }
+const Themes = { dark, md3Light, md3Dark, toViewport, toRem, convert }
 
 export const _ThemesComponent = null
 
diff --git a/packages/varlet-ui/src/themes/toRem.d.ts b/packages/varlet-ui/src/themes/toRem.d.ts
@@ -0,0 +1,3 @@
+import { Themes } from '../../types'
+
+declare const toRem: Themes['toRem']
diff --git a/packages/varlet-ui/src/themes/toRem.ts b/packages/varlet-ui/src/themes/toRem.ts
@@ -0,0 +1,12 @@
+import { StyleVars } from '../style-provider'
+import { convert } from './convert'
+
+export interface ThemesToRemOptions {
+  rootFontSize?: number
+  unitPrecision?: number
+}
+
+export function toRem(theme: StyleVars, options: ThemesToRemOptions = {}) {
+  const { rootFontSize = 16, unitPrecision = 6 } = options
+  return convert(theme, (value) => `${Number((value / rootFontSize).toFixed(unitPrecision))}rem`)
+}
diff --git a/packages/varlet-ui/src/themes/toViewport.ts b/packages/varlet-ui/src/themes/toViewport.ts
@@ -1,4 +1,5 @@
 import { StyleVars } from '../style-provider'
+import { convert } from './convert'
 
 export interface ThemesToViewportOptions {
   viewportWidth?: number
@@ -9,14 +10,5 @@ export interface ThemesToViewportOptions {
 export function toViewport(theme: StyleVars, options: ThemesToViewportOptions = {}) {
   const { viewportWidth = 375, viewportUnit = 'vmin', unitPrecision = 6 } = options
 
-  return Object.entries(theme).reduce((target, [key, value]) => {
-    target[key] = value.includes('px')
-      ? value.replace(
-          /(\d+(\.\d+)?)px/g,
-          (_, p1) => `${Number(((p1 / viewportWidth) * 100).toFixed(unitPrecision))}${viewportUnit}`,
-        )
-      : value
-
-    return target
-  }, {} as StyleVars)
+  return convert(theme, (value) => `${Number(((value / viewportWidth) * 100).toFixed(unitPrecision))}${viewportUnit}`)
 }
diff --git a/packages/varlet-ui/types/themes.d.ts b/packages/varlet-ui/types/themes.d.ts
@@ -6,12 +6,19 @@ export interface ThemesToViewportOptions {
   unitPrecision?: number
 }
 
+export interface ThemesToRemOptions {
+  rootFontSize?: number
+  unitPrecision?: number
+}
+
 interface Themes {
   dark: StyleVars
   md3Light: StyleVars
   md3Dark: StyleVars
 
+  convert(theme: StyleVars, converter: (value: number) => string): StyleVars
   toViewport(theme: StyleVars, options?: ThemesToViewportOptions): StyleVars
+  toRem(theme: StyleVars, options?: ThemesToRemOptions): StyleVars
 }
 
 export declare const Themes: Themes
diff --git a/packages/varlet-use/package.json b/packages/varlet-use/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@varlet/use",
-  "version": "3.10.8",
+  "version": "3.11.0",
   "description": "composable utils of varlet",
   "keywords": [
     "composable",
diff --git a/packages/varlet-vite-plugins/package.json b/packages/varlet-vite-plugins/package.json
diff --git a/packages/varlet-vscode-extension/package.json b/packages/varlet-vscode-extension/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "version": "3.10.8",`
	`2`	`+ "version": "3.11.0",`
`3`	`3`	`"private": true,`
`4`	`4`	`"type": "module",`
`5`	`5`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@varlet/cli",`
`3`		`- "version": "3.10.8",`
	`3`	`+ "version": "3.11.0",`
`4`	`4`	`"description": "cli of varlet",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"cli",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@varlet/icons",`
`3`		`- "version": "3.10.8",`
	`3`	`+ "version": "3.11.0",`
`4`	`4`	`"description": "Icons of varlet",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"icons",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@varlet/import-resolver",`
`3`		`- "version": "3.10.8",`
	`3`	`+ "version": "3.11.0",`
`4`	`4`	`"description": "varlet import resolver for unplugin-vue-components and unplugin-auto-import",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"varlet",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@varlet/preset-tailwindcss",`
`3`		`- "version": "3.10.8",`
	`3`	`+ "version": "3.11.0",`
`4`	`4`	`"description": "tailwindcss preset of varlet",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"tailwindcss",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@varlet/preset-unocss",`
`3`		`- "version": "3.10.8",`
	`3`	`+ "version": "3.11.0",`
`4`	`4`	`"description": "unocss preset of varlet",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"unocss",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@varlet/shared",`
`3`		`- "version": "3.10.8",`
	`3`	`+ "version": "3.11.0",`
`4`	`4`	`"description": "shared utils of varlet",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"shared",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@varlet/touch-emulator",`
`3`		`- "version": "3.10.8",`
	`3`	`+ "version": "3.11.0",`
`4`	`4`	`"description": "touch-emulator",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"emulator",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@varlet/ui-playground",`
`3`		`- "version": "3.10.8",`
	`3`	`+ "version": "3.11.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"description": "varlet ui playground",`
`6`	`6`	`"keywords": [`