@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.
@@ -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
@@ -0,0 +1,11 @@
1
+ /**
2
+ * @xto/core
3
+ * XTO UI 核心模块
4
+ * 提供类型定义、工具函数、组合式函数、主题配置和国际化
5
+ */
6
+ export * from './types';
7
+ export * from './theme';
8
+ export * from './utils';
9
+ export * from './hooks';
10
+ export * from './locale';
11
+ export declare const version = "1.0.0";
package/es/index.mjs CHANGED
@@ -1,48 +1,51 @@
1
- import { applyCSSVars as n, applyDarkTheme as t, cssVarPrefix as i, darkCSSVars as r, defaultThemeConfig as a, generateCSSVars as d, generateColorPalette as x, getComponentSize as l, hexToRgb as p, mixColor as u, removeCSSVars as c, removeDarkTheme as m, rgbToHex as I, sizeMap as g } from "./theme/index.mjs";
2
- import { b as C, block as S, classNames as b, coerceToArray as f, compose as T, constant as y, createNamespace as h, debounce as D, deepClone as M, deepMerge as v, defaultNamespace as N, defaultTo as O, drawerZIndex as P, dropdownZIndex as V, e as k, element as w, flatten as A, get as z, getCurrentZIndex as E, getType as F, getZIndexList as L, identity as R, is as j, isAndroid as B, isArray as q, isBoolean as H, isBrowser as U, isDate as W, isDefined as G, isEmpty as J, isFalse as K, 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 ie, isSupportTouch as re, isTrue as ae, isType as de, isUndefined as xe, isWechat as le, loadingZIndex as pe, m as ue, messageZIndex as ce, modalZIndex as me, modifier as Ie, nextDrawerZIndex as ge, nextDropdownZIndex as Ze, nextLoadingZIndex as Ce, nextMessageZIndex as Se, nextModalZIndex as be, nextPopoverZIndex as fe, nextSelectZIndex as Te, nextTooltipZIndex as ye, noop as he, once as De, pipe as Me, popoverZIndex as ve, popupManage as Ne, resetZIndex as Oe, selectZIndex as Pe, set as Ve, shortId as ke, state as we, throttle as Ae, tooltipZIndex as ze, tryCatch as Ee, unary as Fe, unique as Le, useClass as Re, useComponentPrefix as je, useNamespace as Be, useZIndex as qe, uuid as He } from "./utils/index.mjs";
3
- import { useClickOutside as We, useDOMObserver as Ge, useDelayedAction as Je, useDisabled as Ke, 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";
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
- C as b,
9
- S as block,
10
- b as classNames,
11
- f as coerceToArray,
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
- i as cssVarPrefix,
16
- r as darkCSSVars,
17
+ r as cssVarPrefix,
18
+ i as darkCSSVars,
17
19
  D as debounce,
18
- M as deepClone,
19
- v as deepMerge,
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
- V as dropdownZIndex,
25
- k as e,
26
- w as element,
27
- A as flatten,
26
+ L as dropdownZIndex,
27
+ V as e,
28
+ k as element,
29
+ w as flatten,
28
30
  d as generateCSSVars,
29
- x as generateColorPalette,
30
- z as get,
31
- l as getComponentSize,
32
- E as getCurrentZIndex,
33
- F as getType,
34
- L as getZIndexList,
35
- p as hexToRgb,
36
- R as identity,
37
- j as is,
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
- U as isBrowser,
42
- W as isDate,
43
- G as isDefined,
44
- J as isEmpty,
45
- K as isFalse,
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
- ie as isString,
57
- re as isSupportTouch,
59
+ re as isString,
60
+ ie as isSupportTouch,
58
61
  ae as isTrue,
59
62
  de as isType,
60
- xe as isUndefined,
61
- le as isWechat,
62
- pe as loadingZIndex,
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
- Ce as nextLoadingZIndex,
71
- Se as nextMessageZIndex,
72
- be as nextModalZIndex,
73
- fe as nextPopoverZIndex,
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
- Me as pipe,
79
- ve as popoverZIndex,
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
- Ve as set,
87
- ke as shortId,
92
+ Le as set,
93
+ Ve as shortId,
88
94
  g as sizeMap,
89
- we as state,
90
- Ae as throttle,
91
- ze as tooltipZIndex,
92
- Ee as tryCatch,
93
- Fe as unary,
94
- Le as unique,
95
- Re as useClass,
96
- We as useClickOutside,
97
- je as useComponentPrefix,
98
- Ge as useDOMObserver,
99
- Je as useDelayedAction,
100
- Ke as useDisabled,
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 };