@zfqh/uview-x 0.0.5 → 0.0.7
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/CHANGELOG.md +16 -0
- package/README.md +51 -8
- package/components/uv-badge/uv-badge.vue +4 -4
- package/components/uv-button/uv-button.vue +10 -10
- package/components/uv-checkbox/uv-checkbox.vue +11 -9
- package/components/uv-checkbox-group/uv-checkbox-group.vue +2 -2
- package/components/uv-code/uv-code.vue +2 -2
- package/components/uv-dialog/uv-dialog.vue +11 -10
- package/components/uv-form/uv-form.vue +244 -246
- package/components/uv-form-item/uv-form-item.vue +10 -9
- package/components/uv-icon/uv-icon.vue +13 -13
- package/components/uv-input/uv-input.vue +6 -5
- package/components/uv-line/uv-line.vue +7 -6
- package/components/uv-line-progress/uv-line-progress.vue +5 -5
- package/components/uv-loading-icon/uv-loading-icon.vue +9 -8
- package/components/uv-overlay/uv-overlay.vue +3 -2
- package/components/uv-popup/uv-popup.vue +7 -5
- package/components/uv-safe-bottom/uv-safe-bottom.vue +4 -3
- package/components/uv-status-bar/uv-status-bar.vue +4 -3
- package/components/uv-tabs/uv-tabs.vue +15 -12
- package/components/uv-transition/uv-transition.vue +2 -2
- package/hooks/index.ts +5 -5
- package/hooks/useDebounce.ts +33 -35
- package/hooks/useI18n.ts +4 -3
- package/hooks/useThrottle.ts +36 -38
- package/index.ts +50 -29
- package/locales/en.ts +56 -79
- package/locales/es.ts +47 -69
- package/locales/fr.ts +47 -69
- package/locales/index.ts +15 -159
- package/locales/ru.ts +47 -69
- package/locales/zh-Hans.ts +57 -79
- package/locales/zh-Hant.ts +47 -69
- package/package.json +2 -2
- package/types/index.d.ts +68 -66
- package/utils/color.ts +139 -0
- package/utils/compress.ts +28 -28
- package/utils/config.ts +45 -10
- package/utils/debounce.ts +4 -4
- package/utils/function.ts +2 -87
- package/utils/locale.ts +444 -304
- package/utils/merge.ts +74 -0
- package/utils/platform.ts +28 -28
- package/utils/route.ts +123 -129
- package/utils/scrollbar.ts +19 -19
- package/utils/throttle.ts +4 -4
- package/utils/colorGradient.ts +0 -139
- package/utils/index.ts +0 -58
package/utils/colorGradient.ts
DELETED
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* 求两个颜色之间的渐变值
|
|
3
|
-
* @param {string} startColor 开始的颜色
|
|
4
|
-
* @param {string} endColor 结束的颜色
|
|
5
|
-
* @param {number} step 颜色等分的份额
|
|
6
|
-
* */
|
|
7
|
-
export function colorGradient(
|
|
8
|
-
startColor = 'rgb(0, 0, 0)',
|
|
9
|
-
endColor = 'rgb(255, 255, 255)',
|
|
10
|
-
step = 10
|
|
11
|
-
): string[] {
|
|
12
|
-
const startRGB = hexToRgb(startColor, false) as number[] // 转换为rgb数组模式
|
|
13
|
-
const startR = startRGB[0]
|
|
14
|
-
const startG = startRGB[1]
|
|
15
|
-
const startB = startRGB[2]
|
|
16
|
-
|
|
17
|
-
const endRGB = hexToRgb(endColor, false) as number[]
|
|
18
|
-
const endR = endRGB[0]
|
|
19
|
-
const endG = endRGB[1]
|
|
20
|
-
const endB = endRGB[2]
|
|
21
|
-
|
|
22
|
-
const sR = (endR - startR) / step // 总差值
|
|
23
|
-
const sG = (endG - startG) / step
|
|
24
|
-
const sB = (endB - startB) / step
|
|
25
|
-
const colorArr = []
|
|
26
|
-
for (let i = 0; i < step; i++) {
|
|
27
|
-
// 计算每一步的hex值
|
|
28
|
-
let hex = rgbToHex(`rgb(${Math.round((sR * i + startR))},${Math.round((sG * i + startG))},${Math.round((sB
|
|
29
|
-
* i + startB))})`)
|
|
30
|
-
// 确保第一个颜色值为startColor的值
|
|
31
|
-
if (i === 0) hex = rgbToHex(startColor)
|
|
32
|
-
// 确保最后一个颜色值为endColor的值
|
|
33
|
-
if (i === step - 1) hex = rgbToHex(endColor)
|
|
34
|
-
colorArr.push(hex)
|
|
35
|
-
}
|
|
36
|
-
return colorArr
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
/**
|
|
40
|
-
* 将颜色转换为 RGB。
|
|
41
|
-
*
|
|
42
|
-
* @param sColor 颜色字符串,支持 `#rgb`、`#rrggbb`、`rgb(...)`。
|
|
43
|
-
* @param str 为 `true`(默认)时返回 `rgb(r,g,b)` 字符串;为 `false` 时返回 `[r,g,b]` 数组。
|
|
44
|
-
* @returns `str=false` 时返回 RGB 数组;否则返回 rgb 字符串;无法识别的颜色原样返回。
|
|
45
|
-
*/
|
|
46
|
-
export function hexToRgb(sColor: string, str = true): string | number[] {
|
|
47
|
-
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
|
|
48
|
-
sColor = String(sColor).toLowerCase()
|
|
49
|
-
if (sColor && reg.test(sColor)) {
|
|
50
|
-
if (sColor.length === 4) {
|
|
51
|
-
let sColorNew = '#'
|
|
52
|
-
for (let i = 1; i < 4; i += 1) {
|
|
53
|
-
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
|
|
54
|
-
}
|
|
55
|
-
sColor = sColorNew
|
|
56
|
-
}
|
|
57
|
-
// 处理六位的颜色值
|
|
58
|
-
const sColorChange = []
|
|
59
|
-
for (let i = 1; i < 7; i += 2) {
|
|
60
|
-
sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`))
|
|
61
|
-
}
|
|
62
|
-
if (!str) {
|
|
63
|
-
return sColorChange
|
|
64
|
-
}
|
|
65
|
-
return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`
|
|
66
|
-
} if (/^(rgb|RGB)/.test(sColor)) {
|
|
67
|
-
const arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')
|
|
68
|
-
return arr.map((val) => Number(val))
|
|
69
|
-
}
|
|
70
|
-
return sColor
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
// 将rgb表示方式转换为hex表示方式
|
|
74
|
-
export function rgbToHex(rgb: string): string {
|
|
75
|
-
const _this = rgb
|
|
76
|
-
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
|
|
77
|
-
if (/^(rgb|RGB)/.test(_this)) {
|
|
78
|
-
const aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')
|
|
79
|
-
let strHex = '#'
|
|
80
|
-
for (let i = 0; i < aColor.length; i++) {
|
|
81
|
-
let hex = Number(aColor[i]).toString(16)
|
|
82
|
-
hex = String(hex).length == 1 ? `${0}${hex}` : hex // 保证每个rgb的值为2位
|
|
83
|
-
if (hex === '0') {
|
|
84
|
-
hex += hex
|
|
85
|
-
}
|
|
86
|
-
strHex += hex
|
|
87
|
-
}
|
|
88
|
-
if (strHex.length !== 7) {
|
|
89
|
-
strHex = _this
|
|
90
|
-
}
|
|
91
|
-
return strHex
|
|
92
|
-
} if (reg.test(_this)) {
|
|
93
|
-
const aNum = _this.replace(/#/, '').split('')
|
|
94
|
-
if (aNum.length === 6) {
|
|
95
|
-
return _this
|
|
96
|
-
} if (aNum.length === 3) {
|
|
97
|
-
let numHex = '#'
|
|
98
|
-
for (let i = 0; i < aNum.length; i += 1) {
|
|
99
|
-
numHex += (aNum[i] + aNum[i])
|
|
100
|
-
}
|
|
101
|
-
return numHex
|
|
102
|
-
}
|
|
103
|
-
} else {
|
|
104
|
-
return _this
|
|
105
|
-
}
|
|
106
|
-
// 合法 hex 但长度不是 3/6 时保持原值返回,保证返回类型为 string
|
|
107
|
-
return _this
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
/**
|
|
111
|
-
* JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba(255,255,255,0.5)字符串
|
|
112
|
-
* sHex为传入的十六进制的色值
|
|
113
|
-
* alpha为rgba的透明度
|
|
114
|
-
*/
|
|
115
|
-
export function colorToRgba(color: string, alpha: number): string {
|
|
116
|
-
color = rgbToHex(color)
|
|
117
|
-
// 十六进制颜色值的正则表达式
|
|
118
|
-
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
|
|
119
|
-
/* 16进制颜色转为RGB格式 */
|
|
120
|
-
let sColor = String(color).toLowerCase()
|
|
121
|
-
if (sColor && reg.test(sColor)) {
|
|
122
|
-
if (sColor.length === 4) {
|
|
123
|
-
let sColorNew = '#'
|
|
124
|
-
for (let i = 1; i < 4; i += 1) {
|
|
125
|
-
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
|
|
126
|
-
}
|
|
127
|
-
sColor = sColorNew
|
|
128
|
-
}
|
|
129
|
-
// 处理六位的颜色值
|
|
130
|
-
const sColorChange = []
|
|
131
|
-
for (let i = 1; i < 7; i += 2) {
|
|
132
|
-
sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`))
|
|
133
|
-
}
|
|
134
|
-
// return sColorChange.join(',')
|
|
135
|
-
return `rgba(${sColorChange.join(',')},${alpha})`
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
return sColor
|
|
139
|
-
}
|
package/utils/index.ts
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import * as utils from './function';
|
|
2
|
-
import * as test from './test';
|
|
3
|
-
import * as colorGradientModule from './colorGradient';
|
|
4
|
-
import { route } from './route';
|
|
5
|
-
import config from './config';
|
|
6
|
-
import http from './http';
|
|
7
|
-
import compress from './compress';
|
|
8
|
-
import platform from './platform';
|
|
9
|
-
import debounce from './debounce';
|
|
10
|
-
import throttle from './throttle';
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* uview-x 工具聚合对象。
|
|
14
|
-
*
|
|
15
|
-
* - 组件通过 `import { $uv } from '../../utils'` 使用,模板中沿用 `$uv.addStyle()` 等写法;
|
|
16
|
-
* - 包入口(`index.ts`)通过 `export * from './utils'` 统一出口,并负责全局注入:
|
|
17
|
-
* 入口把 `$uv` 挂到 `uni` 全局对象,`install` 内再挂载到 `app.config.globalProperties.$uv`;
|
|
18
|
-
* - 组件/工具内部仍必须显式具名导入,不依赖全局对象;
|
|
19
|
-
* - 单位读取 `$uv.config.unit`,运行时修改 `config.unit` 后立即生效。
|
|
20
|
-
*/
|
|
21
|
-
export const $uv = {
|
|
22
|
-
route,
|
|
23
|
-
config,
|
|
24
|
-
test,
|
|
25
|
-
compress,
|
|
26
|
-
date: utils.timeFormat,
|
|
27
|
-
...utils,
|
|
28
|
-
colorGradient: colorGradientModule.colorGradient,
|
|
29
|
-
hexToRgb: colorGradientModule.hexToRgb,
|
|
30
|
-
rgbToHex: colorGradientModule.rgbToHex,
|
|
31
|
-
colorToRgba: colorGradientModule.colorToRgba,
|
|
32
|
-
http,
|
|
33
|
-
debounce,
|
|
34
|
-
throttle,
|
|
35
|
-
platform,
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
// 保持原有入口的具名导出(命名空间形式)
|
|
39
|
-
export { utils, test, colorGradientModule, route, config, http, compress, platform, debounce, throttle };
|
|
40
|
-
|
|
41
|
-
// 所有工具方法扁平导出,可直接从 `@zfqh/uview-x` 具名导入
|
|
42
|
-
export * from './function';
|
|
43
|
-
export * from './test';
|
|
44
|
-
export * from './digit';
|
|
45
|
-
export * from './compat';
|
|
46
|
-
// i18n 只对外暴露 4 个公共 API,其余 helper / 内部状态不导出(见 utils/locale.ts)
|
|
47
|
-
export { createI18n, getLocale, getLocaleMessage, setLocale } from './locale';
|
|
48
|
-
export { colorGradient, hexToRgb, rgbToHex, colorToRgba } from './colorGradient';
|
|
49
|
-
// `utils/function.ts` 与 `utils/test.ts` 都存在 `range`:入口取主工具实现,
|
|
50
|
-
// `test.range` 仍可通过 `test` 命名空间或深引用 `utils/test.ts` 使用。
|
|
51
|
-
export { range } from './function';
|
|
52
|
-
|
|
53
|
-
// 对外类型:工具配置、路由、压缩与平台
|
|
54
|
-
export type { UviewXConfig } from './config';
|
|
55
|
-
export type { UviewXScrollbar, UviewXScrollbarOptions, UviewXScrollbarStyle } from './scrollbar';
|
|
56
|
-
export type { CompressOptions } from './compress';
|
|
57
|
-
export type { RouteFunction, RouteOptions, RouteParams, RouteType } from './route';
|
|
58
|
-
export type { UviewXPlatform } from './platform';
|