@yh-ui/utils 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +30 -197
- package/package.json +3 -2
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,226 +1,59 @@
|
|
|
1
1
|
# @yh-ui/utils
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
<img src="https://raw.githubusercontent.com/1079161148/yh-ui/main/docs/public/logo.svg" width="100" height="100" alt="YH-UI Logo">
|
|
5
|
-
</p>
|
|
3
|
+
YH-UI 的基础工具函数包,提供类型判断、DOM 安全访问、Vue install helpers、样式工具和通用对象函数。它是组件库内部的基础层,也适合在业务项目中作为轻量工具包使用。
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
[Documentation](https://1079161148.github.io/yh-ui/) | [GitHub](https://github.com/1079161148/yh-ui)
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
YH-UI 组件库的基础工具集。高性能、零依赖、完整类型,可独立用于任意 Vue 3 项目。
|
|
11
|
-
</p>
|
|
7
|
+
## Highlights
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</a>
|
|
20
|
-
<a href="https://github.com/1079161148/yh-ui/blob/main/LICENSE">
|
|
21
|
-
<img src="https://img.shields.io/npm/l/@yh-ui/utils.svg?style=flat-square" alt="license">
|
|
22
|
-
</a>
|
|
23
|
-
</p>
|
|
9
|
+
- 类型判断:`isString`、`isNumber`、`isBoolean`、`isFunction`、`isObject`、`isPromise`、`isNil`、`isEmpty`、`isNumeric`。
|
|
10
|
+
- 通用函数:`generateId`、`debounce`、`throttle`、`deepClone`、`deepMerge`、`toArray`、`capitalize`、`kebabCase`、`camelCase`、`sleep`、`get`、`set`、`retry`。
|
|
11
|
+
- DOM 工具:`isClient`、`isServer`、`getStyle`、`setStyle`、`addClass`、`removeClass`、`getScrollContainer`、`isInViewport`、`getScrollbarWidth`。
|
|
12
|
+
- 样式工具:`addUnit`、`removeUnit`、`hexToRgb`、`rgbToHex`、`adjustColorBrightness`、`generateColorPalette`、`setCssVar`、`getCssVar`、`setCssVars`。
|
|
13
|
+
- Vue helpers:`withInstall`、`withNoopInstall`、`withInstallFunction`、`withInstallDirective`、`withInstallAll`。
|
|
14
|
+
- TypeScript first:导出 `Nullable`、`Awaitable`、`Arrayable`、`Recordable`、`ComponentSize`、`SFCWithInstall` 等常用类型。
|
|
24
15
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
## ✨ 特性
|
|
28
|
-
|
|
29
|
-
- 🔒 **完整 TypeScript 类型** — 所有函数均有精确类型定义,无 `any`
|
|
30
|
-
- 🌿 **Tree-shaking 友好** — 每个工具函数均可单独导入
|
|
31
|
-
- 🌐 **SSR 安全** — 所有涉及 DOM/BOM 的操作均有服务端安全防护
|
|
32
|
-
- 📦 **零运行时依赖** — 不引入任何第三方库
|
|
33
|
-
- ⚡ **高性能** — 广泛使用记忆化、惰性求值等优化手段
|
|
34
|
-
|
|
35
|
-
---
|
|
36
|
-
|
|
37
|
-
## 📦 安装
|
|
16
|
+
## Install
|
|
38
17
|
|
|
39
18
|
```bash
|
|
40
|
-
# pnpm(推荐)
|
|
41
19
|
pnpm add @yh-ui/utils
|
|
42
|
-
|
|
43
|
-
# npm
|
|
44
|
-
npm install @yh-ui/utils
|
|
45
20
|
```
|
|
46
21
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
---
|
|
50
|
-
|
|
51
|
-
## 🔨 使用
|
|
52
|
-
|
|
53
|
-
### 完整导入
|
|
54
|
-
|
|
55
|
-
```ts
|
|
56
|
-
import { isString, debounce, deepClone } from '@yh-ui/utils'
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
### 按需导入
|
|
22
|
+
## Usage
|
|
60
23
|
|
|
61
24
|
```ts
|
|
62
|
-
import {
|
|
63
|
-
import { debounce } from '@yh-ui/utils/function'
|
|
64
|
-
import { deepClone } from '@yh-ui/utils/object'
|
|
65
|
-
```
|
|
25
|
+
import { debounce, deepClone, isClient, kebabCase } from '@yh-ui/utils'
|
|
66
26
|
|
|
67
|
-
|
|
27
|
+
const search = debounce((keyword: string) => {
|
|
28
|
+
console.log(keyword)
|
|
29
|
+
}, 300)
|
|
68
30
|
|
|
69
|
-
|
|
31
|
+
const copied = deepClone({ nested: { value: 1 } })
|
|
32
|
+
const className = kebabCase('YhButton')
|
|
70
33
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
import {
|
|
75
|
-
isString,
|
|
76
|
-
isNumber,
|
|
77
|
-
isBoolean,
|
|
78
|
-
isFunction,
|
|
79
|
-
isArray,
|
|
80
|
-
isObject,
|
|
81
|
-
isDate,
|
|
82
|
-
isRegExp,
|
|
83
|
-
isPromise,
|
|
84
|
-
isSymbol,
|
|
85
|
-
isNil,
|
|
86
|
-
isDef,
|
|
87
|
-
isClient,
|
|
88
|
-
isServer,
|
|
89
|
-
isEmpty
|
|
90
|
-
} from '@yh-ui/utils'
|
|
91
|
-
|
|
92
|
-
isString('hello') // true
|
|
93
|
-
isArray([1, 2]) // true
|
|
94
|
-
isClient // 是否在浏览器环境
|
|
95
|
-
isNil(null) // true(null 或 undefined)
|
|
96
|
-
isEmpty({}) // true
|
|
97
|
-
isEmpty([]) // true
|
|
98
|
-
isEmpty('') // true
|
|
34
|
+
if (isClient) {
|
|
35
|
+
search('yh-ui')
|
|
36
|
+
}
|
|
99
37
|
```
|
|
100
38
|
|
|
101
|
-
|
|
39
|
+
## Style Utilities
|
|
102
40
|
|
|
103
41
|
```ts
|
|
104
|
-
import {
|
|
105
|
-
|
|
106
|
-
// 防抖:300ms 内只执行一次
|
|
107
|
-
const handleInput = debounce((val: string) => fetchSearch(val), 300)
|
|
108
|
-
|
|
109
|
-
// 节流:每 200ms 最多执行一次
|
|
110
|
-
const handleScroll = throttle(() => updatePosition(), 200)
|
|
42
|
+
import { generateColorPalette, setCssVar } from '@yh-ui/utils'
|
|
111
43
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
// 记忆化(相同参数缓存结果)
|
|
116
|
-
const expensiveCalc = memoize((n: number) => fibonacci(n))
|
|
44
|
+
const palette = generateColorPalette('#409eff')
|
|
45
|
+
setCssVar('--yh-color-primary', palette.primary)
|
|
117
46
|
```
|
|
118
47
|
|
|
119
|
-
|
|
48
|
+
## Vue Install Helpers
|
|
120
49
|
|
|
121
50
|
```ts
|
|
122
|
-
import {
|
|
123
|
-
|
|
124
|
-
// 深拷贝(支持循环引用、Date、RegExp、Map、Set)
|
|
125
|
-
const clone = deepClone(original)
|
|
126
|
-
|
|
127
|
-
// 深合并(不可变,返回新对象)
|
|
128
|
-
const merged = deepMerge(defaults, overrides)
|
|
51
|
+
import { withInstall } from '@yh-ui/utils'
|
|
52
|
+
import Button from './Button.vue'
|
|
129
53
|
|
|
130
|
-
|
|
131
|
-
const subset = pick(obj, ['name', 'age'])
|
|
132
|
-
|
|
133
|
-
// 排除指定属性
|
|
134
|
-
const without = omit(obj, ['password', 'secret'])
|
|
135
|
-
|
|
136
|
-
// 扁平化嵌套对象
|
|
137
|
-
// { a: { b: { c: 1 } } } => { 'a.b.c': 1 }
|
|
138
|
-
const flat = flattenObject(nestedObj)
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
### 📝 字符串工具(`string`)
|
|
142
|
-
|
|
143
|
-
```ts
|
|
144
|
-
import {
|
|
145
|
-
capitalize,
|
|
146
|
-
camelCase,
|
|
147
|
-
kebabCase,
|
|
148
|
-
snakeCase,
|
|
149
|
-
truncate,
|
|
150
|
-
escapeHtml,
|
|
151
|
-
stripHtml,
|
|
152
|
-
generateId
|
|
153
|
-
} from '@yh-ui/utils'
|
|
154
|
-
|
|
155
|
-
capitalize('hello world') // 'Hello world'
|
|
156
|
-
camelCase('background-color') // 'backgroundColor'
|
|
157
|
-
kebabCase('backgroundColor') // 'background-color'
|
|
158
|
-
truncate('很长的文字内容', 10) // '很长的文字内容...'
|
|
159
|
-
escapeHtml('<script>alert(1)</script>') // '<script>...'
|
|
160
|
-
generateId() // 'yh-xxxxxxxx'(唯一 ID)
|
|
54
|
+
export const YhButton = withInstall(Button)
|
|
161
55
|
```
|
|
162
56
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
```ts
|
|
166
|
-
import { clamp, round, formatNumber, randomInt } from '@yh-ui/utils'
|
|
167
|
-
|
|
168
|
-
clamp(150, 0, 100) // 100(限制在范围内)
|
|
169
|
-
round(3.14159, 2) // 3.14
|
|
170
|
-
formatNumber(1234567.89) // '1,234,567.89'
|
|
171
|
-
randomInt(1, 10) // 随机整数 [1, 10]
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
### 📅 日期工具(`date`)
|
|
175
|
-
|
|
176
|
-
```ts
|
|
177
|
-
import { formatDate, parseDate, diffDate, isToday } from '@yh-ui/utils'
|
|
178
|
-
|
|
179
|
-
formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss') // '2025-03-26 11:30:00'
|
|
180
|
-
isToday(new Date()) // true
|
|
181
|
-
diffDate(date1, date2, 'day') // 相差天数
|
|
182
|
-
```
|
|
183
|
-
|
|
184
|
-
### 🌐 DOM 工具(`dom`)
|
|
185
|
-
|
|
186
|
-
```ts
|
|
187
|
-
import { getScrollTop, setScrollTop, getStyle, hasClass, addClass, removeClass } from '@yh-ui/utils'
|
|
188
|
-
|
|
189
|
-
// 所有 DOM 工具均有 SSR 安全防护
|
|
190
|
-
getScrollTop() // 获取页面滚动距离
|
|
191
|
-
setScrollTop(200) // 设置页面滚动位置
|
|
192
|
-
getStyle(el, 'font-size') // 获取计算样式
|
|
193
|
-
hasClass(el, 'active') // 是否有类名
|
|
194
|
-
addClass(el, 'active') // 添加类名
|
|
195
|
-
removeClass(el, 'active') // 移除类名
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
### 🎨 颜色工具(`color`)
|
|
199
|
-
|
|
200
|
-
```ts
|
|
201
|
-
import { hexToRgb, rgbToHsv, lighten, darken, mix } from '@yh-ui/utils'
|
|
202
|
-
|
|
203
|
-
hexToRgb('#409eff') // { r: 64, g: 158, b: 255 }
|
|
204
|
-
lighten('#409eff', 0.3) // 亮化 30%
|
|
205
|
-
darken('#409eff', 0.3) // 暗化 30%
|
|
206
|
-
mix('#409eff', '#ffffff', 0.5) // 混合两种颜色
|
|
207
|
-
```
|
|
208
|
-
|
|
209
|
-
---
|
|
210
|
-
|
|
211
|
-
## ⚠️ 注意事项
|
|
212
|
-
|
|
213
|
-
- **DOM 工具**:在 SSR 环境(Nuxt)中,`isClient` 会返回 `false`,所有 DOM 操作自动跳过
|
|
214
|
-
- **deepClone**:对于 `WeakMap`、`WeakSet` 等弱引用类型不做深拷贝处理
|
|
215
|
-
- **escapeHtml**:始终对用户输入使用此函数,防范 XSS 攻击
|
|
216
|
-
|
|
217
|
-
---
|
|
218
|
-
|
|
219
|
-
## 🔗 相关资源
|
|
220
|
-
|
|
221
|
-
- [📖 官方文档](https://1079161148.github.io/yh-ui/)
|
|
222
|
-
- [📦 GitHub 仓库](https://github.com/1079161148/yh-ui)
|
|
223
|
-
|
|
224
|
-
## 📄 开源协议
|
|
57
|
+
## License
|
|
225
58
|
|
|
226
|
-
MIT
|
|
59
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yh-ui/utils",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"description": "YH-UI utility functions",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
"types": "./dist/*.d.ts",
|
|
18
18
|
"import": "./dist/*.mjs",
|
|
19
19
|
"require": "./dist/*.cjs"
|
|
20
|
-
}
|
|
20
|
+
},
|
|
21
|
+
"./package.json": "./package.json"
|
|
21
22
|
},
|
|
22
23
|
"files": [
|
|
23
24
|
"dist"
|