@vrojs/use 0.0.2 → 0.0.3
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/dist/index.d.ts +14 -1
- package/dist/index.js +98 -34
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -50,6 +50,19 @@ interface UseAsyncTaskResult<T, D> {
|
|
|
50
50
|
declare function useAsyncTask<T extends AnyPromiseFn>(task: T, options: UseAsyncTaskOptions<T> & Required<Pick<UseAsyncTaskOptions<T>, 'initialValue'>>): UseAsyncTaskResult<T, Awaited<ReturnType<T>>>;
|
|
51
51
|
declare function useAsyncTask<T extends AnyPromiseFn>(task: T, options?: UseAsyncTaskOptions<T>): UseAsyncTaskResult<T, Awaited<ReturnType<T>> | undefined>;
|
|
52
52
|
|
|
53
|
+
type MaybeRef<T> = T | Ref<T>;
|
|
54
|
+
interface UseBodyScrollLockReturn {
|
|
55
|
+
locked: Ref<boolean>;
|
|
56
|
+
lock: () => void;
|
|
57
|
+
unlock: () => void;
|
|
58
|
+
toggle: (value?: boolean) => void;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* 锁定/解锁 body 滚动
|
|
62
|
+
* @param initialLocked - 初始锁定状态,或外部响应式布尔值
|
|
63
|
+
*/
|
|
64
|
+
declare function useBodyScrollLock(initialLocked?: MaybeRef<boolean>): UseBodyScrollLockReturn;
|
|
65
|
+
|
|
53
66
|
declare function useComposition(): {
|
|
54
67
|
handleCompositionStart: (event: CompositionEvent) => void;
|
|
55
68
|
handleCompositionEnd: (event: CompositionEvent) => void;
|
|
@@ -260,4 +273,4 @@ declare function useVisible<T extends Record<string, any>, R = any>(options?: Us
|
|
|
260
273
|
hide: (reason?: any) => Promise<void>;
|
|
261
274
|
};
|
|
262
275
|
|
|
263
|
-
export { type TransferOptions, type UseAsyncTaskOptions, type UseAsyncTaskResult, type UseEventListenerOptions, type UseKeepAliveOptions, type UseKeepAliveState$1 as UseKeepAliveState, type UseKeepPositionOptions, type UseKeepPositionState, type UsePagingOptions, type UsePagingStatus, type UsePagingTask, type UsePagingTaskOptions, type UsePagingTaskResult, type UsePagingTriggerOptions, type UseSetState, type UseSetStateAction, type UseTransitionNameOptions, type UseTransitionNameState, type UseVisibleOptions, type UseVisibleShowOptions, debounceRef, useAsyncTask, useComposition, useCountDown, useEventListener, useId, useKeepAlive, useKeepAliveByPosition, useKeepPosition, usePaging, useParams, useQuery, useState, useToggle, useTransfer, useTransitionName, useVisible };
|
|
276
|
+
export { type TransferOptions, type UseAsyncTaskOptions, type UseAsyncTaskResult, type UseBodyScrollLockReturn, type UseEventListenerOptions, type UseKeepAliveOptions, type UseKeepAliveState$1 as UseKeepAliveState, type UseKeepPositionOptions, type UseKeepPositionState, type UsePagingOptions, type UsePagingStatus, type UsePagingTask, type UsePagingTaskOptions, type UsePagingTaskResult, type UsePagingTriggerOptions, type UseSetState, type UseSetStateAction, type UseTransitionNameOptions, type UseTransitionNameState, type UseVisibleOptions, type UseVisibleShowOptions, debounceRef, useAsyncTask, useBodyScrollLock, useComposition, useCountDown, useEventListener, useId, useKeepAlive, useKeepAliveByPosition, useKeepPosition, usePaging, useParams, useQuery, useState, useToggle, useTransfer, useTransitionName, useVisible };
|
package/dist/index.js
CHANGED
|
@@ -117,6 +117,66 @@ function useAsyncTask(task, options) {
|
|
|
117
117
|
};
|
|
118
118
|
}
|
|
119
119
|
|
|
120
|
+
// src/useBodyScrollLock/index.ts
|
|
121
|
+
import { getCurrentScope, isRef, onScopeDispose, ref as ref2, unref, watch } from "vue";
|
|
122
|
+
var lockCount = 0;
|
|
123
|
+
var originalOverflow = "";
|
|
124
|
+
function lockBody() {
|
|
125
|
+
if (typeof document === "undefined") return;
|
|
126
|
+
if (lockCount === 0) {
|
|
127
|
+
originalOverflow = document.body.style.overflow;
|
|
128
|
+
document.body.style.overflow = "hidden";
|
|
129
|
+
}
|
|
130
|
+
lockCount++;
|
|
131
|
+
}
|
|
132
|
+
function unlockBody() {
|
|
133
|
+
if (typeof document === "undefined" || lockCount <= 0) return;
|
|
134
|
+
lockCount--;
|
|
135
|
+
if (lockCount === 0) {
|
|
136
|
+
document.body.style.overflow = originalOverflow;
|
|
137
|
+
originalOverflow = "";
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
function useBodyScrollLock(initialLocked = false) {
|
|
141
|
+
const locked = isRef(initialLocked) ? initialLocked : ref2(unref(initialLocked));
|
|
142
|
+
let currentLocked = false;
|
|
143
|
+
const sync = (value) => {
|
|
144
|
+
if (value === currentLocked) return;
|
|
145
|
+
if (value) {
|
|
146
|
+
lockBody();
|
|
147
|
+
} else {
|
|
148
|
+
unlockBody();
|
|
149
|
+
}
|
|
150
|
+
currentLocked = value;
|
|
151
|
+
};
|
|
152
|
+
const stop = watch(locked, sync, { immediate: true });
|
|
153
|
+
const cleanup = () => {
|
|
154
|
+
stop();
|
|
155
|
+
if (currentLocked) {
|
|
156
|
+
unlockBody();
|
|
157
|
+
currentLocked = false;
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
if (getCurrentScope()) {
|
|
161
|
+
onScopeDispose(cleanup);
|
|
162
|
+
}
|
|
163
|
+
const lock = () => {
|
|
164
|
+
locked.value = true;
|
|
165
|
+
};
|
|
166
|
+
const unlock = () => {
|
|
167
|
+
locked.value = false;
|
|
168
|
+
};
|
|
169
|
+
const toggle = (value = !locked.value) => {
|
|
170
|
+
locked.value = value;
|
|
171
|
+
};
|
|
172
|
+
return {
|
|
173
|
+
locked,
|
|
174
|
+
lock,
|
|
175
|
+
unlock,
|
|
176
|
+
toggle
|
|
177
|
+
};
|
|
178
|
+
}
|
|
179
|
+
|
|
120
180
|
// src/useComposition/index.ts
|
|
121
181
|
function useComposition() {
|
|
122
182
|
const handleCompositionStart = (event) => {
|
|
@@ -136,9 +196,9 @@ function useComposition() {
|
|
|
136
196
|
}
|
|
137
197
|
|
|
138
198
|
// src/useCountDown/index.ts
|
|
139
|
-
import { ref as
|
|
199
|
+
import { ref as ref3 } from "vue";
|
|
140
200
|
function useCountDown(start = 60) {
|
|
141
|
-
const countRef =
|
|
201
|
+
const countRef = ref3(0);
|
|
142
202
|
let timer;
|
|
143
203
|
const trigger = (st = start) => {
|
|
144
204
|
clearTimeout(timer);
|
|
@@ -158,19 +218,19 @@ function useCountDown(start = 60) {
|
|
|
158
218
|
|
|
159
219
|
// src/useEventListener/index.ts
|
|
160
220
|
import {
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
unref,
|
|
164
|
-
onUnmounted,
|
|
221
|
+
isRef as isRef2,
|
|
222
|
+
onActivated as onActivated2,
|
|
165
223
|
onDeactivated,
|
|
166
224
|
onMounted,
|
|
167
|
-
|
|
225
|
+
onUnmounted,
|
|
226
|
+
unref as unref2,
|
|
227
|
+
watch as watch2
|
|
168
228
|
} from "vue";
|
|
169
229
|
function useEventListener(type, listener, options = {}) {
|
|
170
230
|
const { target = window, passive = false, capture = false } = options;
|
|
171
231
|
let attached;
|
|
172
232
|
const add = (target2) => {
|
|
173
|
-
let element =
|
|
233
|
+
let element = unref2(target2);
|
|
174
234
|
if (element == null ? void 0 : element.$el) {
|
|
175
235
|
element = element.$el;
|
|
176
236
|
}
|
|
@@ -183,7 +243,7 @@ function useEventListener(type, listener, options = {}) {
|
|
|
183
243
|
}
|
|
184
244
|
};
|
|
185
245
|
const remove = (target2) => {
|
|
186
|
-
let element =
|
|
246
|
+
let element = unref2(target2);
|
|
187
247
|
if (element == null ? void 0 : element.$el) {
|
|
188
248
|
element = element.$el;
|
|
189
249
|
}
|
|
@@ -196,8 +256,8 @@ function useEventListener(type, listener, options = {}) {
|
|
|
196
256
|
onDeactivated(() => remove(target));
|
|
197
257
|
onActivated2(() => add(target));
|
|
198
258
|
onMounted(() => add(target));
|
|
199
|
-
if (
|
|
200
|
-
|
|
259
|
+
if (isRef2(target)) {
|
|
260
|
+
watch2(target, (val, oldVal) => {
|
|
201
261
|
remove(oldVal);
|
|
202
262
|
add(val);
|
|
203
263
|
});
|
|
@@ -215,10 +275,10 @@ function useId() {
|
|
|
215
275
|
|
|
216
276
|
// src/useKeepAlive/index.ts
|
|
217
277
|
import { isNumber, isUndefined } from "@daysnap/utils";
|
|
218
|
-
import { ref as
|
|
278
|
+
import { ref as ref4, watch as watch3 } from "vue";
|
|
219
279
|
import { useRoute } from "vue-router";
|
|
220
|
-
var keepAliveList =
|
|
221
|
-
var includes =
|
|
280
|
+
var keepAliveList = ref4();
|
|
281
|
+
var includes = ref4([]);
|
|
222
282
|
var getHistoryState = () => {
|
|
223
283
|
var _a;
|
|
224
284
|
return (_a = history.state) != null ? _a : {};
|
|
@@ -228,7 +288,7 @@ function useKeepAlive(options) {
|
|
|
228
288
|
if (isUndefined(keepAliveList.value)) {
|
|
229
289
|
keepAliveList.value = [];
|
|
230
290
|
const route = useRoute();
|
|
231
|
-
|
|
291
|
+
watch3(
|
|
232
292
|
() => __spreadValues({}, route),
|
|
233
293
|
(to, from) => {
|
|
234
294
|
var _a2;
|
|
@@ -253,7 +313,7 @@ function useKeepAlive(options) {
|
|
|
253
313
|
}
|
|
254
314
|
);
|
|
255
315
|
const ms = isNumber(options) ? options : 0;
|
|
256
|
-
|
|
316
|
+
watch3(
|
|
257
317
|
() => keepAliveList.value,
|
|
258
318
|
(nv, ov) => {
|
|
259
319
|
if (JSON.stringify(nv) !== JSON.stringify(ov)) {
|
|
@@ -286,10 +346,10 @@ function useKeepAlive(options) {
|
|
|
286
346
|
}
|
|
287
347
|
|
|
288
348
|
// src/useKeepAliveByPosition/index.ts
|
|
289
|
-
import {
|
|
349
|
+
import { isBoolean, isUndefined as isUndefined2 } from "@daysnap/utils";
|
|
350
|
+
import { computed, ref as ref5, watch as watch4 } from "vue";
|
|
290
351
|
import { useRoute as useRoute2 } from "vue-router";
|
|
291
|
-
|
|
292
|
-
var keepAliveList2 = ref4();
|
|
352
|
+
var keepAliveList2 = ref5();
|
|
293
353
|
var setState = (state, ms = 0) => {
|
|
294
354
|
if (JSON.stringify(state) !== JSON.stringify(keepAliveList2.value)) {
|
|
295
355
|
setTimeout(() => keepAliveList2.value = state, ms);
|
|
@@ -310,7 +370,7 @@ function useKeepAliveByPosition(options) {
|
|
|
310
370
|
if (isUndefined2(keepAliveList2.value)) {
|
|
311
371
|
keepAliveList2.value = [];
|
|
312
372
|
const route = useRoute2();
|
|
313
|
-
|
|
373
|
+
watch4(
|
|
314
374
|
() => __spreadValues({}, route),
|
|
315
375
|
(_, from) => {
|
|
316
376
|
var _a2;
|
|
@@ -346,11 +406,11 @@ function useKeepAliveByPosition(options) {
|
|
|
346
406
|
|
|
347
407
|
// src/useKeepPosition/index.ts
|
|
348
408
|
import { pick } from "@daysnap/utils";
|
|
349
|
-
import { onActivated as onActivated3,
|
|
409
|
+
import { nextTick, onActivated as onActivated3, ref as ref6 } from "vue";
|
|
350
410
|
import { onBeforeRouteLeave } from "vue-router";
|
|
351
411
|
function useKeepPosition(options = {}) {
|
|
352
412
|
const { selectors } = options;
|
|
353
|
-
const state =
|
|
413
|
+
const state = ref6();
|
|
354
414
|
const getTarget = () => {
|
|
355
415
|
var _a, _b;
|
|
356
416
|
return (_b = (_a = options.getTarget) == null ? void 0 : _a.call(options)) != null ? _b : selectors ? document.querySelector(selectors) : document.documentElement;
|
|
@@ -383,7 +443,7 @@ function useKeepPosition(options = {}) {
|
|
|
383
443
|
|
|
384
444
|
// src/usePaging/index.ts
|
|
385
445
|
import { isArray, isBoolean as isBoolean2, isFunction as isFunction2, isObject, isString } from "@daysnap/utils";
|
|
386
|
-
import { computed as computed2, onBeforeMount as onBeforeMount2, reactive, ref as
|
|
446
|
+
import { computed as computed2, onBeforeMount as onBeforeMount2, reactive, ref as ref7 } from "vue";
|
|
387
447
|
function usePaging(task, options = {}) {
|
|
388
448
|
const { initialStatus, immediate, scrollSelector = ".hor-scroll" } = options;
|
|
389
449
|
const pagingStatus = reactive(
|
|
@@ -407,7 +467,7 @@ function usePaging(task, options = {}) {
|
|
|
407
467
|
}
|
|
408
468
|
}
|
|
409
469
|
};
|
|
410
|
-
const pagingData =
|
|
470
|
+
const pagingData = ref7([]);
|
|
411
471
|
const pagingReset = () => {
|
|
412
472
|
pagingStatus.pagingIndex = 0;
|
|
413
473
|
pagingStatus.pagingTotal = -1;
|
|
@@ -473,7 +533,10 @@ function usePaging(task, options = {}) {
|
|
|
473
533
|
if (isFunction2(options2)) {
|
|
474
534
|
options2();
|
|
475
535
|
}
|
|
476
|
-
return console.log("\u6CA1\u6709\u66F4\u591A\u4E86");
|
|
536
|
+
return console.log("\u6CA1\u6709\u66F4\u591A\u4E86...");
|
|
537
|
+
}
|
|
538
|
+
if (pagingStatus.pagingLoading) {
|
|
539
|
+
return console.log("\u6B63\u5728\u52A0\u8F7D\u4E2D...");
|
|
477
540
|
}
|
|
478
541
|
pagingTrigger(pagingStatus.pagingIndex + 1, options2);
|
|
479
542
|
};
|
|
@@ -512,9 +575,9 @@ function useQuery() {
|
|
|
512
575
|
|
|
513
576
|
// src/useState/index.ts
|
|
514
577
|
import { isFunction as isFunction3 } from "@daysnap/utils";
|
|
515
|
-
import { ref as
|
|
578
|
+
import { ref as ref8 } from "vue";
|
|
516
579
|
function useState(initialState) {
|
|
517
|
-
const state =
|
|
580
|
+
const state = ref8(initialState);
|
|
518
581
|
const setState2 = (value) => {
|
|
519
582
|
state.value = isFunction3(value) ? value(state.value) : value;
|
|
520
583
|
};
|
|
@@ -522,9 +585,9 @@ function useState(initialState) {
|
|
|
522
585
|
}
|
|
523
586
|
|
|
524
587
|
// src/useToggle/index.ts
|
|
525
|
-
import { ref as
|
|
588
|
+
import { ref as ref9 } from "vue";
|
|
526
589
|
function useToggle(initialValue = false) {
|
|
527
|
-
const visible =
|
|
590
|
+
const visible = ref9(initialValue);
|
|
528
591
|
const toggle = (value = !visible.value) => {
|
|
529
592
|
visible.value = value;
|
|
530
593
|
};
|
|
@@ -559,7 +622,7 @@ function useTransfer() {
|
|
|
559
622
|
}
|
|
560
623
|
|
|
561
624
|
// src/useTransitionName/index.ts
|
|
562
|
-
import { ref as
|
|
625
|
+
import { ref as ref10, watch as watch5 } from "vue";
|
|
563
626
|
import { useRoute as useRoute5 } from "vue-router";
|
|
564
627
|
var KEY = "$$useTransitionName__state";
|
|
565
628
|
var get = () => {
|
|
@@ -575,9 +638,9 @@ var set = (state) => {
|
|
|
575
638
|
};
|
|
576
639
|
function useTransitionName(options) {
|
|
577
640
|
const { deep } = options;
|
|
578
|
-
const name =
|
|
641
|
+
const name = ref10("");
|
|
579
642
|
const route = useRoute5();
|
|
580
|
-
|
|
643
|
+
watch5(
|
|
581
644
|
() => __spreadValues({}, route),
|
|
582
645
|
(to, from) => {
|
|
583
646
|
const { position } = history.state || {};
|
|
@@ -603,10 +666,10 @@ function useTransitionName(options) {
|
|
|
603
666
|
}
|
|
604
667
|
|
|
605
668
|
// src/useVisible/index.ts
|
|
606
|
-
import { ref as
|
|
669
|
+
import { ref as ref11 } from "vue";
|
|
607
670
|
function useVisible(options = {}) {
|
|
608
671
|
const { showCallback, hideCallback, confirmCallback } = options;
|
|
609
|
-
const visible =
|
|
672
|
+
const visible = ref11(false);
|
|
610
673
|
let resolve;
|
|
611
674
|
let reject;
|
|
612
675
|
let beforeClose;
|
|
@@ -650,6 +713,7 @@ function useVisible(options = {}) {
|
|
|
650
713
|
export {
|
|
651
714
|
debounceRef,
|
|
652
715
|
useAsyncTask,
|
|
716
|
+
useBodyScrollLock,
|
|
653
717
|
useComposition,
|
|
654
718
|
useCountDown,
|
|
655
719
|
useEventListener,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vrojs/use",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "vrojs composables",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"vue-router": ">=4.2.4"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@daysnap/utils": "^0.1.
|
|
31
|
+
"@daysnap/utils": "^0.1.36",
|
|
32
32
|
"rimraf": "^6.0.1",
|
|
33
33
|
"tsup": "^8.5.1",
|
|
34
34
|
"typescript": "^5.9.3",
|