@xto/core 1.1.0 → 1.2.1
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/es/hooks/index.d.ts +248 -0
- package/es/index.d.ts +11 -0
- package/es/index.mjs +61 -54
- package/es/locale/index.d.ts +30 -0
- package/es/locale/index.mjs +697 -0
- package/es/locale/lang/en-US.d.ts +6 -0
- package/es/locale/lang/ja-JP.d.ts +6 -0
- package/es/locale/lang/ko-KR.d.ts +6 -0
- package/es/locale/lang/zh-CN.d.ts +6 -0
- package/es/locale/types.d.ts +19 -0
- package/es/theme/index.d.ts +91 -0
- package/es/types/index.d.ts +258 -0
- package/es/utils/index.d.ts +270 -0
- package/es/utils/namespace.d.ts +147 -0
- package/es/utils/z-index.d.ts +116 -0
- package/lib/index.cjs +1 -1
- package/lib/locale/index.cjs +1 -0
- package/package.json +13 -7
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
import { Ref, ComputedRef } from 'vue';
|
|
2
|
+
import { UseToggleReturn, UseVisibleReturn, UseDisabledReturn, UseLoadingReturn, UseFocusReturn } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* 布尔值切换 Hook
|
|
5
|
+
*
|
|
6
|
+
* @param defaultValue 默认值,默认为 false
|
|
7
|
+
* @returns 切换工具对象
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```ts
|
|
11
|
+
* const { value, toggle, setTrue, setFalse } = useToggle()
|
|
12
|
+
*
|
|
13
|
+
* console.log(value.value) // false
|
|
14
|
+
* toggle() // 切换为 true
|
|
15
|
+
* setFalse() // 设置为 false
|
|
16
|
+
* setTrue() // 设置为 true
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
export declare function useToggle(defaultValue?: boolean): UseToggleReturn;
|
|
20
|
+
/**
|
|
21
|
+
* 双向绑定 Hook
|
|
22
|
+
* 用于实现 v-model 双向绑定
|
|
23
|
+
*
|
|
24
|
+
* @param props 组件 props
|
|
25
|
+
* @param emit emit 函数
|
|
26
|
+
* @param key 绑定的 prop 名称,默认为 'modelValue'
|
|
27
|
+
* @param defaultValue 默认值
|
|
28
|
+
* @returns 响应式计算属性
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* ```vue
|
|
32
|
+
* <script setup>
|
|
33
|
+
* const props = defineProps<{ modelValue?: string }>()
|
|
34
|
+
* const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
|
|
35
|
+
*
|
|
36
|
+
* const value = useModel(props, emit)
|
|
37
|
+
* </script>
|
|
38
|
+
*
|
|
39
|
+
* <template>
|
|
40
|
+
* <input v-model="value" />
|
|
41
|
+
* </template>
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
export declare function useModel<T>(props: Record<string, any>, emit: (event: string, value: any) => void, key?: string, defaultValue?: T): ComputedRef<T>;
|
|
45
|
+
/**
|
|
46
|
+
* 可见性控制 Hook
|
|
47
|
+
* 用于控制元素的显示/隐藏
|
|
48
|
+
*
|
|
49
|
+
* @param defaultVisible 默认可见状态,默认为 false
|
|
50
|
+
* @returns 可见性控制对象
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* ```ts
|
|
54
|
+
* const { visible, show, hide, toggle } = useVisible()
|
|
55
|
+
*
|
|
56
|
+
* show() // 显示
|
|
57
|
+
* hide() // 隐藏
|
|
58
|
+
* toggle() // 切换
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
export declare function useVisible(defaultVisible?: boolean): UseVisibleReturn;
|
|
62
|
+
/**
|
|
63
|
+
* 禁用状态控制 Hook
|
|
64
|
+
* 用于控制元素的禁用/启用状态
|
|
65
|
+
*
|
|
66
|
+
* @param defaultDisabled 默认禁用状态,默认为 false
|
|
67
|
+
* @returns 禁用控制对象
|
|
68
|
+
*
|
|
69
|
+
* @example
|
|
70
|
+
* ```ts
|
|
71
|
+
* const { disabled, enable, disable } = useDisabled()
|
|
72
|
+
*
|
|
73
|
+
* disable() // 禁用
|
|
74
|
+
* enable() // 启用
|
|
75
|
+
* ```
|
|
76
|
+
*/
|
|
77
|
+
export declare function useDisabled(defaultDisabled?: boolean): UseDisabledReturn;
|
|
78
|
+
/**
|
|
79
|
+
* 加载状态控制 Hook
|
|
80
|
+
* 用于控制加载状态
|
|
81
|
+
*
|
|
82
|
+
* @param defaultLoading 默认加载状态,默认为 false
|
|
83
|
+
* @returns 加载控制对象
|
|
84
|
+
*
|
|
85
|
+
* @example
|
|
86
|
+
* ```ts
|
|
87
|
+
* const { loading, setLoading, start, end } = useLoading()
|
|
88
|
+
*
|
|
89
|
+
* start() // 开始加载
|
|
90
|
+
* end() // 结束加载
|
|
91
|
+
* setLoading(true) // 设置加载状态
|
|
92
|
+
* ```
|
|
93
|
+
*/
|
|
94
|
+
export declare function useLoading(defaultLoading?: boolean): UseLoadingReturn;
|
|
95
|
+
/**
|
|
96
|
+
* 点击外部检测 Hook
|
|
97
|
+
* 当点击目标元素外部时触发回调
|
|
98
|
+
*
|
|
99
|
+
* @param target 目标元素 Ref
|
|
100
|
+
* @param callback 点击外部时的回调函数
|
|
101
|
+
*
|
|
102
|
+
* @example
|
|
103
|
+
* ```ts
|
|
104
|
+
* const dropdownRef = ref<HTMLElement>()
|
|
105
|
+
*
|
|
106
|
+
* useClickOutside(dropdownRef, () => {
|
|
107
|
+
* // 点击外部,关闭下拉菜单
|
|
108
|
+
* closeDropdown()
|
|
109
|
+
* })
|
|
110
|
+
* ```
|
|
111
|
+
*/
|
|
112
|
+
export declare function useClickOutside(target: Ref<HTMLElement | undefined>, callback: () => void): void;
|
|
113
|
+
/**
|
|
114
|
+
* ESC 键检测 Hook
|
|
115
|
+
* 当按下 ESC 键时触发回调
|
|
116
|
+
*
|
|
117
|
+
* @param callback 按下 ESC 时的回调函数
|
|
118
|
+
*
|
|
119
|
+
* @example
|
|
120
|
+
* ```ts
|
|
121
|
+
* useEscape(() => {
|
|
122
|
+
* // 按下 ESC,关闭模态框
|
|
123
|
+
* closeModal()
|
|
124
|
+
* })
|
|
125
|
+
* ```
|
|
126
|
+
*/
|
|
127
|
+
export declare function useEscape(callback: () => void): void;
|
|
128
|
+
/**
|
|
129
|
+
* 元素尺寸变化监听 Hook
|
|
130
|
+
* 当目标元素尺寸变化时触发回调
|
|
131
|
+
*
|
|
132
|
+
* @param target 目标元素 Ref
|
|
133
|
+
* @param callback 尺寸变化时的回调函数
|
|
134
|
+
*
|
|
135
|
+
* @example
|
|
136
|
+
* ```ts
|
|
137
|
+
* const containerRef = ref<HTMLElement>()
|
|
138
|
+
*
|
|
139
|
+
* useResize(containerRef, (width, height) => {
|
|
140
|
+
* console.log('尺寸变化:', width, height)
|
|
141
|
+
* })
|
|
142
|
+
* ```
|
|
143
|
+
*/
|
|
144
|
+
export declare function useResize(target: Ref<HTMLElement | undefined>, callback: (width: number, height: number) => void): void;
|
|
145
|
+
/**
|
|
146
|
+
* DOM 变化监听 Hook
|
|
147
|
+
* 当目标 DOM 发生变化时触发回调
|
|
148
|
+
*
|
|
149
|
+
* @param target 目标元素 Ref
|
|
150
|
+
* @param options MutationObserver 配置选项
|
|
151
|
+
* @param callback DOM 变化时的回调函数
|
|
152
|
+
*
|
|
153
|
+
* @example
|
|
154
|
+
* ```ts
|
|
155
|
+
* const containerRef = ref<HTMLElement>()
|
|
156
|
+
*
|
|
157
|
+
* useDOMObserver(
|
|
158
|
+
* containerRef,
|
|
159
|
+
* { childList: true },
|
|
160
|
+
* (mutations) => {
|
|
161
|
+
* console.log('DOM 变化:', mutations)
|
|
162
|
+
* }
|
|
163
|
+
* )
|
|
164
|
+
* ```
|
|
165
|
+
*/
|
|
166
|
+
export declare function useDOMObserver(target: Ref<HTMLElement | undefined>, options: MutationObserverInit | undefined, callback: (mutations: MutationRecord[]) => void): void;
|
|
167
|
+
/**
|
|
168
|
+
* 滚动监听 Hook
|
|
169
|
+
* 当目标元素滚动时触发回调
|
|
170
|
+
*
|
|
171
|
+
* @param target 目标元素 Ref
|
|
172
|
+
* @param callback 滚动时的回调函数
|
|
173
|
+
*
|
|
174
|
+
* @example
|
|
175
|
+
* ```ts
|
|
176
|
+
* const containerRef = ref<HTMLElement>()
|
|
177
|
+
*
|
|
178
|
+
* useScroll(containerRef, (scrollTop, scrollLeft) => {
|
|
179
|
+
* console.log('滚动位置:', scrollTop, scrollLeft)
|
|
180
|
+
* })
|
|
181
|
+
* ```
|
|
182
|
+
*/
|
|
183
|
+
export declare function useScroll(target: Ref<HTMLElement | undefined | Window>, callback: (scrollTop: number, scrollLeft: number) => void): void;
|
|
184
|
+
/**
|
|
185
|
+
* 焦点控制 Hook
|
|
186
|
+
* 监听元素的焦点状态
|
|
187
|
+
*
|
|
188
|
+
* @param target 目标元素 Ref
|
|
189
|
+
* @param callback 焦点变化时的回调函数(可选)
|
|
190
|
+
* @returns 焦点状态对象
|
|
191
|
+
*
|
|
192
|
+
* @example
|
|
193
|
+
* ```ts
|
|
194
|
+
* const inputRef = ref<HTMLElement>()
|
|
195
|
+
* const { focused } = useFocus(inputRef)
|
|
196
|
+
*
|
|
197
|
+
* watch(focused, (isFocused) => {
|
|
198
|
+
* console.log('焦点状态:', isFocused)
|
|
199
|
+
* })
|
|
200
|
+
* ```
|
|
201
|
+
*/
|
|
202
|
+
export declare function useFocus(target: Ref<HTMLElement | undefined>, callback?: (focused: boolean) => void): UseFocusReturn;
|
|
203
|
+
/**
|
|
204
|
+
* 交叉观察器 Hook
|
|
205
|
+
* 监听元素是否进入视口
|
|
206
|
+
*
|
|
207
|
+
* @param target 目标元素 Ref
|
|
208
|
+
* @param callback 交叉状态变化时的回调函数
|
|
209
|
+
* @param options IntersectionObserver 配置选项
|
|
210
|
+
*
|
|
211
|
+
* @example
|
|
212
|
+
* ```ts
|
|
213
|
+
* const elementRef = ref<HTMLElement>()
|
|
214
|
+
*
|
|
215
|
+
* useIntersectionObserver(
|
|
216
|
+
* elementRef,
|
|
217
|
+
* (isIntersecting) => {
|
|
218
|
+
* if (isIntersecting) {
|
|
219
|
+
* console.log('元素进入视口')
|
|
220
|
+
* }
|
|
221
|
+
* },
|
|
222
|
+
* { threshold: 0.5 }
|
|
223
|
+
* )
|
|
224
|
+
* ```
|
|
225
|
+
*/
|
|
226
|
+
export declare function useIntersectionObserver(target: Ref<HTMLElement | undefined>, callback: (isIntersecting: boolean) => void, options?: IntersectionObserverInit): void;
|
|
227
|
+
/**
|
|
228
|
+
* 延迟动作 Hook
|
|
229
|
+
* 延迟执行某个动作,可取消
|
|
230
|
+
*
|
|
231
|
+
* @param delay 延迟时间(毫秒)
|
|
232
|
+
* @returns 延迟控制对象
|
|
233
|
+
*
|
|
234
|
+
* @example
|
|
235
|
+
* ```ts
|
|
236
|
+
* const { execute, cancel } = useDelayedAction(300)
|
|
237
|
+
*
|
|
238
|
+
* execute(() => {
|
|
239
|
+
* console.log('延迟执行')
|
|
240
|
+
* })
|
|
241
|
+
*
|
|
242
|
+
* cancel() // 取消执行
|
|
243
|
+
* ```
|
|
244
|
+
*/
|
|
245
|
+
export declare function useDelayedAction(delay?: number): {
|
|
246
|
+
execute: (callback: () => void) => void;
|
|
247
|
+
cancel: () => void;
|
|
248
|
+
};
|
package/es/index.d.ts
ADDED
package/es/index.mjs
CHANGED
|
@@ -1,48 +1,51 @@
|
|
|
1
|
-
import { applyCSSVars as n, applyDarkTheme as t, cssVarPrefix as
|
|
2
|
-
import { b as
|
|
3
|
-
import { useClickOutside as
|
|
1
|
+
import { applyCSSVars as n, applyDarkTheme as t, cssVarPrefix as r, darkCSSVars as i, defaultThemeConfig as a, generateCSSVars as d, generateColorPalette as l, getComponentSize as p, hexToRgb as x, mixColor as u, removeCSSVars as c, removeDarkTheme as m, rgbToHex as I, sizeMap as g } from "./theme/index.mjs";
|
|
2
|
+
import { b as S, block as f, classNames as C, coerceToArray as b, compose as T, constant as y, createNamespace as h, debounce as D, deepClone as v, deepMerge as M, defaultNamespace as N, defaultTo as O, drawerZIndex as P, dropdownZIndex as L, e as V, element as k, flatten as w, get as A, getCurrentZIndex as j, getType as z, getZIndexList as E, identity as F, is as R, isAndroid as B, isArray as q, isBoolean as H, isBrowser as K, isDate as U, isDefined as W, isEmpty as G, isFalse as J, isFunction as Q, isIOS as X, isMobile as Y, isNil as _, isNull as $, isNumber as ee, isObject as se, isPlainObject as oe, isPromise as ne, isRegExp as te, isString as re, isSupportTouch as ie, isTrue as ae, isType as de, isUndefined as le, isWechat as pe, loadingZIndex as xe, m as ue, messageZIndex as ce, modalZIndex as me, modifier as Ie, nextDrawerZIndex as ge, nextDropdownZIndex as Ze, nextLoadingZIndex as Se, nextMessageZIndex as fe, nextModalZIndex as Ce, nextPopoverZIndex as be, nextSelectZIndex as Te, nextTooltipZIndex as ye, noop as he, once as De, pipe as ve, popoverZIndex as Me, popupManage as Ne, resetZIndex as Oe, selectZIndex as Pe, set as Le, shortId as Ve, state as ke, throttle as we, tooltipZIndex as Ae, tryCatch as je, unary as ze, unique as Ee, useClass as Fe, useComponentPrefix as Re, useNamespace as Be, useZIndex as qe, uuid as He } from "./utils/index.mjs";
|
|
3
|
+
import { useClickOutside as Ue, useDOMObserver as We, useDelayedAction as Ge, useDisabled as Je, useEscape as Qe, useFocus as Xe, useIntersectionObserver as Ye, useLoading as _e, useModel as $e, useResize as es, useScroll as ss, useToggle as os, useVisible as ns } from "./hooks/index.mjs";
|
|
4
|
+
import { createLocaleProvider as rs, getSupportedLocales as is, localeInjectionKey as as, localeNames as ds, locales as ls, useLocale as ps } from "./locale/index.mjs";
|
|
4
5
|
const e = "1.0.0";
|
|
5
6
|
export {
|
|
6
7
|
n as applyCSSVars,
|
|
7
8
|
t as applyDarkTheme,
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
S as b,
|
|
10
|
+
f as block,
|
|
11
|
+
C as classNames,
|
|
12
|
+
b as coerceToArray,
|
|
12
13
|
T as compose,
|
|
13
14
|
y as constant,
|
|
15
|
+
rs as createLocaleProvider,
|
|
14
16
|
h as createNamespace,
|
|
15
|
-
|
|
16
|
-
|
|
17
|
+
r as cssVarPrefix,
|
|
18
|
+
i as darkCSSVars,
|
|
17
19
|
D as debounce,
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
v as deepClone,
|
|
21
|
+
M as deepMerge,
|
|
20
22
|
N as defaultNamespace,
|
|
21
23
|
a as defaultThemeConfig,
|
|
22
24
|
O as defaultTo,
|
|
23
25
|
P as drawerZIndex,
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
L as dropdownZIndex,
|
|
27
|
+
V as e,
|
|
28
|
+
k as element,
|
|
29
|
+
w as flatten,
|
|
28
30
|
d as generateCSSVars,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
31
|
+
l as generateColorPalette,
|
|
32
|
+
A as get,
|
|
33
|
+
p as getComponentSize,
|
|
34
|
+
j as getCurrentZIndex,
|
|
35
|
+
is as getSupportedLocales,
|
|
36
|
+
z as getType,
|
|
37
|
+
E as getZIndexList,
|
|
38
|
+
x as hexToRgb,
|
|
39
|
+
F as identity,
|
|
40
|
+
R as is,
|
|
38
41
|
B as isAndroid,
|
|
39
42
|
q as isArray,
|
|
40
43
|
H as isBoolean,
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
K as isBrowser,
|
|
45
|
+
U as isDate,
|
|
46
|
+
W as isDefined,
|
|
47
|
+
G as isEmpty,
|
|
48
|
+
J as isFalse,
|
|
46
49
|
Q as isFunction,
|
|
47
50
|
X as isIOS,
|
|
48
51
|
Y as isMobile,
|
|
@@ -53,13 +56,16 @@ export {
|
|
|
53
56
|
oe as isPlainObject,
|
|
54
57
|
ne as isPromise,
|
|
55
58
|
te as isRegExp,
|
|
56
|
-
|
|
57
|
-
|
|
59
|
+
re as isString,
|
|
60
|
+
ie as isSupportTouch,
|
|
58
61
|
ae as isTrue,
|
|
59
62
|
de as isType,
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
+
le as isUndefined,
|
|
64
|
+
pe as isWechat,
|
|
65
|
+
xe as loadingZIndex,
|
|
66
|
+
as as localeInjectionKey,
|
|
67
|
+
ds as localeNames,
|
|
68
|
+
ls as locales,
|
|
63
69
|
ue as m,
|
|
64
70
|
ce as messageZIndex,
|
|
65
71
|
u as mixColor,
|
|
@@ -67,41 +73,42 @@ export {
|
|
|
67
73
|
Ie as modifier,
|
|
68
74
|
ge as nextDrawerZIndex,
|
|
69
75
|
Ze as nextDropdownZIndex,
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
76
|
+
Se as nextLoadingZIndex,
|
|
77
|
+
fe as nextMessageZIndex,
|
|
78
|
+
Ce as nextModalZIndex,
|
|
79
|
+
be as nextPopoverZIndex,
|
|
74
80
|
Te as nextSelectZIndex,
|
|
75
81
|
ye as nextTooltipZIndex,
|
|
76
82
|
he as noop,
|
|
77
83
|
De as once,
|
|
78
|
-
|
|
79
|
-
|
|
84
|
+
ve as pipe,
|
|
85
|
+
Me as popoverZIndex,
|
|
80
86
|
Ne as popupManage,
|
|
81
87
|
c as removeCSSVars,
|
|
82
88
|
m as removeDarkTheme,
|
|
83
89
|
Oe as resetZIndex,
|
|
84
90
|
I as rgbToHex,
|
|
85
91
|
Pe as selectZIndex,
|
|
86
|
-
|
|
87
|
-
|
|
92
|
+
Le as set,
|
|
93
|
+
Ve as shortId,
|
|
88
94
|
g as sizeMap,
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
95
|
+
ke as state,
|
|
96
|
+
we as throttle,
|
|
97
|
+
Ae as tooltipZIndex,
|
|
98
|
+
je as tryCatch,
|
|
99
|
+
ze as unary,
|
|
100
|
+
Ee as unique,
|
|
101
|
+
Fe as useClass,
|
|
102
|
+
Ue as useClickOutside,
|
|
103
|
+
Re as useComponentPrefix,
|
|
104
|
+
We as useDOMObserver,
|
|
105
|
+
Ge as useDelayedAction,
|
|
106
|
+
Je as useDisabled,
|
|
101
107
|
Qe as useEscape,
|
|
102
108
|
Xe as useFocus,
|
|
103
109
|
Ye as useIntersectionObserver,
|
|
104
110
|
_e as useLoading,
|
|
111
|
+
ps as useLocale,
|
|
105
112
|
$e as useModel,
|
|
106
113
|
Be as useNamespace,
|
|
107
114
|
es as useResize,
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Ref, InjectionKey } from 'vue';
|
|
2
|
+
import { LocaleCode, LocaleMessages, UseLocaleReturn } from './types';
|
|
3
|
+
declare const locales: Record<LocaleCode, LocaleMessages>;
|
|
4
|
+
export declare const localeNames: Record<LocaleCode, string>;
|
|
5
|
+
export declare const localeInjectionKey: InjectionKey<{
|
|
6
|
+
locale: Ref<LocaleCode>;
|
|
7
|
+
messages: Ref<LocaleMessages>;
|
|
8
|
+
}>;
|
|
9
|
+
/**
|
|
10
|
+
* 国际化组合式函数
|
|
11
|
+
*/
|
|
12
|
+
export declare function useLocale(): UseLocaleReturn;
|
|
13
|
+
/**
|
|
14
|
+
* 获取所有支持的语言
|
|
15
|
+
*/
|
|
16
|
+
export declare function getSupportedLocales(): {
|
|
17
|
+
code: LocaleCode;
|
|
18
|
+
name: string;
|
|
19
|
+
}[];
|
|
20
|
+
/**
|
|
21
|
+
* 创建国际化提供者
|
|
22
|
+
*/
|
|
23
|
+
export declare function createLocaleProvider(initialLocale?: LocaleCode): {
|
|
24
|
+
locale: Ref<LocaleCode, LocaleCode>;
|
|
25
|
+
messages: Ref<LocaleMessages, LocaleMessages>;
|
|
26
|
+
setLocale: (code: LocaleCode) => void;
|
|
27
|
+
mergeMessages: (newMessages: LocaleMessages) => void;
|
|
28
|
+
install(app: any): void;
|
|
29
|
+
};
|
|
30
|
+
export { locales };
|