@cloudcome/utils-vue 1.13.2 → 1.14.0
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/README.md +72 -73
- package/dist/async.cjs +65 -65
- package/dist/async.cjs.map +1 -1
- package/dist/async.mjs +66 -67
- package/dist/async.mjs.map +1 -1
- package/dist/component/self.d.ts +4 -4
- package/dist/component.cjs +110 -13
- package/dist/component.cjs.map +1 -1
- package/dist/component.d.ts +1 -1
- package/dist/component.mjs +108 -17
- package/dist/component.mjs.map +1 -1
- package/dist/event.cjs +39 -32
- package/dist/event.cjs.map +1 -1
- package/dist/event.mjs +39 -33
- package/dist/event.mjs.map +1 -1
- package/dist/index.cjs +8 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +9 -5
- package/dist/index.mjs.map +1 -1
- package/dist/request.cjs +72 -74
- package/dist/request.cjs.map +1 -1
- package/dist/request.d.ts +1 -1
- package/dist/request.mjs +71 -74
- package/dist/request.mjs.map +1 -1
- package/dist/shared.cjs +87 -26
- package/dist/shared.cjs.map +1 -1
- package/dist/shared.d.ts +1 -1
- package/dist/shared.mjs +87 -28
- package/dist/shared.mjs.map +1 -1
- package/dist/state.cjs +26 -25
- package/dist/state.cjs.map +1 -1
- package/dist/state.mjs +27 -27
- package/dist/state.mjs.map +1 -1
- package/dist/time.cjs +45 -35
- package/dist/time.cjs.map +1 -1
- package/dist/time.mjs +45 -37
- package/dist/time.mjs.map +1 -1
- package/dist/types.cjs +0 -2
- package/dist/types.mjs +0 -2
- package/package.json +47 -48
- package/dist/life.cjs +0 -16
- package/dist/life.cjs.map +0 -1
- package/dist/life.mjs +0 -17
- package/dist/life.mjs.map +0 -1
- package/dist/types.cjs.map +0 -1
- package/dist/types.mjs.map +0 -1
package/dist/shared.mjs
CHANGED
|
@@ -1,33 +1,92 @@
|
|
|
1
|
-
import { isFunction } from "@cloudcome/utils-core/type";
|
|
2
1
|
import { effectScope, onScopeDispose } from "vue";
|
|
2
|
+
import { isFunction } from "@cloudcome/utils-core/type";
|
|
3
|
+
//#region src/shared.ts
|
|
4
|
+
/**
|
|
5
|
+
* 运行生命周期钩子函数的工具函数
|
|
6
|
+
*
|
|
7
|
+
* @protected 内部方法
|
|
8
|
+
* @template T - 泛型参数(未在函数中使用)
|
|
9
|
+
* @param enterHook - 进入时执行的钩子函数,接收一个回调函数作为参数
|
|
10
|
+
* @param leaveHook - 离开时执行的钩子函数,接收一个回调函数作为参数
|
|
11
|
+
* @param onEnter - 进入时的监听器,可以返回一个清理函数
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* _runLifeHook(
|
|
15
|
+
* (hook) => onMounted(hook), // 在组件挂载时执行进入逻辑
|
|
16
|
+
* (hook) => onUnmounted(hook), // 在组件卸载时执行离开逻辑
|
|
17
|
+
* () => {
|
|
18
|
+
* // 执行进入时的逻辑
|
|
19
|
+
* console.log('组件已挂载');
|
|
20
|
+
*
|
|
21
|
+
* // 返回一个清理函数,在离开时执行
|
|
22
|
+
* return () => {
|
|
23
|
+
* console.log('组件将要卸载');
|
|
24
|
+
* };
|
|
25
|
+
* }
|
|
26
|
+
* );
|
|
27
|
+
*/
|
|
3
28
|
function _runLifeHook(enterHook, leaveHook, onEnter) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
onLeave?.();
|
|
13
|
-
});
|
|
29
|
+
let onLeave;
|
|
30
|
+
enterHook(async () => {
|
|
31
|
+
const enterResult = await onEnter();
|
|
32
|
+
if (isFunction(enterResult)) onLeave = enterResult;
|
|
33
|
+
});
|
|
34
|
+
leaveHook(() => {
|
|
35
|
+
onLeave?.();
|
|
36
|
+
});
|
|
14
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* 运行作用域钩子函数的工具函数
|
|
40
|
+
*
|
|
41
|
+
* 该函数创建一个独立的响应式作用域,在该作用域内执行传入的回调函数,
|
|
42
|
+
* 并在适当的时机自动清理资源。这确保了响应式副作用的隔离和自动回收。
|
|
43
|
+
*
|
|
44
|
+
* @protected 内部方法
|
|
45
|
+
* @param runner - 需要在作用域内执行的回调函数,可以返回一个清理函数
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* // 基本用法
|
|
49
|
+
* _runScope(() => {
|
|
50
|
+
* // 在这里创建的响应式副作用会被限制在当前作用域内
|
|
51
|
+
* const stop = watch(someRef, (val) => {
|
|
52
|
+
* console.log(val);
|
|
53
|
+
* });
|
|
54
|
+
*
|
|
55
|
+
* // 返回一个清理函数,在作用域销毁时执行
|
|
56
|
+
* return () => {
|
|
57
|
+
* stop();
|
|
58
|
+
* };
|
|
59
|
+
* });
|
|
60
|
+
*
|
|
61
|
+
* @example
|
|
62
|
+
* // 异步用法
|
|
63
|
+
* _runScope(async () => {
|
|
64
|
+
* const data = await fetchData();
|
|
65
|
+
*
|
|
66
|
+
* // 根据获取的数据创建响应式监听
|
|
67
|
+
* const stop = watch(() => data.value, (val) => {
|
|
68
|
+
* console.log(val);
|
|
69
|
+
* });
|
|
70
|
+
*
|
|
71
|
+
* // 返回清理函数
|
|
72
|
+
* return () => {
|
|
73
|
+
* stop();
|
|
74
|
+
* };
|
|
75
|
+
* });
|
|
76
|
+
*/
|
|
15
77
|
function _runScope(runner) {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
scope.stop();
|
|
27
|
-
});
|
|
78
|
+
const scope = effectScope();
|
|
79
|
+
let dispose;
|
|
80
|
+
scope.run(async () => {
|
|
81
|
+
const result = await runner();
|
|
82
|
+
if (isFunction(result)) dispose = result;
|
|
83
|
+
});
|
|
84
|
+
onScopeDispose(() => {
|
|
85
|
+
dispose?.();
|
|
86
|
+
scope.stop();
|
|
87
|
+
});
|
|
28
88
|
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
//# sourceMappingURL=shared.mjs.map
|
|
89
|
+
//#endregion
|
|
90
|
+
export { _runLifeHook, _runScope };
|
|
91
|
+
|
|
92
|
+
//# sourceMappingURL=shared.mjs.map
|
package/dist/shared.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.mjs","sources":["../src/shared.ts"],"sourcesContent":["import { isFunction } from '@cloudcome/utils-core/type';\nimport type { AnyFunction, MaybePromise } from '@cloudcome/utils-core/types';\nimport { effectScope, onScopeDispose } from 'vue';\n\nexport type HookListener = () => MaybePromise<unknown>;\nexport type HookListenerWithDispose = () => MaybePromise<unknown | HookListener>;\n\n/**\n * 运行生命周期钩子函数的工具函数\n *\n * @protected 内部方法\n * @template T - 泛型参数(未在函数中使用)\n * @param enterHook - 进入时执行的钩子函数,接收一个回调函数作为参数\n * @param leaveHook - 离开时执行的钩子函数,接收一个回调函数作为参数\n * @param onEnter - 进入时的监听器,可以返回一个清理函数\n *\n * @example\n * _runLifeHook(\n * (hook) => onMounted(hook), // 在组件挂载时执行进入逻辑\n * (hook) => onUnmounted(hook), // 在组件卸载时执行离开逻辑\n * () => {\n * // 执行进入时的逻辑\n * console.log('组件已挂载');\n *\n * // 返回一个清理函数,在离开时执行\n * return () => {\n * console.log('组件将要卸载');\n * };\n * }\n * );\n */\nexport function _runLifeHook<
|
|
1
|
+
{"version":3,"file":"shared.mjs","names":[],"sources":["../src/shared.ts"],"sourcesContent":["import { isFunction } from '@cloudcome/utils-core/type';\nimport type { AnyFunction, MaybePromise } from '@cloudcome/utils-core/types';\nimport { effectScope, onScopeDispose } from 'vue';\n\nexport type HookListener = () => MaybePromise<unknown>;\nexport type HookListenerWithDispose = () => MaybePromise<unknown | HookListener>;\n\n/**\n * 运行生命周期钩子函数的工具函数\n *\n * @protected 内部方法\n * @template T - 泛型参数(未在函数中使用)\n * @param enterHook - 进入时执行的钩子函数,接收一个回调函数作为参数\n * @param leaveHook - 离开时执行的钩子函数,接收一个回调函数作为参数\n * @param onEnter - 进入时的监听器,可以返回一个清理函数\n *\n * @example\n * _runLifeHook(\n * (hook) => onMounted(hook), // 在组件挂载时执行进入逻辑\n * (hook) => onUnmounted(hook), // 在组件卸载时执行离开逻辑\n * () => {\n * // 执行进入时的逻辑\n * console.log('组件已挂载');\n *\n * // 返回一个清理函数,在离开时执行\n * return () => {\n * console.log('组件将要卸载');\n * };\n * }\n * );\n */\nexport function _runLifeHook<_T>(\n enterHook: (hook: AnyFunction) => unknown,\n leaveHook: (hook: AnyFunction) => unknown,\n onEnter: HookListenerWithDispose,\n) {\n // 存储离开时需要执行的清理函数\n let onLeave: HookListener | undefined;\n\n // 注册进入钩子,在 enterHook 触发时执行\n enterHook(async () => {\n // 执行进入时的监听器逻辑\n const enterResult = await onEnter();\n\n // 如果返回结果是一个函数,则将其作为离开时的清理函数保存\n if (isFunction(enterResult)) {\n onLeave = enterResult;\n }\n });\n\n // 注册离开钩子,在 leaveHook 触发时执行\n leaveHook(() => {\n // 如果存在清理函数,则执行它\n onLeave?.();\n });\n}\n\n/**\n * 运行作用域钩子函数的工具函数\n *\n * 该函数创建一个独立的响应式作用域,在该作用域内执行传入的回调函数,\n * 并在适当的时机自动清理资源。这确保了响应式副作用的隔离和自动回收。\n *\n * @protected 内部方法\n * @param runner - 需要在作用域内执行的回调函数,可以返回一个清理函数\n *\n * @example\n * // 基本用法\n * _runScope(() => {\n * // 在这里创建的响应式副作用会被限制在当前作用域内\n * const stop = watch(someRef, (val) => {\n * console.log(val);\n * });\n *\n * // 返回一个清理函数,在作用域销毁时执行\n * return () => {\n * stop();\n * };\n * });\n *\n * @example\n * // 异步用法\n * _runScope(async () => {\n * const data = await fetchData();\n *\n * // 根据获取的数据创建响应式监听\n * const stop = watch(() => data.value, (val) => {\n * console.log(val);\n * });\n *\n * // 返回清理函数\n * return () => {\n * stop();\n * };\n * });\n */\nexport function _runScope(runner: HookListenerWithDispose) {\n // 创建一个独立的响应式作用域,用于收集和管理响应式副作用\n const scope = effectScope();\n // 存储用户提供的清理函数\n let dispose: HookListener | undefined;\n\n // 在创建的作用域内执行回调函数\n scope.run(async () => {\n // 执行传入的回调函数并等待其完成(支持异步操作)\n const result = await runner();\n\n // 如果回调函数返回了一个函数,则将其作为清理函数保存\n if (isFunction(result)) {\n dispose = result;\n }\n });\n\n // 注册作用域销毁时的回调函数\n onScopeDispose(() => {\n // 如果存在用户提供的清理函数,则执行它\n dispose?.();\n // 停止并清理整个作用域内的所有响应式副作用\n scope.stop();\n });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,aACd,WACA,WACA,SACA;CAEA,IAAI;CAGJ,UAAU,YAAY;EAEpB,MAAM,cAAc,MAAM,SAAS;EAGnC,IAAI,WAAW,YAAY,EACzB,UAAU;GAEZ;CAGF,gBAAgB;EAEd,WAAW;GACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CJ,SAAgB,UAAU,QAAiC;CAEzD,MAAM,QAAQ,aAAa;CAE3B,IAAI;CAGJ,MAAM,IAAI,YAAY;EAEpB,MAAM,SAAS,MAAM,QAAQ;EAG7B,IAAI,WAAW,OAAO,EACpB,UAAU;GAEZ;CAGF,qBAAqB;EAEnB,WAAW;EAEX,MAAM,MAAM;GACZ"}
|
package/dist/state.cjs
CHANGED
|
@@ -1,29 +1,30 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
|
|
2
|
+
let vue = require("vue");
|
|
3
|
+
//#region src/state.ts
|
|
4
|
+
/**
|
|
5
|
+
* 只改变一次的值
|
|
6
|
+
* @param value 初始值
|
|
7
|
+
* @param options 选项
|
|
8
|
+
* @returns 包含 change 方法和 value 响应式值的对象
|
|
9
|
+
*/
|
|
4
10
|
function useOnceState(value, options) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
state: vue.computed(() => {
|
|
21
|
-
if (!changed.value) {
|
|
22
|
-
return value;
|
|
23
|
-
}
|
|
24
|
-
return lastValue;
|
|
25
|
-
})
|
|
26
|
-
};
|
|
11
|
+
let lastValue = value;
|
|
12
|
+
const changed = (0, vue.ref)(false);
|
|
13
|
+
const { equal = Object.is } = options || {};
|
|
14
|
+
return {
|
|
15
|
+
change(newValue) {
|
|
16
|
+
if (equal(newValue, lastValue)) return;
|
|
17
|
+
if (changed.value) return;
|
|
18
|
+
changed.value = true;
|
|
19
|
+
lastValue = newValue;
|
|
20
|
+
},
|
|
21
|
+
state: (0, vue.computed)(() => {
|
|
22
|
+
if (!changed.value) return value;
|
|
23
|
+
return lastValue;
|
|
24
|
+
})
|
|
25
|
+
};
|
|
27
26
|
}
|
|
27
|
+
//#endregion
|
|
28
28
|
exports.useOnceState = useOnceState;
|
|
29
|
-
|
|
29
|
+
|
|
30
|
+
//# sourceMappingURL=state.cjs.map
|
package/dist/state.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"state.cjs","sources":["../src/state.ts"],"sourcesContent":["import { computed, ref } from 'vue';\n\nexport type UseOnceValueOptions<T> = {\n equal?: (a: T, b: T) => boolean;\n};\n\n/**\n * 只改变一次的值\n * @param value 初始值\n * @param options 选项\n * @returns 包含 change 方法和 value 响应式值的对象\n */\nexport function useOnceState<T>(value: T, options?: UseOnceValueOptions<T>) {\n let lastValue = value;\n const changed = ref(false);\n const { equal = Object.is } = options || {};\n\n return {\n change(newValue: T) {\n if (equal(newValue, lastValue)) {\n return;\n }\n\n if (changed.value) {\n return;\n }\n\n changed.value = true;\n lastValue = newValue;\n },\n // 这里需要使用 computed 确保返回的是原始值,而不是 reactive 包装后的对象\n state: computed(() => {\n // changed 使用响应式是为确保 computed 能够响应式更新\n if (!changed.value) {\n return value;\n }\n\n return lastValue;\n }),\n };\n}\n"],"
|
|
1
|
+
{"version":3,"file":"state.cjs","names":[],"sources":["../src/state.ts"],"sourcesContent":["import { computed, ref } from 'vue';\n\nexport type UseOnceValueOptions<T> = {\n equal?: (a: T, b: T) => boolean;\n};\n\n/**\n * 只改变一次的值\n * @param value 初始值\n * @param options 选项\n * @returns 包含 change 方法和 value 响应式值的对象\n */\nexport function useOnceState<T>(value: T, options?: UseOnceValueOptions<T>) {\n let lastValue = value;\n const changed = ref(false);\n const { equal = Object.is } = options || {};\n\n return {\n change(newValue: T) {\n if (equal(newValue, lastValue)) {\n return;\n }\n\n if (changed.value) {\n return;\n }\n\n changed.value = true;\n lastValue = newValue;\n },\n // 这里需要使用 computed 确保返回的是原始值,而不是 reactive 包装后的对象\n state: computed(() => {\n // changed 使用响应式是为确保 computed 能够响应式更新\n if (!changed.value) {\n return value;\n }\n\n return lastValue;\n }),\n };\n}\n"],"mappings":";;;;;;;;;AAYA,SAAgB,aAAgB,OAAU,SAAkC;CAC1E,IAAI,YAAY;CAChB,MAAM,WAAA,GAAA,IAAA,KAAc,MAAM;CAC1B,MAAM,EAAE,QAAQ,OAAO,OAAO,WAAW,EAAE;CAE3C,OAAO;EACL,OAAO,UAAa;GAClB,IAAI,MAAM,UAAU,UAAU,EAC5B;GAGF,IAAI,QAAQ,OACV;GAGF,QAAQ,QAAQ;GAChB,YAAY;;EAGd,QAAA,GAAA,IAAA,gBAAsB;GAEpB,IAAI,CAAC,QAAQ,OACX,OAAO;GAGT,OAAO;IACP;EACH"}
|
package/dist/state.mjs
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { computed, ref } from "vue";
|
|
2
|
+
//#region src/state.ts
|
|
3
|
+
/**
|
|
4
|
+
* 只改变一次的值
|
|
5
|
+
* @param value 初始值
|
|
6
|
+
* @param options 选项
|
|
7
|
+
* @returns 包含 change 方法和 value 响应式值的对象
|
|
8
|
+
*/
|
|
2
9
|
function useOnceState(value, options) {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
state: computed(() => {
|
|
19
|
-
if (!changed.value) {
|
|
20
|
-
return value;
|
|
21
|
-
}
|
|
22
|
-
return lastValue;
|
|
23
|
-
})
|
|
24
|
-
};
|
|
10
|
+
let lastValue = value;
|
|
11
|
+
const changed = ref(false);
|
|
12
|
+
const { equal = Object.is } = options || {};
|
|
13
|
+
return {
|
|
14
|
+
change(newValue) {
|
|
15
|
+
if (equal(newValue, lastValue)) return;
|
|
16
|
+
if (changed.value) return;
|
|
17
|
+
changed.value = true;
|
|
18
|
+
lastValue = newValue;
|
|
19
|
+
},
|
|
20
|
+
state: computed(() => {
|
|
21
|
+
if (!changed.value) return value;
|
|
22
|
+
return lastValue;
|
|
23
|
+
})
|
|
24
|
+
};
|
|
25
25
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
//# sourceMappingURL=state.mjs.map
|
|
26
|
+
//#endregion
|
|
27
|
+
export { useOnceState };
|
|
28
|
+
|
|
29
|
+
//# sourceMappingURL=state.mjs.map
|
package/dist/state.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"state.mjs","sources":["../src/state.ts"],"sourcesContent":["import { computed, ref } from 'vue';\n\nexport type UseOnceValueOptions<T> = {\n equal?: (a: T, b: T) => boolean;\n};\n\n/**\n * 只改变一次的值\n * @param value 初始值\n * @param options 选项\n * @returns 包含 change 方法和 value 响应式值的对象\n */\nexport function useOnceState<T>(value: T, options?: UseOnceValueOptions<T>) {\n let lastValue = value;\n const changed = ref(false);\n const { equal = Object.is } = options || {};\n\n return {\n change(newValue: T) {\n if (equal(newValue, lastValue)) {\n return;\n }\n\n if (changed.value) {\n return;\n }\n\n changed.value = true;\n lastValue = newValue;\n },\n // 这里需要使用 computed 确保返回的是原始值,而不是 reactive 包装后的对象\n state: computed(() => {\n // changed 使用响应式是为确保 computed 能够响应式更新\n if (!changed.value) {\n return value;\n }\n\n return lastValue;\n }),\n };\n}\n"],"
|
|
1
|
+
{"version":3,"file":"state.mjs","names":[],"sources":["../src/state.ts"],"sourcesContent":["import { computed, ref } from 'vue';\n\nexport type UseOnceValueOptions<T> = {\n equal?: (a: T, b: T) => boolean;\n};\n\n/**\n * 只改变一次的值\n * @param value 初始值\n * @param options 选项\n * @returns 包含 change 方法和 value 响应式值的对象\n */\nexport function useOnceState<T>(value: T, options?: UseOnceValueOptions<T>) {\n let lastValue = value;\n const changed = ref(false);\n const { equal = Object.is } = options || {};\n\n return {\n change(newValue: T) {\n if (equal(newValue, lastValue)) {\n return;\n }\n\n if (changed.value) {\n return;\n }\n\n changed.value = true;\n lastValue = newValue;\n },\n // 这里需要使用 computed 确保返回的是原始值,而不是 reactive 包装后的对象\n state: computed(() => {\n // changed 使用响应式是为确保 computed 能够响应式更新\n if (!changed.value) {\n return value;\n }\n\n return lastValue;\n }),\n };\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,aAAgB,OAAU,SAAkC;CAC1E,IAAI,YAAY;CAChB,MAAM,UAAU,IAAI,MAAM;CAC1B,MAAM,EAAE,QAAQ,OAAO,OAAO,WAAW,EAAE;CAE3C,OAAO;EACL,OAAO,UAAa;GAClB,IAAI,MAAM,UAAU,UAAU,EAC5B;GAGF,IAAI,QAAQ,OACV;GAGF,QAAQ,QAAQ;GAChB,YAAY;;EAGd,OAAO,eAAe;GAEpB,IAAI,CAAC,QAAQ,OACX,OAAO;GAGT,OAAO;IACP;EACH"}
|
package/dist/time.cjs
CHANGED
|
@@ -1,42 +1,52 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
|
|
2
|
+
const require_shared = require("./shared.cjs");
|
|
3
|
+
const require_component = require("./component.cjs");
|
|
4
|
+
let vue = require("vue");
|
|
5
|
+
//#region src/time.ts
|
|
6
|
+
/**
|
|
7
|
+
* 创建一个延迟更新的响应式值
|
|
8
|
+
*
|
|
9
|
+
* 该函数创建一个基于原始响应式值的延迟更新值,当原始值发生变化时,
|
|
10
|
+
* 延迟值会在指定的延迟时间后更新。如果在延迟期间原始值再次变化,
|
|
11
|
+
* 则会重新计算延迟时间。
|
|
12
|
+
*
|
|
13
|
+
* @param initialValue 原始响应式值,类型为Ref<T>
|
|
14
|
+
* @param delay 延迟时间,可以是数字或响应式数字,默认为100毫秒
|
|
15
|
+
* @returns 返回一个计算属性,其值会在延迟后更新为原始值
|
|
16
|
+
*/
|
|
6
17
|
function useLazyValue(initialValue, delay) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
return vue.computed(() => {
|
|
28
|
-
return lazyValue.value;
|
|
29
|
-
});
|
|
18
|
+
const lazyValue = (0, vue.ref)(initialValue.value);
|
|
19
|
+
let changedAt = 0;
|
|
20
|
+
require_shared._runScope(() => {
|
|
21
|
+
let t;
|
|
22
|
+
(0, vue.watch)(initialValue, (value) => {
|
|
23
|
+
const delayValue = (0, vue.toValue)(delay) || 100;
|
|
24
|
+
clearTimeout(t);
|
|
25
|
+
if (changedAt > 0 && Date.now() - changedAt > delayValue) lazyValue.value = value;
|
|
26
|
+
else t = setTimeout(() => {
|
|
27
|
+
lazyValue.value = value;
|
|
28
|
+
}, delayValue);
|
|
29
|
+
changedAt = Date.now();
|
|
30
|
+
});
|
|
31
|
+
return () => {
|
|
32
|
+
clearTimeout(t);
|
|
33
|
+
};
|
|
34
|
+
});
|
|
35
|
+
return (0, vue.computed)(() => {
|
|
36
|
+
return lazyValue.value;
|
|
37
|
+
});
|
|
30
38
|
}
|
|
31
39
|
function useInterval(callback, delay) {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
40
|
+
require_component.useMount(() => {
|
|
41
|
+
const delayValue = (0, vue.toValue)(delay) || 100;
|
|
42
|
+
const t = setInterval(callback, delayValue);
|
|
43
|
+
return () => {
|
|
44
|
+
clearInterval(t);
|
|
45
|
+
};
|
|
46
|
+
});
|
|
39
47
|
}
|
|
48
|
+
//#endregion
|
|
40
49
|
exports.useInterval = useInterval;
|
|
41
50
|
exports.useLazyValue = useLazyValue;
|
|
42
|
-
|
|
51
|
+
|
|
52
|
+
//# sourceMappingURL=time.cjs.map
|
package/dist/time.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"time.cjs","sources":["../src/time.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"time.cjs","names":[],"sources":["../src/time.ts"],"sourcesContent":["import { computed, type Ref, ref, toValue, watch } from 'vue';\nimport { useMount } from './component';\nimport { _runScope } from './shared';\n\n/**\n * 创建一个延迟更新的响应式值\n *\n * 该函数创建一个基于原始响应式值的延迟更新值,当原始值发生变化时,\n * 延迟值会在指定的延迟时间后更新。如果在延迟期间原始值再次变化,\n * 则会重新计算延迟时间。\n *\n * @param initialValue 原始响应式值,类型为Ref<T>\n * @param delay 延迟时间,可以是数字或响应式数字,默认为100毫秒\n * @returns 返回一个计算属性,其值会在延迟后更新为原始值\n */\nexport function useLazyValue<T>(initialValue: Ref<T>, delay?: number | Ref<number>) {\n const lazyValue = ref(initialValue.value);\n let changedAt = 0;\n\n _runScope(() => {\n // biome-ignore lint/suspicious/noExplicitAny: 内部使用 any\n let t: any;\n\n watch(initialValue, (value) => {\n const delayValue = toValue(delay) || 100;\n clearTimeout(t);\n\n if (changedAt > 0 && Date.now() - changedAt > delayValue) {\n lazyValue.value = value;\n } else {\n t = setTimeout(() => {\n lazyValue.value = value;\n }, delayValue);\n }\n\n changedAt = Date.now();\n });\n\n return () => {\n clearTimeout(t);\n };\n });\n\n return computed<T>(() => {\n return lazyValue.value;\n });\n}\n\nexport function useInterval(callback: () => void, delay?: number | Ref<number>) {\n useMount(() => {\n const delayValue = toValue(delay) || 100;\n const t = setInterval(callback, delayValue);\n\n return () => {\n clearInterval(t);\n };\n });\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,SAAgB,aAAgB,cAAsB,OAA8B;CAClF,MAAM,aAAA,GAAA,IAAA,KAAgB,aAAa,MAAM;CACzC,IAAI,YAAY;CAEhB,eAAA,gBAAgB;EAEd,IAAI;EAEJ,CAAA,GAAA,IAAA,OAAM,eAAe,UAAU;GAC7B,MAAM,cAAA,GAAA,IAAA,SAAqB,MAAM,IAAI;GACrC,aAAa,EAAE;GAEf,IAAI,YAAY,KAAK,KAAK,KAAK,GAAG,YAAY,YAC5C,UAAU,QAAQ;QAElB,IAAI,iBAAiB;IACnB,UAAU,QAAQ;MACjB,WAAW;GAGhB,YAAY,KAAK,KAAK;IACtB;EAEF,aAAa;GACX,aAAa,EAAE;;GAEjB;CAEF,QAAA,GAAA,IAAA,gBAAyB;EACvB,OAAO,UAAU;GACjB;;AAGJ,SAAgB,YAAY,UAAsB,OAA8B;CAC9E,kBAAA,eAAe;EACb,MAAM,cAAA,GAAA,IAAA,SAAqB,MAAM,IAAI;EACrC,MAAM,IAAI,YAAY,UAAU,WAAW;EAE3C,aAAa;GACX,cAAc,EAAE;;GAElB"}
|
package/dist/time.mjs
CHANGED
|
@@ -1,42 +1,50 @@
|
|
|
1
|
-
import { ref, watch, toValue, computed } from "vue";
|
|
2
|
-
import { u as useMount } from "./life.mjs";
|
|
3
1
|
import { _runScope } from "./shared.mjs";
|
|
2
|
+
import { useMount } from "./component.mjs";
|
|
3
|
+
import { computed, ref, toValue, watch } from "vue";
|
|
4
|
+
//#region src/time.ts
|
|
5
|
+
/**
|
|
6
|
+
* 创建一个延迟更新的响应式值
|
|
7
|
+
*
|
|
8
|
+
* 该函数创建一个基于原始响应式值的延迟更新值,当原始值发生变化时,
|
|
9
|
+
* 延迟值会在指定的延迟时间后更新。如果在延迟期间原始值再次变化,
|
|
10
|
+
* 则会重新计算延迟时间。
|
|
11
|
+
*
|
|
12
|
+
* @param initialValue 原始响应式值,类型为Ref<T>
|
|
13
|
+
* @param delay 延迟时间,可以是数字或响应式数字,默认为100毫秒
|
|
14
|
+
* @returns 返回一个计算属性,其值会在延迟后更新为原始值
|
|
15
|
+
*/
|
|
4
16
|
function useLazyValue(initialValue, delay) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
return computed(() => {
|
|
26
|
-
return lazyValue.value;
|
|
27
|
-
});
|
|
17
|
+
const lazyValue = ref(initialValue.value);
|
|
18
|
+
let changedAt = 0;
|
|
19
|
+
_runScope(() => {
|
|
20
|
+
let t;
|
|
21
|
+
watch(initialValue, (value) => {
|
|
22
|
+
const delayValue = toValue(delay) || 100;
|
|
23
|
+
clearTimeout(t);
|
|
24
|
+
if (changedAt > 0 && Date.now() - changedAt > delayValue) lazyValue.value = value;
|
|
25
|
+
else t = setTimeout(() => {
|
|
26
|
+
lazyValue.value = value;
|
|
27
|
+
}, delayValue);
|
|
28
|
+
changedAt = Date.now();
|
|
29
|
+
});
|
|
30
|
+
return () => {
|
|
31
|
+
clearTimeout(t);
|
|
32
|
+
};
|
|
33
|
+
});
|
|
34
|
+
return computed(() => {
|
|
35
|
+
return lazyValue.value;
|
|
36
|
+
});
|
|
28
37
|
}
|
|
29
38
|
function useInterval(callback, delay) {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
39
|
+
useMount(() => {
|
|
40
|
+
const delayValue = toValue(delay) || 100;
|
|
41
|
+
const t = setInterval(callback, delayValue);
|
|
42
|
+
return () => {
|
|
43
|
+
clearInterval(t);
|
|
44
|
+
};
|
|
45
|
+
});
|
|
37
46
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
//# sourceMappingURL=time.mjs.map
|
|
47
|
+
//#endregion
|
|
48
|
+
export { useInterval, useLazyValue };
|
|
49
|
+
|
|
50
|
+
//# sourceMappingURL=time.mjs.map
|
package/dist/time.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"time.mjs","sources":["../src/time.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"time.mjs","names":[],"sources":["../src/time.ts"],"sourcesContent":["import { computed, type Ref, ref, toValue, watch } from 'vue';\nimport { useMount } from './component';\nimport { _runScope } from './shared';\n\n/**\n * 创建一个延迟更新的响应式值\n *\n * 该函数创建一个基于原始响应式值的延迟更新值,当原始值发生变化时,\n * 延迟值会在指定的延迟时间后更新。如果在延迟期间原始值再次变化,\n * 则会重新计算延迟时间。\n *\n * @param initialValue 原始响应式值,类型为Ref<T>\n * @param delay 延迟时间,可以是数字或响应式数字,默认为100毫秒\n * @returns 返回一个计算属性,其值会在延迟后更新为原始值\n */\nexport function useLazyValue<T>(initialValue: Ref<T>, delay?: number | Ref<number>) {\n const lazyValue = ref(initialValue.value);\n let changedAt = 0;\n\n _runScope(() => {\n // biome-ignore lint/suspicious/noExplicitAny: 内部使用 any\n let t: any;\n\n watch(initialValue, (value) => {\n const delayValue = toValue(delay) || 100;\n clearTimeout(t);\n\n if (changedAt > 0 && Date.now() - changedAt > delayValue) {\n lazyValue.value = value;\n } else {\n t = setTimeout(() => {\n lazyValue.value = value;\n }, delayValue);\n }\n\n changedAt = Date.now();\n });\n\n return () => {\n clearTimeout(t);\n };\n });\n\n return computed<T>(() => {\n return lazyValue.value;\n });\n}\n\nexport function useInterval(callback: () => void, delay?: number | Ref<number>) {\n useMount(() => {\n const delayValue = toValue(delay) || 100;\n const t = setInterval(callback, delayValue);\n\n return () => {\n clearInterval(t);\n };\n });\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,SAAgB,aAAgB,cAAsB,OAA8B;CAClF,MAAM,YAAY,IAAI,aAAa,MAAM;CACzC,IAAI,YAAY;CAEhB,gBAAgB;EAEd,IAAI;EAEJ,MAAM,eAAe,UAAU;GAC7B,MAAM,aAAa,QAAQ,MAAM,IAAI;GACrC,aAAa,EAAE;GAEf,IAAI,YAAY,KAAK,KAAK,KAAK,GAAG,YAAY,YAC5C,UAAU,QAAQ;QAElB,IAAI,iBAAiB;IACnB,UAAU,QAAQ;MACjB,WAAW;GAGhB,YAAY,KAAK,KAAK;IACtB;EAEF,aAAa;GACX,aAAa,EAAE;;GAEjB;CAEF,OAAO,eAAkB;EACvB,OAAO,UAAU;GACjB;;AAGJ,SAAgB,YAAY,UAAsB,OAA8B;CAC9E,eAAe;EACb,MAAM,aAAa,QAAQ,MAAM,IAAI;EACrC,MAAM,IAAI,YAAY,UAAU,WAAW;EAE3C,aAAa;GACX,cAAc,EAAE;;GAElB"}
|
package/dist/types.cjs
CHANGED
package/dist/types.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,11 +1,38 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloudcome/utils-vue",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"description": "cloudcome utils for vue",
|
|
5
|
-
"
|
|
6
|
-
|
|
5
|
+
"main": "./dist/index.cjs",
|
|
6
|
+
"module": "./dist/index.mjs",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"typesVersions": {
|
|
9
|
+
"*": {
|
|
10
|
+
"async": [
|
|
11
|
+
"./dist/async.d.ts"
|
|
12
|
+
],
|
|
13
|
+
"component": [
|
|
14
|
+
"./dist/component.d.ts"
|
|
15
|
+
],
|
|
16
|
+
"event": [
|
|
17
|
+
"./dist/event.d.ts"
|
|
18
|
+
],
|
|
19
|
+
"request": [
|
|
20
|
+
"./dist/request.d.ts"
|
|
21
|
+
],
|
|
22
|
+
"shared": [
|
|
23
|
+
"./dist/shared.d.ts"
|
|
24
|
+
],
|
|
25
|
+
"state": [
|
|
26
|
+
"./dist/state.d.ts"
|
|
27
|
+
],
|
|
28
|
+
"time": [
|
|
29
|
+
"./dist/time.d.ts"
|
|
30
|
+
],
|
|
31
|
+
"types": [
|
|
32
|
+
"./dist/types.d.ts"
|
|
33
|
+
]
|
|
34
|
+
}
|
|
7
35
|
},
|
|
8
|
-
"engineStrict": true,
|
|
9
36
|
"sideEffects": false,
|
|
10
37
|
"exports": {
|
|
11
38
|
".": {
|
|
@@ -55,60 +82,32 @@
|
|
|
55
82
|
"require": "./dist/types.cjs"
|
|
56
83
|
}
|
|
57
84
|
},
|
|
58
|
-
"typesVersions": {
|
|
59
|
-
"*": {
|
|
60
|
-
"async": [
|
|
61
|
-
"./dist/async.d.ts"
|
|
62
|
-
],
|
|
63
|
-
"component": [
|
|
64
|
-
"./dist/component.d.ts"
|
|
65
|
-
],
|
|
66
|
-
"event": [
|
|
67
|
-
"./dist/event.d.ts"
|
|
68
|
-
],
|
|
69
|
-
"request": [
|
|
70
|
-
"./dist/request.d.ts"
|
|
71
|
-
],
|
|
72
|
-
"shared": [
|
|
73
|
-
"./dist/shared.d.ts"
|
|
74
|
-
],
|
|
75
|
-
"state": [
|
|
76
|
-
"./dist/state.d.ts"
|
|
77
|
-
],
|
|
78
|
-
"time": [
|
|
79
|
-
"./dist/time.d.ts"
|
|
80
|
-
],
|
|
81
|
-
"types": [
|
|
82
|
-
"./dist/types.d.ts"
|
|
83
|
-
]
|
|
84
|
-
}
|
|
85
|
-
},
|
|
86
|
-
"main": "./dist/index.cjs",
|
|
87
|
-
"module": "./dist/index.mjs",
|
|
88
|
-
"types": "./dist/index.d.ts",
|
|
89
85
|
"files": [
|
|
90
86
|
"dist"
|
|
91
87
|
],
|
|
92
|
-
"
|
|
93
|
-
"
|
|
94
|
-
"vue": "^3.5.13",
|
|
95
|
-
"vue-component-type-helpers": "^2.2.10"
|
|
88
|
+
"engines": {
|
|
89
|
+
"node": ">=22"
|
|
96
90
|
},
|
|
97
|
-
"
|
|
98
|
-
"
|
|
99
|
-
"
|
|
91
|
+
"dependencies": {
|
|
92
|
+
"@cloudcome/utils-core": "~1.20.1",
|
|
93
|
+
"vue": "^3.5.34",
|
|
94
|
+
"vue-component-type-helpers": "^3.2.8"
|
|
100
95
|
},
|
|
101
96
|
"keywords": [
|
|
102
|
-
"utils",
|
|
103
97
|
"cloudcome",
|
|
98
|
+
"utils",
|
|
99
|
+
"utils-browser",
|
|
104
100
|
"utils-core",
|
|
105
|
-
"utils-
|
|
101
|
+
"utils-node",
|
|
106
102
|
"utils-react",
|
|
107
103
|
"utils-uni",
|
|
108
|
-
"utils-
|
|
109
|
-
"utils-browser"
|
|
104
|
+
"utils-vue"
|
|
110
105
|
],
|
|
111
|
-
"homepage": "https://github.
|
|
106
|
+
"homepage": "https://cloudcome.github.io/utils/",
|
|
112
107
|
"license": "MIT",
|
|
113
|
-
"author": "云淡然 <hi@ydr.me> (https://ydr.me/)"
|
|
108
|
+
"author": "云淡然 <hi@ydr.me> (https://ydr.me/)",
|
|
109
|
+
"repository": {
|
|
110
|
+
"type": "git",
|
|
111
|
+
"url": "git+https://github.com/cloudcome/utils.git"
|
|
112
|
+
}
|
|
114
113
|
}
|
package/dist/life.cjs
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const shared = require("./shared.cjs");
|
|
3
|
-
const vue = require("vue");
|
|
4
|
-
function useMount(beforeMount) {
|
|
5
|
-
shared._runLifeHook(vue.onBeforeMount, vue.onBeforeUnmount, beforeMount);
|
|
6
|
-
}
|
|
7
|
-
function useMounted(mounted) {
|
|
8
|
-
shared._runLifeHook(vue.onMounted, vue.onUnmounted, mounted);
|
|
9
|
-
}
|
|
10
|
-
function useActivated(activated) {
|
|
11
|
-
shared._runLifeHook(vue.onActivated, vue.onDeactivated, activated);
|
|
12
|
-
}
|
|
13
|
-
exports.useActivated = useActivated;
|
|
14
|
-
exports.useMount = useMount;
|
|
15
|
-
exports.useMounted = useMounted;
|
|
16
|
-
//# sourceMappingURL=life.cjs.map
|
package/dist/life.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"life.cjs","sources":["../src/component/life.ts"],"sourcesContent":["import { _runLifeHook } from '@/shared';\nimport type { MaybePromise } from '@cloudcome/utils-core/types';\nimport { onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, onMounted, onUnmounted } from 'vue';\n\nexport type HookListener = () => MaybePromise<unknown>;\nexport type HookListenerWithDispose = () => MaybePromise<undefined | HookListener>;\n\n/**\n * 页面挂载前生命周期钩子\n *\n * @param beforeMount - 在组件挂载前执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useMount(() => {\n * console.log('组件即将挂载');\n * // 可以返回一个清理函数,在组件卸载前执行\n * return () => {\n * console.log('组件即将卸载');\n * };\n * });\n * ```\n */\nexport function useMount(beforeMount: HookListenerWithDispose) {\n _runLifeHook(onBeforeMount, onBeforeUnmount, beforeMount);\n}\n\n/**\n * 页面挂载后生命周期钩子\n *\n * @param mounted - 在组件挂载后执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useMounted(() => {\n * console.log('组件已挂载');\n * // 可以返回一个清理函数,在组件卸载前执行\n * return () => {\n * console.log('组件即将卸载');\n * };\n * });\n * ```\n */\nexport function useMounted(mounted: HookListenerWithDispose) {\n _runLifeHook(onMounted, onUnmounted, mounted);\n}\n\n/**\n * 页面激活时生命周期钩子\n *\n * @param activated - 在组件被激活时执行的回调函数,可以返回一个清理函数\n *\n * @example\n * ```ts\n * useActivated(() => {\n * console.log('组件已激活');\n * // 可以返回一个清理函数,在组件失活前执行\n * return () => {\n * console.log('组件即将失活');\n * };\n * });\n * ```\n */\nexport function useActivated(activated: HookListenerWithDispose) {\n _runLifeHook(onActivated, onDeactivated, activated);\n}\n"],"names":["_runLifeHook","onBeforeMount","onBeforeUnmount","onMounted","onUnmounted","onActivated","onDeactivated"],"mappings":";;;AAuBO,SAAS,SAAS,aAAsC;AAChDA,sBAAAC,IAAAA,eAAeC,qBAAiB,WAAW;AAC1D;AAkBO,SAAS,WAAW,SAAkC;AAC9CF,sBAAAG,IAAAA,WAAWC,iBAAa,OAAO;AAC9C;AAkBO,SAAS,aAAa,WAAoC;AAClDJ,sBAAAK,IAAAA,aAAaC,mBAAe,SAAS;AACpD;;;;"}
|